Using Echarts to make an example of a dashboard chart with an irregular scale

The dashboard component of Echarts is a relatively cool chart, which can instantly improve the page B level. However, the scales of the default dashboard components are evenly distributed according to the set maximum value. However, in many scenarios in practical applications, it is necessary to enlarge and display part of the numerical range on the dashboard. For example, the front 50% of the dashboard displays the value range of 0-10, and the rear 50% of the dashboard displays the range of 10-50. This kind of irregular scale cannot directly call the method provided by Echarts. The data needs to be transformed as required.

This article shows the effect of the irregular scale dashboard after data conversion.

1、

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

The effect is as follows:

2、

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

The effect is as follows:

demo download: click me to download