echart 仪表盘绘制（适用于需要显示当前进度的图表）

目录

• 设备温度监测，仪表盘需求
• 代码及效果图如下
• • echart 版本 5.x
  • echart 版本 4.x

设备温度监测，仪表盘需求

代码及效果图如下

项目需要显示当前设备温度的图表，如下

看了下echart上的例子，没有现成的，所以自己找了找配置，然后写了一个。
在写的过程中发现，官网上调整好的代码，在项目中显示出错。
发现是因为项目使用的echart版本是4，而官网已经是5了。最新版本有些新的配置项是旧版本没有的，所以显示会出错
这里我针对两个4、5两个版本都配置好了。

echart 版本 5.x

首先是版本5的代码如下：

import * as echarts from 'echarts';
 
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  series: [
    {
      type: 'gauge', // 仪表盘
      max: 150, // 仪表盘最大值
      splitNumber: '10', // 仪表盘的段数
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.5, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        color: 'inherit',
        distance: -50,
        fontSize: 20,
        formatter: function (value) {
          if (
            value === 0 ||
            value === 150 * 0.5 ||
            value === 150 * 0.7 ||
            value === 150
          ) {
            return value;
          }
        }
      }
    },
    {
      type: 'gauge',
      radius: '65%',
      axisLine: {
        lineStyle: {
          width: 30,
          color: [[1, '#fff']]
        }
      },
      // 当前进度
      progress: {
        show: true,
        overlap: false,
        clip: false,
        itemStyle: {
          color: 'red'
        }
      },
      pointer: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      title: {
        show: true,
        color: 'red',
        offsetCenter: [0, '-3%'],
        fontSize: '48'
      },
      detail: {
        valueAnimation: true,
        offsetCenter: [0, '-30%'],
        fontSize: '48',
        formatter: '{value} ℃',
        color: 'inherit'
      },
      data: [
        {
          value: 70,
          name: '当前温度'
        }
      ]
    }
  ]
};
 
option && myChart.setOption(option);复制

贴上效果图：

echart 版本 4.x

option = {
   series: [
     {
       type: "gauge", // 仪表盘
       max: 150, // 仪表盘最大值
       splitNumber: "10", // 仪表盘的段数
       axisLine: {
         lineStyle: {
           width: 30,
           color: [
             [0.5, "#21d9ce"],
             [0.7, "#eb9210"],
             [1, "#e94f29"],
           ],
         },
       },
       pointer: {
         show: false,
       },
       axisTick: {
         show: false,
       },
       splitLine: {
         show: false,
       },
       axisLabel: {
         color: "#fff",
         distance: -48,
         fontSize: 12,
         formatter: function (value) {
           if (
             value === 0 ||
             value === 150 * 0.5 ||
             value === 150 * 0.7 ||
             value === 150
           ) {
             return value;
           }
         },
       },
       detail: {
         show: false,
       },
     },
     {
       type: "gauge",
       max: this.max,
       radius: "58%",
       axisLine: {
         lineStyle: {
           width: 30,
           color: [
             [0.6, '#eb9210'], // 模拟当前的进度 percentage 百分比 , currentColor 进度的颜色
             [1, "#adb4b580"],
           ],
         },
       },
       progress: {
         show: true,
         overlap: false,
         clip: false,
         itemStyle: {
           color: "red",
         },
       },
       pointer: {
         show: false,
       },
       axisTick: {
         show: false,
       },
       splitLine: {
         show: false,
       },
       axisLabel: {
         show: false,
       },
       title: {
         show: true,
         color: "red",
         offsetCenter: [0, "20%"],
         fontSize: "48",
       },
       detail: {
         valueAnimation: true,
         offsetCenter: [0, "-30%"],
         fontSize: "48",
         formatter: '{value}℃',
       },
       data: [
         { value: 70, name: '当前温度' }
       ],
     },
   ],
 };
 
 option && myChart.setOption(option);复制

贴上效果图：