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

原创于 2021-02-24 09:47:09 发布 · 置顶 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts仪表盘 #不规则刻度仪表盘 #自定义刻度仪表盘

前端备忘录专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用Echarts创建不规则刻度的仪表盘组件，通过数据转换来达到特定数值区间放大的展示效果。示例中展示了两种不同刻度分布的仪表盘，一种是前50%显示0-10，后50%显示10-50，另一种是负数区间放大。提供demo下载以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);   //仪表盘

效果如下图：

示例1图片

2、

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

效果如下图：

demo下载：点我下载