echarts坐标轴左右y轴统一间距

该博客介绍了如何在数据可视化中确保坐标轴等分,以优化图表的阅读体验。通过计算最大值并将其划分为5份,确保左边坐标轴的最大值与右边参考线对齐。具体做法是将数据的最大值向上取整,然后除以5得到等分间隔,设置坐标轴的最小值为0,最大值为此计算结果,以实现等间距的刻度显示。
摘要由CSDN通过智能技术生成

在这里插入图片描述
右边 0-100 可等分5份,要求左边的动态数据也等分5份展示,避免参考线不重合

算出左边坐标轴最大值

const lineData = [.....] // 左边坐标轴对应的所有数据值
const yNumMax = Math.ceil(Math.max.apply(Math, lineData) / 5) * 5; // 划为5份,向上取整再乘5,结果为刚好大于等于最大值的5的倍数

坐标轴加上最大最小值

yAxis: [
	{
		......
		min: 0,
        max: yNumMax,
        splitNumber: 5,
        interval: yNumMax / 5,
	},
	{.......}
]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值