仪表盘 echarts

先看效果

 定义一个容器

注意：使用百分比 外层盒子要有高度和宽度

<div id="compass" style="width:500px;height: 500px;"></div>

引入echarts  直接全局引入 也可以按需引入

import * as echarts from 'echarts';

 使用的是vue3所以在onMounted中调用方法  等待nextTick()执行完调用 避免获取不到dom

onMounted(async () => {

  await nextTick()
  initEchart()
})

下面是方法 相应的属性都有备注 

function initEchart(){
let chart = echarts.init(document.getElementById('compass'));
  const gaugeData = [
    {
      value: 120.3,
      name: '航向',
      title: {
        color: "#626b71",
        offsetCenter: ['-30%', '-20%'] //设置标题位置 [水平 垂直]
      },
      itemStyle: {
        color: '#306CF0' //箭头颜色 图例颜色
      },
      detail: {
        fontSize: 16,
        color: "#306CF0", //value值颜色
        offsetCenter: ['30%', '-20%']
      }
    },
    {
      value: 40.8,
      name: '艏向',
      title: {
        color: "#626b71",
        offsetCenter: ['-30%', '20%']
      },
      itemStyle: {
        color: '#000000'
      },
      detail: {
        color: "#000000",
        fontSize: 16,
        offsetCenter: ['30%', '20%']
      }
    }]
  chart.setOption({
    series: [
      {
        type: "gauge", //图表类型
        max: 360,
        startAngle: 90, //开始角度 正上方
        endAngle: -270, 
        radius: '60%', //大小
        splitNumber: 4, //分割份数
        axisLine: {
          lineStyle: {
            width: 6, //圆圈的宽度
            shadowBlur: 0,
            color: [
              [1, '#344047'] //圆圈颜色 可以多种颜色自己调
            ]
          }
        },
        axisTick: {
          show: false //是否显示坐标轴刻度
        },
        splitLine: {
          show: false
        },
        //根据角度确定N E S W
        axisLabel: {
          formatter: function (e) {
            switch (e + "") {
              case "0":
                return "N";
              case "360":
                return "N";
              case "180":
                return "S";
              case "90":
                return "E";
              case "270":
                return "W";
              default:
                return e;
            }
          },
          distance: -40,//标记与圆圈的距离 自己调整在内部或则外部
          fontSize: 17,
        },
        pointer: {
          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",//设置圈上的图标
          length: '24%',//图标长度
          width: 10,
          offsetCenter: [0, '-88%'],//图标位置 [0,0]是中心点
        },
        data: gaugeData, //数据
        detail: {
          formatter: "{value}°" 
        },
      }]
  })
}