echarts方向仪表盘（罗盘图）

今天在vue3中实现了两种罗盘图，先看效果：

这个指针会动

第一种代码：

function direction() {
  let chart = echarts.init(document.getElementById("direction"));
  let startAngle = 90;
  let endAngle = 450;
  let option = {
    series: [{
      name: '方向表',
      type: 'gauge',
      detail: {
        formatter: '{value}°',
        textStyle: {       
          //color: 'auto',
          fontSize: 14,
          fontWeight: 'bolder'
        }
      },
      startAngle: startAngle,
      splitNumber: 8,
      endAngle: endAngle,
      min: 0,
      max: 360,
      axisLabel: {
        fontSize: 12,
        distance: -40,
        formatter: function (value) {
          const directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北'];
          const index = Math.floor((value + 22.5) / 45) % 8; // 计算当前值对应的方向索引，考虑ECharts的0度在右侧，需要调整
          return directions[index];
        }
      },
      pointer: {			  // 仪表盘指针
        width: 2
      },
      data: [{
        value: 270,
        //name: '西风'
      }]
    }]
  };

  // 把配置和数据放这里
  chart.setOption(option);
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
  // 使用刚指定的配置项和数据显示图表，加个定时生成，让你的仪表盘动起来
  let angle = 90;
  setInterval(function () {
    angle = angle + 5;
    option.series[0].data[0].value = angle;
  }, 2000);
}

 另一个罗盘方向会动，指针始终在最上面：

function direction1() {
  let chart = echarts.init(document.getElementById("direction1"));
  let startAngle = 90; // 初始时，北在上，即0度对应90度的位置（因为ECharts的0度是右侧）
  let endAngle = 450; // 结束角度，确保绘制一个完整的圆
  let option = {
    series: [{
      name: '方向表',
      type: 'gauge',
      detail: {
        formatter: '{value}°',
        textStyle: {
          fontSize: 14,
          fontWeight: 'bolder'
        }
      },
      startAngle: startAngle,
      splitNumber: 8,
      endAngle: endAngle,
      min: 0,
      max: 360,
      axisLabel: {
        fontSize: 12,
        distance: -40,
        formatter: function (value) {
          const directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北'];
          const index = Math.floor((value + 22.5) / 45) % 8; // 计算当前值对应的方向索引，考虑ECharts的0度在右侧，需要调整
          return directions[index];
        }
      },
      pointer: {
        width: 2
      },
      data: [{
        value: 90, // 初始值，例如东
      }]
    }]
  };

  chart.setOption(option);
  window.onresize = function () {
    chart.resize();
  };

  // 使用刚指定的配置项和数据显示图表，并添加定时更新角度的功能
  let currentValue = 90; // 当前值，初始为东
  setInterval(function () {
    currentValue = (currentValue + 5) % 360; // 更新当前值，确保它在0-360之间循环
    const newStartAngle = (currentValue + 90) % 360; // 计算新的开始角度，确保它在0-360之间
    option.series[0].startAngle = newStartAngle; 
    option.series[0].endAngle = newStartAngle+360;
    option.series[0].data[0].value = currentValue; // 更新数据值
    chart.setOption(option, true); // 更新图表
  }, 2000);
}