Echarts制作不规则刻度的仪表盘图表,自定义仪表盘刻度值

效果图
图表默认是十等分,我这边自定义前9份是自定义的,最后一份是100-∞正无穷, 因为需求不知道最大值是多少,索性给无穷好了

一,自定义刻度的值

option = {
  series: [
  	min: 0,
	max: 100, // 最大值
   		axisLabel: {
        	formatter: function (value) {
        		// value打印出来是按十等分平均分配的值,打印出来就是0,10,20,30,.....90,100
        		// 配合最大值使用,max*0.9 总共十等分,0.9就是前9份
	  			if (value <= 100 * 0.9) {
	          		// 前9个刻度, 平分min-max所有的值,保留两位小数
	           		return ((value / 10) * (100 / 9)).toFixed(2);
        		} else {
	           		// 后1个刻度, 原始value是100,我这里直接返回无穷了
	           		return '∞';
	         	}
        	}
      	},
	]
  }

上面刻度已经是自定义分配了,但是你会发现,指针指的值跟刻度对不上,因为指针还是以10等分的刻度进行指的,所有会不准.

二,修改指针指的值与刻度对应

option = {
  series: [
	 ......
     detail: {
     	......
        formatter: (e) => {
          return (e / 0.9).toFixed(2) + 'μSv/h'; // 格式化回显的值,
        },
      },
      data: [
        {
        ......
          value: 1.11 * 0.9, // 指针与刻度值对齐
        }
      ]
	]
  }

Done !