在做可视化数据展示的时候经常遇到多条折线数据显示到一个坐标系中，每条折线的纵轴跨度各不相同的情形，比如有的折线范围是0-100，有的是1000-10000，这样若是共用一个y轴将出现下面的情况：

image.png

可以看到蓝色的线被按在地上摩擦，这显然是不合理的。这还只是两条线，那6条、10条呢。

请看到最后，结尾有彩蛋哦。

一、6条以下的折线可以这样，个人非常推荐：

image.png

这里的数据都是我随机生成的，看起来趋势比较乱，见谅。对应的y轴可以用颜色区分，注意：这里没有显示y轴的splitLine。

代码如下，注意：我这个案例只考虑了最大4条线的情况

ChartBase.vue代码如下：

二、需要显示横向分割线的解决办法

这种情况必须对左右的y轴设置max，min和interval,强制分割左右坐标轴为相同的份数，这里也是最麻烦的地方。

image.png

这里贴下大概的代码，也许不是最好的的实现方案（这个是之前同事想出来的，我后面也一直采纳的这种方法），但是可以给没有头绪的小伙伴借鉴的思路，想了半天不知道怎么文字描述这个原理，小伙伴们感兴趣的自己理解吧。

调用后的返回值是这样：

image.png

image.png

这种情况就不用显示y轴了，显示了也没意义，y轴刻度不一样，这种情况的重点应该只是每条线的趋势。

这个还能这样玩：

3.gif

加上定时任务且有两个x轴:

4.gif

这个效果实现起来有点麻烦，是基于echarts的dataZoom封装的，dataZoom可对y方向进行缩放，下面两种任选其一都可实现对y方向的缩放。这个效果看起来简单，但是真正实现的话里面有亿点点细节需要考虑，才知道有多少坑要踩。。。篇幅有限，小伙伴有兴趣的话后面再讲。

image.png

若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/0dce0b877b7c，转载请注明出处，谢谢。