echarts根据不规则刻度自定义仪表盘

需求：每个区间展示不同大小的数据段，且指针展示相应的位置。

仪表盘统一刻度单位统一成μSv，刻度7个刻度：0.01μSv，0.5μSv，2.5μSv，25μSv，1000μSv，10000μSv，100000μSv。

【0.01μSv-0.5μSv】区间用白的颜色

【0.5μSv-2.5μSv】区间用绿的颜色

【2.5μSv-25μSv】区间用黄的颜色

【25μSv-1000μSv】区间用橙的颜色

【1000μSv-10000μSv】区间用红的颜色

【10000μSv-100000μSv】区间用玫瑰红的颜色

难点：echarts表盘是均匀分布的。

实现图片：

<div class="dataTable" id="deviceData" ></div>

import * as echarts from 'echarts';

deviceData(){
      var chartDom = document.getElementById('deviceData');
      this.myDataChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            min:'0.01', //最小值
            max:'100000', //最大值
            splitNumber:6, //分6段
            radius :'85%',
            name: '设备1',
            type: 'gauge',
            progress: {
              show: false
            },

            axisTick:{
              splitNumber :10, //每一大段分10小段
            },
            axisLine: {
              length :100,
              lineStyle: {
                width: 20,
                color: [
                  [1/6, '#ffffff'], //第一段颜色
                  [2/6, '#3ba272'], //第二段颜色
                  [3/6, '#fac54f'], //第三段颜色
                  [4/6, '#fa7b45'], //第四段颜色
                  [5/6, '#d9444b'], //第五段颜色
                  [1, '#b10a18'],  //第六段颜色
                ],
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto',
                borderColor :'#ccc'
              },
              length:'65%',
            },
            title:{
              show:true,
              color: '#fff',
              offsetCenter: [0, '70%']
            },
            splitLine: {
              distance: -20,
              length: 20,
            },
            detail: {
              padding:[-20,0,0,0],
              valueAnimation: true,
              fontSize:24,
              formatter: (e) => {
                return 'μSv'; //默认显示单位
              },
            },
            axisLabel: {
              formatter: function (value) {
                if (value === 0.01) { //value是根据echarts返回的值进行判断，每一段区间展示不同的label
                  return '0.01μSv';
                } else if (value === 16666.675) {
                  return '0.5μSv';
                } else if (value ===33333.34) {
                  return '2.5μSv';
                } else if (value === 50000.005) {
                  return '25μSv';
                } else if (value === 66666.67) {
                  return '1000μSv';
                }else if (value === 83333.335) {
                  return '10000μSv';
                }else if (value === 100000) {
                  return '100000μSv';
                }
                return ''; 
              }
            },

            data: [
              {
                value:0.01, //默认值
                // name: '设备',
              }
            ]
          }
        ]
      };

      option && this.myDataChart.setOption(option);
    },


//根据真实数据显示在页面
onUpdateData(){
//data 是返回的真实数据

      let isNumber = this.getnsvData(data)//根据数据判断在那个区间内，计算区间内的显示位置
      let toFixedNumber = isNumber.toFixed(2)
      if (isNumber) {
        this.myDataChart.setOption({
          series: [
            {
              data: [
                { 
                  value: toFixedNumber //显示指针指向
                }
              ],
              detail: {
                formatter: (e) => {
                  let argu = (data/1000).toFixed(2) //单位换算
                  return argu + 'μSv/h'; //显示表盘数据
                },
              },
            }

          ]
        });
      }
    },
//根据数据判断在那个区间内，计算区间内的显示位置
getnsvData(number){
      let data = number/1000  //单位换算
      let bili = 16666.675    //前面echarts返回的值
      let tempData =  0.01    
      if (data >= 0.01 && data < 0.5 ) { tempData = ((data- 0.01)/(0.5 - 0.01))*bili  }
      else if (data >= 0.5 && data < 2.5 ) { tempData =(((data- 0.5)/(2.5 - 0.5))*bili)+bili  }
      else if (data >= 2.5 && data < 25 ) {tempData =(((data- 2.5)/(25 - 2.5))*bili)+2*bili}
      else if (data >= 25 && data < 1000 ) { tempData = (((data- 25)/(1000 - 25))*bili)+3*bili  }
      else if (data >= 1000 && data < 10000 ) {tempData = (((data- 1000)/(10000 - 1000))*bili)+4*bili }
      else if (data >= 10000 && data <= 100000 ) {tempData = (((data- 10000)/(100000 - 10000))*bili)+5*bili }
      else if (data > 100000 ) {tempData = 100000 }
      return tempData
    },

完成！谢谢！欢迎交流!