【代码片段】使用echart绘制仪表盘和波形图

背景

在物联网应用中，有很多数据需要展示。通常情况下，我们将数据通过串口打印输出的终端。这种方式可以满足自己开发过程中的调试，但作为成果展示和长期应用并不方便。这段时间开发的电源监控调试模块就遇到这样的问题，本文记录了对于电压、电流和功率波形图显示部分的示例代码。

本文使用wails开发，后端为golang，前端使用vue。对于电压、电流和功率波形图的显示使用echart实现。

导入echart

在前端代码的根目录下，执行下列语句，导入echart

npm install echarts --save

创建相应的html元素

<div>
    <el-row>
      <el-col :span="12" class="voltage">
        <div ref="voltageDom" style="width: 100%; height: 300px;"></div>
      </el-col>
      <el-col :span="12" class="current">
        <div ref="currentDom" style="width: 100%; height: 300px;"></div>
      </el-col>
    </el-row>

    <el-row class="power-box">
      <el-col :span="4" class="power-num">
        <el-row>
          <div class="power-value">{{ data.powerNum }}</div>
        </el-row>
        <el-row>
          <div class="power-label">mW</div>
        </el-row>
      </el-col>
      <el-col :span="20" class="power-wav">
        <div ref="powerWavDom" style="width: 100%; height: 100%;"></div>
      </el-col>
    </el-row>
<div>

获取dom元素

import * as echarts from 'echarts';
import { ref } from 'vue';

const voltageDom = ref(null)
const currentDom = ref(null)
const powerWavDom = ref(null)

创建绘图

以电压仪表为例，创建绘图

  var voltageChart = echarts.init(voltageDom.value);
  voltageChart.setOption({
    animation: false,
    series: [
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 4000,
        splitNumber: 5,
        itemStyle: {
          color: '#f6d148'
        },
        progress: {
          show: true,
          width: 10
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 10
          }
        },
        axisTick: {
          distance: -20,
          splitNumber: 5,
          lineStyle: {
            width: 1,
            color: '#605f5f'
          }
        },
        splitLine: {
          distance: -40,
          length: 10,
          lineStyle: {
            width: 3,
            color: '#605f5f'
          }
        },
        axisLabel: {
          distance: -30,
          color: '#605f5f',
          fontSize: 20
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          width: '60%',
          lineHeight: 50,
          borderRadius: 8,
          offsetCenter: [0, '15%'],
          fontSize: 30,
          fontWeight: 'bolder',
          formatter: '{value} mV',
          color: 'inherit'
        },
        data: [
          {
            value: data.voltage
          }
        ]
      }
    ]
  });

更新数据

更新数据时，仅需要对需要刷新的数据更新赋值即可。

  voltageChart.setOption({
    series: [{
      data: [
        {
          value: data.voltage
        }
      ]
  }]})

最新效果