echarts实现图例的图标和文字响应不同的事件

最近项目中，接到这样一个需求：项目使用echarts插件绘制表格，图例（下图中被圈出部分），要实现，点击小图标显示或者隐藏对应的折线，点击文字跳转到相应的页面。



用过echarts的同学都知道，echarts插件的原生图例（legend）的图标和文字是一个整体，无法响应不同的事件。为了验证这一点，我特意查看了echarts的源码：



echarts源码上写的是，在图例上面增加一个矩形区域，用来增大鼠标的点击面积，也就相当于让图标和文字响应同一个事件。也就是这样：



所以说，如果想用echarts原生的legend来实现上述需求，是没法实现的（除非改动它的源码，这是一种很不好的办法，因为echarts在工程项目中只是一个插件，下次升级项目的时候，改动的代码就没有了）。

接下来，想到是否可以自己实现一个legend，来和echarts交互的同时支持跳转链接。要实现交互，就需要查阅echarts的api文档，我们需要的是显示和隐藏折线的事件。

在官方文档中可看到这个事件：legendToggleSelect

只要点击自定义图标的时候触发这个事件就可以：

$scope.mychart.dispatchAction(
{
type: 'legendToggleSelect',
name: item  //折线的名字
}
);

这是一个开关事件，触发第一次是隐藏折线，然后是显示折线。做到这一步，思路也就差不多了，就是自己写自定义legend的样式就行。跳转链接很简单。



同时要注意以下几点：

图标的颜色要和折线对应起来（最后一张截图就是我实现的效果），可以通过指定折线的颜色来实现，而不是提取折线的颜色

图标切换后要显示成灰色（与官方一致）

欢迎大家交流。