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

本文主要是介绍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 !

这篇关于Echarts制作不规则刻度的仪表盘图表,自定义仪表盘刻度值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---