echart實現圖例legend綁定數據

echart爲我們提供了簡單的實現圖例的接口，同時還可以進行許多動畫操作，但是因爲echart將圖例封裝的太好，導致我們不能進行想要的許多操作，比如數據綁定，實現：

圖例：數據

原因

圖例legend傳入series的name，不能傳入其他參數。

多數系列會取自 series.name 或者 series.encode 的 seriesName 所指定的維度。如 餅圖 and 漏斗圖 等會取自 series.data 中的 name。

解決

將要顯示的圖例名稱與綁定的數據拼接成一個字符串，用數組形式顯示在series.name處。

var stationData = [];
//省略爲stationData傳值代碼
var legendData = [];
for (var i = 0; i < this.stationData.length; i++) {
     var station = {
        name:this.stationData[i].name +
            "    " +
            this.stationData[i].coords.length,
        icon: this.stationData[i].symbol
      };
      legendData.push(station);
}
//省略其他代碼
for(var i = 0; i < legendData.length; i++){
    series.push({
        type: "lines",
        name: legendData[i].name
        //省略其他代碼
    });
}

如上可以實現多個圖例與數據綁定顯示的效果。
樣例

圖例一 5個
圖例二 6個
圖例三 20個