vue+echarts实现仪表盘

API文档：请点击

仪表盘实例地址：请点击

目标样式：

实现代码：

//html部分
<div id="dashboardHumidity" style="width: 200px; height: 200px"></div>

//js部分
//仪表盘
    drawDev() {
      let myChart = this.$echarts.init(
        document.getElementById("dashboardHumidity")
      );
      // 绘制图表
      myChart.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          show: false,
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        // 配置
        series: [
          {
            name: "温度",
            type: "gauge",
            axisLabel: { distance: 0, fontWeight: 100, shadowOffsetY: 100,height: 100},
            axisLine: {
                lineStyle: {
                    width: 10 // 修改仪表盘宽度的属性
                }
            },
            title: {offsetCenter: [0, '85%'], color: 'red'},
            detail: { formatter: "{value}℃",offsetCenter: [0, '65%'],fontStyle: "oblique",fontSize: 18},
            pointer: {width: 8}, 
            data: [{ value: 50, name: "温度" }]
          },
        ],
      });
    }

细节说明：

1、tooltip：控制仪表板显示的格式问题

2、toolbox：控制右上角工具栏，这里我并不需要展示，所以给了false。如：

3、series这个最核心的配置部分，他可以更改样式，设置字体的位置，以及仪表盘的宽度，坐标轴文字的样式，类型等。

4、axisLine：修改仪表盘的宽度

5、title： 文字说明的样式和文职。offsetCenter是控制显示的位置的，这里的[0,'85%']。偏移的位置是0

6、detail: 就是仪表盘代表的是什么数据了，这里是温度，大多数是百分数

7、pointer: 仪表盘的指针设置

8、data: 数据源及其结构