利用Echarts制作不规则刻度的仪表盘图表示例

Echarts的仪表盘组件是一个比较炫酷的图表，能瞬间提升页面B格。但是默认的仪表盘组件的刻度都是按照设置的最大值均匀分布的。而实际应用中很多场景需要将部分数值区间放大显示到仪表盘上，比如仪表盘前面 50% 显示 0-10 的数值范围后面 50% 就显示 10-50 的范围。这种不规则的刻度不能直接调用 Echarts 提供的方法。需要将数据根据需求进行转换。

本文展示了通过数据转换后实现的不规则刻度仪表盘效果。

1、

let ruler = [0, 10, 25, 50, 100, 200, 500, 1000, 2000]; //仪表盘刻度
let val = 130;  //仪表盘当前显示值
setGaugeOption(myChart, ruler, val);   //仪表盘

效果如下图：

2、

let ruler = [-20, -10, 0, 10, 20, 40, 80]; //仪表盘刻度
let val = -5;  //仪表盘当前显示值
setGaugeOption(myChart, ruler, val);   //设置仪表盘

效果如下图：

demo下载：点我下载