echarts外滑指针_三色区间_仪表盘

echarts代码

option = {
  series: [
    // 内环刻度
    {
      type: 'gauge',
      center: ['50%', '60%'],
      radius: 200,
      startAngle: 210,
      endAngle: -30,
      min: 1,
      max: 3,
      splitNumber: 5, //分段
      // 环宽
      axisLine: {
        lineStyle: {
          width: 23,
          color: [[1, '#e7ecf8']]
        }
      },
      // 短刻度线
      axisTick: {
        distance: 0,
        splitNumber: 3,
        lineStyle: {
          width: 1,
          color: '#BAC2D1'
        }
      },
      // 长刻度线
      splitLine: {
        show: false
      },
      // 刻度值
      axisLabel: {
        distance: 13,
        color: '#BAC2D1',
        fontSize: 12
      }
    },
    // 中环色块
    {
      type: 'gauge',
      center: ['50%', '60%'],
      radius: 200,
      startAngle: 210,
      endAngle: -30,
      min: 1,
      max: 3,
      axisLine: {
        lineStyle: {
          width: 18,
          color: [
            [0.3, '#62DAAB'],
            [0.7, '#1890FF'],
            [1, '#FFC018']
          ]
        }
      },
      pointer: {
        icon: 'pin',
        length: 18,
        width: 18,
        offsetCenter: [0, -193],
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      // 显示数值样式
      detail: {
        valueAnimation: true,
        fontSize: 40,
        offsetCenter: [0, 0]
      },

      data: [
        {
          value: 1.5,
          name: 'PUE'
        }
      ]
    },
    // 外环刻度
    {
      type: 'gauge',
      center: ['50%', '60%'],
      radius: 220,
      startAngle: 210,
      endAngle: -30,
      min: 1,
      max: 3,
      axisLine: {
        lineStyle: {
          width: -3,
          color: [[1, '#e7ecf8']]
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    }
  ]
};

echarts链接

echarts预览地址