echarts中存在负数数据实现双Y轴对齐

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 的情况 , 导致偏移或者报错,所以需要做些判断,如果你有更好的其它解决方案,或者保持计算比例的方式,请告诉我一下, 谢谢!

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值