Wonderjar's Blog

Echart技巧

2018-12-20

双y轴对齐

splitNumber这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
所以就算两个y轴的splitNumber相等也可能分段不一致。

后来我发现第一个y轴的splitNumber总是没有问题,所以动态计算第二个y轴的interval

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 显示最大值为20的倍数,总是分为四段

maxVal = Math.max(...values)
axisMaxVal = Math.floor(maxVal / 20 + 1) * 20

{
yAxis:[
{...},
{
min: 0,
max: axisMaxVal,
interval: axisMaxVal / 5
}
]
}