HarmonyOS鸿蒙Next JS UI之Chart、Switch组件的组合使用

HarmonyOS鸿蒙Next JS UI之Chart、Switch组件的组合使用 HarmonyOS提供了常用的JS接口和组件，开发者可以根据实际场景和开发需求，选用不同的组件和接口。本节演示基础组件switch和chart组件的使用。

项目概述

在本教程中，我们将会通过一个简单的样例，将chart组件和switch组件进行结合，实现线形图、量规图、柱状图不同效果的展示，并通过switch切换chart组件数据的动静态显示。效果如下图所示，开发者还可以根据自己的需求添加不同的效果。

创建项目

创建一个JS UI的"Empty Ability(Js)" 模板项目。

项目名为“JsChartSwitch”

将组件添加到布局文件中

项目初始化之后，index.hml文件默认代码如下：

<div class="container">
  <text class="title">{{ $t('strings.hello') }} {{ title }}</text>
</div>

可以删除index.hml中的<text>组件默认代码，而后在container类中，添加如下switch、chart组件的代码。

定义switch组件

switch组件有动态和静态两种切换方式，添加如下switch组件代码。

<!-- switch组件代码 -->
<div class="switch-block">
  <switch class="switch"
          showtext="{{ showText }}"
          texton="{{ textOn }}"
          textoff="{{ textOff }}"
          allow-scale="{{ allowScale }}"
          onchange="change">
  </switch>
</div>

定义chart组件

添加chart组件呈现线形图、量规图、柱状图三种类型的图表，代码如下：

<!-- chart组件代码 -->
<div class="chart-block">
  <text class="text-speed">利润</text>
  <chart class="chart-data" type="line" ref="linechart" options="{{ lineOps }}" datasets="{{ lineData }}"></chart>
  <text class="text-time">年份</text>
</div>

<div class="gauge-block">
  <chart class="data-gauge" type="gauge" percent="{{ percent }}"></chart>
</div>

<div class="bar-block">
  <text class="text-speed">销量</text>
  <chart class="data-bar" type="bar" id="bar-chart" options="{{ barOps }}" datasets="{{ barData }}"></chart>
  <text class="text-time">年份</text>
</div>

设计样式

上面所有的组件，我们都定义了class属性，它对应的样式都定义在index.css中。我们删掉title类的默认样式代码后，在index.css中添加switch、chart组件的样式代码。

定义switch组件样式

这部分定义了switch-block容器的样式，以及switch组件的样式，代码如下：

.switch-block {
  width: 98%;
  height: 50px;
}

.switch {
  text-padding: 10px;
  font-size: 12px;
  texton-color: #5F5F5F;
  textoff-color: #707070;
}

定义chart组件样式

这部分定义了chart组件线形图、量规图、柱状图三种类型的样式，在index.css中继续添加如下代码：

.chart-block, .gauge-block, .bar-block {
  position: relative;
  width: 98%;
  border-radius: 5px;
  background-color: #E3F8F9;
}

.text-speed {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 10px;
  font-size: 10px;
}

.chart-data {
  margin: 10px 5px 10px;
  width: 100%;
  height: 100px;
}

.text-time {
  position: absolute;
  font-size: 10px;
  bottom: 2px;
  right: 10px;
}

.gauge-block, .bar-block {
  margin-top: 10px;
}

.data-gauge {
  width: 200%;
  height: 200px;
  margin: 10px 0 10px;
  start-angle: 0;
  total-angle: 360;
  stroke-width: 20px;
  colors: #CF0A2C, #8477DF, #17A98E;
  weights: 3, 2, 1;
}

.data-bar {
  width: 100%;
  height: 200px;
  margin: 10px 5px 10px;
}

为组件添加响应事件

前面布局中的组件已经定义了初始值，接下来要补充更多的数据，在index.js中首先添加如下代码：

export default {
  data: {
    interval: null,
    showText: true,
    textOn: '动态',
    textOff: '静态',
    allowScale: true,
    dataLength: 5,
    barGroup: 3,
    lineData: null,
    lineOps: {
      xAxis: {
        min: 0,
        max: 5,
        display: true
      },
      yAxis: {
        min: 0,
        max: 100,
        display: true
      },
      series: {
        lineStyle: {
          width: '1px',
          smooth: true
        },
        headPoint: {
          shape: 'circle',
          size: 10,
          strokeWidth: 2,
          fillColor: '#ffffff',
          strokeColor: '#8477DF',
          display: true
        },
        loop: {
          margin: 2
        }
      }
    },
    percent: 100,
    barData: [
      {
        fillColor: '#CF0A2C',
        data: [2, 20, 99, 56, 23]
      },
      {
        fillColor: '#8477DF',
        data: [99, 88, 2, 67, 12]
      },
      {
        fillColor: '#17A98E',
        data: [56, 2, 77, 99, 78]
      }
    ],
    barOps: {
      xAxis: {
        min: 0,
        max: 20,
        display: true,
        axisTick: 5
      },
      yAxis: {
        min: 0,
        max: 100,
        display: true
      }
    }
  },
  // 初始化
  onInit() {
    this.changeLine();
  },
  change(e) {
    if (e.checked) {
      this.interval = setInterval(() => {
        this.changeLine(); // 更新线形图数据
        this.changeGauge(); // 更新量规图数据
        this.changeBar(); // 更新柱状图数据
      }, 1000);
    } else {
      clearInterval(this.interval);
    }
  },
  // 更新线形图数据
  changeLine() {
    var dataArray = [];
    for (var i = 0; i < this.dataLength; i++) {
      var nowValue = Math.floor(Math.random() * 99 + 1);
      var obj = {
        "value": nowValue,
        "description": nowValue + "",
        "textLocation": "top",
        "textColor": "#CDCACA",
        "pointStyle": {
          "shape": "circle",
          "size": 5,
          "fillColor": "#CF0A2C",
          "strokeColor": "#CF0A2C"
        }
      };
      dataArray.push(obj);
    }
    this.lineData = [{
      strokeColor: '#17A98E',
      data: dataArray,
      gradient: false
    }];
  },
  // 更新量规图数据
  changeGauge() {
    this.percent = parseInt(this.percent) >= 99 ? 0 : parseInt(this.percent) + 1;
  },
  // 更新柱状图数据
  changeBar() {
    for (var i = 0; i < this.barGroup; i++) {
      var dataArray = this.barData[i].data;
      for (var j = 0; j < this.dataLength; j++) {
        dataArray[j] = Math.floor(Math.random() * 99 + 1);
      }
    }
    this.barData = this.barData.splice(0, this.barGroup + 1);
  }
}

这些值的具体含义，可以参考如下表格：

运行

运行应用，可以看到初始化界面如下：

点击上面的switch组件，可以看到chart数据发生了变化，界面如下：

源码

上述示例源码，可以在https://github.com/waylau/harmonyos-tutorial仓库找到。