最近專案中，接到這樣一個需求：專案使用echarts外掛繪製表格，圖例（下圖中被圈出部分），要實現，點選小圖示顯示或者隱藏對應的折線，點選文字跳轉到相應的頁面。

用過echarts的同學都知道，echarts外掛的原生圖例（legend）的圖示和文字是一個整體，無法響應不同的事件。為了驗證這一點，我特意查看了echarts的原始碼：

echarts原始碼上寫的是，在圖例上面增加一個矩形區域，用來增大滑鼠的點選面積，也就相當於讓圖示和文字響應同一個事件。也就是這樣：

所以說，如果想用echarts原生的legend來實現上述需求，是沒法實現的（除非改動它的原始碼，這是一種很不好的辦法，因為echarts在工程專案中只是一個外掛，下次升級專案的時候，改動的程式碼就沒有了）。

接下來，想到是否可以自己實現一個legend，來和echarts互動的同時支援跳轉連結。要實現互動，就需要查閱echarts的api文件，我們需要的是顯示和隱藏折線的事件。

在官方文件中可看到這個事件：legendToggleSelect

只要點選自定義圖示的時候觸發這個事件就可以：

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

這是一個開關事件，觸發第一次是隱藏折線，然後是顯示折線。做到這一步，思路也就差不多了，就是自己寫自定義legend的樣式就行。跳轉連結很簡單。

同時要注意以下幾點：

1. 圖示的顏色要和折線對應起來（最後一張截圖就是我實現的效果），可以通過指定折線的顏色來實現，而不是提取折線的顏色
2. 圖示切換後要顯示成灰色（與官方一致）

歡迎大家交流。