Echarts仪表盘实现平均值和实时值-定制版

最新推荐文章于 2024-05-15 16:53:15 发布

妞宝宝

最新推荐文章于 2024-05-15 16:53:15 发布

阅读量479

点赞数 9

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_42113124/article/details/135285941

版权

背景：想在仪表盘上看到指标对应的平均值，在仪表盘下方显示指标的实时值

最终效果图如下：
在这里插入图片描述
代码实现：

let centerArr = ['50%', '78%']
option = {
    grid: {
      right: '0%',
      top: '0%',
      left: '0%',
      bottom: '0%',
      containLabel: true
    },
    series: [
      {
        name: '圆点刻度',
        type: 'gauge',
        radius: '135%',
        center: centerArr,
        z: 3,
        splitNumber: 100,
        startAngle: 180,
        endAngle: -0,
        min: 0,
        max: 100,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          distance: -23,
          formatter: function (val) {
            if (val == 85) { // 假如平均值是85，则给小球设置样式
              return '{primary|}'
            }
            return ''
          },
          rich: { // 使用rich语法设置均值小球的样式
            primary: {
              width: 8,
              height: 8,
              borderRadius: 20,
              borderWidth: '1px',
              borderColor: '#FF4B4B',
              backgroundColor: '#FFFFFF'
            }
          }
        },
        axisTick: {
          show: false
        },
        detail: {
          show: false
        }
      },
      {
        name: '线条外圈', // 刻度背景
        type: 'gauge',
        z: 2,
        radius: '135%',
        // splitNumber: 10,
        startAngle: 180,
        endAngle: -0,
        min: 0,
        max: 100,
        center: centerArr, // 整体的位置设置
        axisLabel: {
          show: false
        },
        // 仪表盘轴线相关配置
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.25, '#FF4B4B'],
              [0.5, '#FF9E57'],
              [0.75, '#1F8FE6'],
              [1, '#64CDBB']
            ]
          }
        },
        axisTick: {
          length: 6,
          distance: 2,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        // 分隔线样式
        splitLine: {
          length: 10,
          distance: 2,
          lineStyle: {
            color: 'auto',
            width: 3
          }
        },
        pointer: {
          show: false
        },
        detail: {
          show: 0
        }
      },
      {
        name: '刻度尺', // 刻度背景
        type: 'gauge',
        z: 1,
        radius: '135%',
        splitNumber: 0,
        startAngle: 180,
        endAngle: -0,
        center: centerArr, // 整体的位置设置
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.25, '#FF4B4B'],
              [0.5, '#FF9E57'],
              [0.75, '#1F8FE6'],
              [1, '#64CDBB']
            ]
          }
        },
        splitLine: {
          show: false
        },
        data: [
          {
            value: 74.97 // 指标的实时值，假如值为74.97
          }
        ],
        axisLabel: {
          show: false
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: 10,
          offsetCenter: [0, '-65%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          show: false
        },
        detail: {
          formatter: function (val) {
            // 图表中间文字数据展示
            return '{bold|' + val + '%' + '\n}{gray|' + props.rateName + '}' //props.rateName指的是指标的名称，类似图中的实时指标
          },
          rich: {
            gray: {
              fontSize: 16,
              fontWeight: 400,
              color: '#F8FDFF'
            },
            bold: {
              fontSize: 32,
              // lineHeight: 135,
              fontWeight: 700,
              color: '#F8FDFF'
            }
          },
          offsetCenter: ['0', '10%']
        }
      }
    ]
  }```