坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求

最新推荐文章于 2025-05-15 16:24:42 发布

原创

最新推荐文章于 2025-05-15 16:24:42 发布 · 6.1k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#刻度计算 #echarts坐标轴分段 #splitNumber #魔数数组

本文介绍了如何解决Echarts坐标轴刻度计算问题，特别是如何确保刻度线分为四段。通过算法描述、代码实现和效果展示，详细解释了一种基于魔数数组的方法，该方法能有效处理数据波动和刻度区间过大的情况，同时考虑了正负对称和非对称情况。

数值型坐标轴刻度计算算法

前言
算法描述
上代码
代码运行效果
ts版本(2021/3/10补充)
结语

前言

因实习的公司是做大数据的，而我的工作刚好又是需要绘制一些数据图表的。绘制图表有许多现成的组件可以使用，但是要想达到产品所需要的效果，只靠组件内部的一些功能是不太够的。一些细腻的要求必须在掌握组件原理方法的情况下，自己去写算法来完成。例如，本文要说的这个刻度计算算法，开始正文之前，我先描述遇到的问题。
echarts自身的刻度计算有时候并不好用，例如有时候你希望让图表只有5条刻度线，即分成4段，echarts提供了一个参数叫splitNumber，把splitNumber设为4可以让图表尽量地分成4段，然而当数据波动较大时，echarts会自动增加分割的段数，即即使大部分数据都能正常分出4段刻度，但仍有少部分数据实际分出的段数可能不止4段。如下面这样：

因此我们得出一个结论，echarts的splitNumber只是预估的分割段数。如果我们需要强制把刻度区间分为4段，则需要我们自己去写算法计算刻度。另外，即使段数正确的情况下，echarts自动计算出的刻度也可能存在区间过大，数据差异不明显的情况，如下面的图片，因为刻度区间太大，导致各个数据看起来像是差不多大的，看不出差异：

另外，echarts自动计算出的刻度也有一些其他的问题，例如当图表在柱状图和堆叠图中切换时，堆叠图可能出现刻度溢出问题。不过堆叠图的刻度计算这里就先不说明了，下面开始正文吧。

算法描述

刻度计算的算法之前我之前也写了一版，解决了分割段数的问题，但是仍无法解决刻度区间过大的问题。之前那一版算法的主要思想是取近似值，分别取最大值和最小值的最小近似整值得到刻度，虽然不是最优的算法，但是在构思和调整算法的时候我也学到了不少东西，而这一版的算法是在我们技术老大的点拨下结合网上的一些文章和项目的需求而写出来的，算法如下：

要求：根据一组数的最大值、最小值来确定刻度值，确定刻度的最大值maxi、最小值mini和刻度间隔interval。当出现异号数据时可选择正负两边刻度是否需要对称，当存在异号数据时要求其中一条刻度分割线必须在0刻度上，可以选择是否允许段数误差。

确定分割段数splitNumber和魔数数组magic = [10,15,20,25,30,40,50,60,70,80,90,100];
从目标数组arr中算出最大值max和最小值min，确定初始间隔大小 tempGap = (max-min)/splitNumber;
设tempGap除以一个倍数multiple后，刚好处于魔数数组的区间[10,100]中，记录倍数multiple;
从魔数数组中取出第一个大于tempGap缩放值的魔数，用魔数*multiple当做理想刻度间隔(estep)进行第一次计算，计算出max和min的邻近刻度maxi和mini，如果允许分割段数误差，则直接结束运算，取interval=estep;
当刻度需要正负两边对称且存在异号数据时，取maxi和mini中绝对值大的一方，将其相反数赋值给另外一方，计算interval=(maxi-mini)/splitNumber，结束运算;
当正负刻度不需要对称或不存在异号数据时，判断实际分割段数是否等于splitNumber，如果不相等，则重新取较大的魔数进行运算，当魔数取完或者分割段数相等时结束运算，得出interval=(maxi-mini)/splitNumber.

上代码

算法采用javascript语言描述，因为图表的绘制在前端完成。

/*
	刻度计算算法，基于魔术数组 [10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100];
	解释：魔数数组是理想间隔数组，即我们希望每个刻度的间隔都是魔数数组中某个数的整数倍。（准确的来说是整10倍）
*/
//新增，解决js的浮点数存在精度问题，在计算出最后结果时可以四舍五入一次，因为刻度太小也没有意义，所以这里忽略设置精度为8位
function fixedNum(num){
	if((""+num).indexOf('.')>=0) num = parseFloat(num.toFixed(8));
	return num;
}
//1.初始化
var symmetrical = false;//是否要求正负刻度对称。默认为false，需要时请设置为true
var deviation = false;//是否允许误差，即实际分出的段数不等于splitNumber
var magic = [10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100];//魔数数组经过扩充，放宽魔数限制避免出现取不到魔数的情况。
var arr = [1230, 320, 20, 304, 102, 234];//测试数据
var max,min,splitNumber;
splitNum