Echarts 多折线图

[TOC]

Echarts 多折线图

开发报表的时候有一个需求,需要在图表中动态显示多个折线图。

坑一

当时为了省事，不想写循环，直接把series的格式给了后台，让后台处理，前台就直接显示。这样减少了前台的工作量，但是给后续调试带来了诸多不便，无法直观的看到echarts的代码，如果要给series的每一个对象添加不同的属性，就不能找后台处理，还是需要前台写循环！

Tips:
> 不要为了省事，把前台的东西交给后台来处理！！！

坑二

看了UI的设计图，随便找了一个折线图堆叠的实例，没有考虑到折线图加了堆叠的属性后，图线是不会交叉的

错误图示：

当时数据量少，没发现这个问题，后来数据多了明显感觉不对（这里感谢后台及时发现这个严重bug）。

改的时候找了半天问题，最后才发现是加了stack这个堆叠属性。

正确图示：

坑三

开发的时候考虑到图表需要自适应，所以用了resize这个echarts自带的方法。

后来在调试其他页面同时改变了浏览器窗口大小的时候，发现谷歌控制台报Cannot read property 'resize' of undefined at window.onresize，
这时才想起来页面实例销毁的时候需要移除监听。

方法一：

window.removeEventListener这个方法适用于页面上有多个图表，且有多个echarts实例。使用该方法时需要手动移除监听。

而我们大多数报表页面上只有一个图表，这个时候我们就有另外一种写法

方法二：

window.onresize=myChart.resize;
这种写法就不需要手动销毁监听事件了！

如图：

坑四

当查询条件更改后,后台返回的数据是正确的,但是再次使用setOption设置数据后,上次的数据遗留影响了数据的显示

错误图示:

在API中找到了clear方法，用于清空当前实例
官网中解释如下：

所以在给图表重新赋值之前需要加上this.chartbar.clear();,用于清空实例!

修改后代码为:

正确图示:

• 分享知识，共享智慧！知识，因分享，传承久远！