Echarts 折线图实现 yAxis max min 动态计算留白空间

265 阅读1分钟

问题

  • 在设置markPoint后 max 和 min 显示额外的标签,但是max和min值的设置需要增加留白空间 避免markPoint被覆盖

  • yAxis设置max和min 如果不动态增加留白空间 那么markPoint就会被覆盖

  • max 和 min * 0.1,增加百分之10的留白空间展示markPoint 这样在值特别大的和特别小的时候间隔会不稳定。

  • 怎么能兼容所有值(正数/负数)完美实现图表上下留白指定px距离?

image.png

解决方案

  • 需要计算从min~max之间的数值是多少,在获取图表折线部分的高度px,计算出1个数值占图表高度的多少px,从而计算出yAxis max和min需要增加/减少 指定留白空间数值。

  • 话不多说上代码

carbon.png

  • 不管数值如何min和max都完美撑满图表
  • 效果图

image.png

image.png