echarts双(多)环仪表盘

包子脸呀

已于 2023-02-07 12:00:20 修改

阅读量1.8k

点赞数

分类专栏：杂文集文章标签： echarts javascript 前端

于 2023-02-07 11:53:34 首次发布

本文链接：https://blog.csdn.net/baozilianya/article/details/128915937

版权

杂文集专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图思路

由多个仪表盘构成
最外层仪表盘包括圆环、刻度、刻度数、指针、进度数字
进度仪表盘第一层包括进度条、圆环(颜色为背景色)
进度仪表盘第二层包括进度条、圆环(颜色为背景色)
最内层仪表盘包括圆环

option = {
  series: [
  	// 最外层仪表盘
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      radius: '65%',
      min: 0,
      max: 1,
      splitNumber: 4,
      z: 100,
      axisLine: {
        lineStyle: {
          width: 2,
          color: [
            [0.25, '#419ac4'],
            [0.5, '#419ac4'],
            [0.75, '#419ac4'],
            [1, '#419ac4']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', // 5.0以下版本不支持该属性
        length: '72%',
        width: 8,
        itemStyle: {
          color: '#c9f2ff'
        }
      },
      anchor: { // 5.0以下版本不支持该属性
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          color: '#c9f2ff'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        length: 10,
        distance: 0,
        lineStyle: {
          color: '#c9f2ff',
          width: 2
        }
      },
      axisLabel: {
        color: '#c9f2ff',
        fontSize: 20,
        distance: -30,
        rotate: 'tangential',
        formatter: function (value) {
          return value * 100
      },
      detail: {
        fontSize: 35,
        fontWeight: 'normal',
        offsetCenter: [0, '25%'],
        valueAnimation: true,
        formatter: function (value) {
          return Math.round(value * 100) + '%';
        },
        color: 'inherit'
      },
      data: [
        {
          value: 0.75
        }
      ]
    },
    // 进度仪表盘第一层
    {
      type: 'gauge',
      radius: '55%',
      startAngle: 180,
      endAngle: 0,
      z: 90,
      axisLine: {
        lineStyle: {
          width: 12,
          color: [[1, '#100c2a']]
        }
      },
      progress: { // 5.0以下版本不支持该属性
        show: true,
        width: 12,
        itemStyle: {
          color: '#5bd0fc'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      detail: { show: false },
      data: [{ value: 75 }]
    },

    // 最内存仪表盘
    {
      type: 'gauge',
      radius: '15%',
      startAngle: 180,
      endAngle: 0,
      axisLine: {
        lineStyle: {
          width: 2,
          color: [[1, '#419ac4']]
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      detail: { show: false },
      data: [{ value: 0 }]
    },
    // 进度仪表盘第二层
    {
      type: 'gauge',
      radius: '52%',
      startAngle: 180,
      endAngle: 0,
      z: 40,
      axisLine: {
        lineStyle: {
          width: 110,
          color: [[1, '#100c2a']]
        }
      },
      progress: { // 5.0以下版本不支持该属性
        show: true,
        width: 110,
        itemStyle: {
          color: '#0c4568'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      detail: { show: false },
      data: [{ value: 75 }]
    }
  ]
};