echarts实现仪表盘形式展示数据

jojo是只猫

已于 2024-01-02 16:54:13 修改

阅读量598

点赞数

文章标签： echarts 前端 javascript

于 2023-06-01 16:53:59 首次发布

本文链接：https://blog.csdn.net/weixin_42496938/article/details/130991810

版权

实现效果
在这里插入图片描述

直接上代码

option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%',
  },
  series: [
    {
      type: 'gauge',
      min: 0, // 最小刻度
      max: 100,
      radius: '40%',
      progress: {
        show: true,
        width: 18,
        roundCap: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
             offset: 0,
             color: '#A65FFB'
           }, {
             offset: 1,
             color: '#3163F5'
           }])
        }
      },
      axisLine: {
        lineStyle: {
          width: 18
        },
        roundCap: true,
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,
      },
      pointer: {
        show: false,
      },
      axisLabel: {
        show: false
      },
      anchor: {
        show: false,
      },
      detail: {
        fontSize: 100,
        offsetCenter: [0, 0]
      },
      data: [
        {
          value: 33
        },
      ]
    }
  ]
};

可以查看效果：点击

尺寸监听

onMounted(() => {
  nextTick(() => {
    window.addEventListener('resize', onloadEcharts);
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', onloadEcharts);
});