echarts折线图设置Y轴的boundaryGap,使折线尽可能地在Y轴居中

echarts折线图设置Y轴的boundaryGap,使折线尽可能地在Y轴居中_第1张图片
1.如上图,没有设置boundaryGap时折线会在Y轴偏上位置,此时一般设置Y轴boundaryGap在最大值的延伸范围为1,这时折线会居中。
但是当我们并不确定折线使用的数据时,就无法直接确定boundaryGap的值来实现居中。
此时,就需要去计算boundaryGap的值:
echarts折线图设置Y轴的boundaryGap,使折线尽可能地在Y轴居中_第2张图片
2.根据上图,要使折线上下居中,就需要:

(b + 1)* max - max = min - 0

得到

b = min / max

3.此时我们在实际情况中求boundaryGap:

b = Math.min(...yAxisDataArr) / Math.max(...yAxisDataArr);

再使用boundaryGap:

boundaryGap: [0, b]

4.查看效果:
echarts折线图设置Y轴的boundaryGap,使折线尽可能地在Y轴居中_第3张图片
可以看到已经比之前好很多了,但这种方法只适用于折线在Y轴整体偏上的情况,如果折线是整体偏下的,那这种方法就没什么用了。

你可能感兴趣的:(echarts,echarts,前端,javascript)