Echarts自定义Legend按钮实现以及Demo

前段时间,一个朋友问能不能做出这样的Echarts图,大概是这样:

他有个需求,有4条线分别代表:缓存100时方案A的曲线,缓存200时方案A的曲线,缓存100时方案B的曲线,缓存200时方案B的曲线,按常规模式这个时候Echarts的Legend会有4个按钮(缓存100方案A,缓存200方案A,缓存100方案B,缓存200方案B),它们分别控制一条线,但是他不想这样,他想要这样的4个按钮:缓存100,缓存200,方案A,方案B,每个按钮可以关闭对应的两条线。相当于他想要的展示维度和Echarts不一样,他的展示效果在分类上更合理。

当时之前我也没有做过,我也不知道能不能实现,直到后面有一天突然看到Echarts3.0的API,发现Echarts是提供了Legend点击事件方法的!然后马上去翻看2.0的,结果发现在用户手册上方一点的位置也明确写了的,只是从来没有注意到罢了…(-_-|||),不仅如此,Echarts还提供了线条开关的API!

既然这样,那这个需求就有可能实现了,可以自定义4个Legend按钮,然后在自己写方法来控制曲线,于是,没过多久,就有了这篇文章,先看看DEMO。下面开始解释代码:

继续阅读