echarts中存在负数数据实现双Y轴对齐
最近写项目中遇到了一个问题, 一些数据需要双Y轴来显示, 但是发现有一部分对应左侧Y轴的数据有负数, 而右侧Y轴的数据没有负数 , 从而导致了两个Y轴的X轴不在一个水平线上,0轴无法对齐的问题,查阅了许多文章资料说设置双Y轴的max, min 属性,可以实现对齐效果。
- 但是问题来了,我要怎么设置呢?
双Y轴设置代码块
yaxis: [
{
type: 'value',
max: value => console.log(value), // {min: , max: ,} echarts帮你自动计算好了最大,最小值
min: value => console.log(value)
},
{
type: 'value'
max: value => console.log(value), // 此处的最大值 最小值与上面的最大值最小值并不相同
min: value => console.log(value)
}
]
-从console.log()打印的结果来看 (数据不同举个栗子)左侧的是{max: 1000, min: -500}右侧的数据是{max: 50, min: 0}, 想想来看好像没有什么关系,在仔细想想右侧的最小为0,左侧为-500,能对齐才是怪事,比例也不一致啊 起码要有A1/A2= B1/B2才可能对齐啊,有了思路就去实现呗
实现配置
let max = 1;
let min = 1;
....
const option = {
...
yaxis: [
{
type: 'value',
max: value => {
max = value.max;
return (value.max * 1.5).toFixed(0); // 乘的目的是不想让图表顶到最顶部
},
min: value => {
min = value.min;
return (value.min * 1.5).toFixed(0);
},
},
{
type: 'value'
max: value => (value.max * 1.5).toFixed(0),
min: value => (((value.max * min) /max) * 1.5).toFixed(0),// 通过计算比例来从新设置最小值来保持比例一致 可以实现对齐
}
]
}
哈哈因为计算的时候总会出现小数。用toFixed()来去除了小数点, 有可能导致了比例不相等的情况,出现0轴稍微偏移的情况, 或者某一侧动态数据全部为0 的情况 , 导致偏移或者报错,所以需要做些判断,如果你有更好的其它解决方案,或者保持计算比例的方式,请告诉我一下, 谢谢!