首页 前端知识 关于在vue2中echarts折线图双Y轴刻度线对齐的问题

关于在vue2中echarts折线图双Y轴刻度线对齐的问题

2025-02-28 12:02:11 前端知识 前端哥 133 908 我要收藏

很多时候我们在渲染双Y轴的echarts折线图时,往往会出现这样的情况:

两边的刻度线对不齐,很影响美观,杂乱无章,在此我们将折线图稍作几个调整。

第一步:设置Y轴最大最小值,上下取整展示,使折线图起伏更加明显。

let maxY = Math.ceil(Math.max(...list) / 10) * 10;
let minY = Math.floor(Math.min(...list) / 10) * 10;
复制

第二步:我们根据在yAxis中设置splitNumber与interval,来固定刻度线条数与步长。

splitNumber: 5,
interval: (maxY - minY) / 5,
复制

最终效果:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/21976.html
标签
评论
还可以输入200
共0条数据,当前/页
会员中心 联系我 留言建议 回顶部
复制成功!