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

最新推荐文章于 2025-09-26 04:36:19 发布

原创

最新推荐文章于 2025-09-26 04:36:19 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

文章提供了使用ECharts4.x和5.x版本创建设备温度监测仪表盘的代码示例，包括Gauge类型的图表配置，如max值、splitNumber、axisLine的lineStyle等，并展示了对应版本的效果图。由于版本差异，部分新配置在旧版本中不适用。

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

代码及效果图如下

项目需要显示当前设备温度的图表，如下
在这里插入图片描述
看了下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)