效果图
图表默认是十等分,我这边自定义前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 !