Echarts Legend 圖標改變

最近有需求，看了一下Echarts的關係網絡圖能夠實現，可是圖出來後發現圖例的圖標顯示的都同樣，看了文檔後，以爲不符合個人要求，就改了下代碼，最終的chart以下（每一類一種圖標）：

改動以下：  

    legend.js 裏面_buildItem方法裏

itemType = data[i].icon || this._getSomethingByName(itemName).type;

   這是獲取圖例的圖標類型的，能夠看下

/**
 * 根據名稱返回series數據或data
 */
_getSomethingByName: function (name) {
    var series = this.option.series;
    var data;
    for (var i = 0, l = series.length; i < l; i++) {
        if (series[i].name === name) {
            // 系列名稱優先
            return {
                type: series[i].type,
                series: series[i],
                seriesIndex: i,
                data: null,
                dataIndex: -1
            };
        }

        if (
            series[i].type === ecConfig.CHART_TYPE_PIE 
            || series[i].type === ecConfig.CHART_TYPE_RADAR
            || series[i].type === ecConfig.CHART_TYPE_CHORD
            || series[i].type === ecConfig.CHART_TYPE_FORCE
            || series[i].type === ecConfig.CHART_TYPE_FUNNEL
            || series[i].type === ecConfig.CHART_TYPE_TREEMAP
        ) {
            data = series[i].categories || series[i].data || series[i].nodes;

            for (var j = 0, k = data.length; j < k; j++) {
                if (data[j].name === name) {
                    return {
                        type: series[i].type,
                        series: series[i],
                        seriesIndex: i,
                        data: data[j],
                        dataIndex: j
                    };
                }
            }
        }
    }
    return {
        type: 'bar',
        series: null,
        seriesIndex: -1,
        data: null,
        dataIndex: -1
    };
},

   能夠看出，獲取圖標type，先從series裏面獲取（首先series的type在上面這幾個類型中），獲取不到默認就是bar，可是force只有一個series，因此圖例全部圖標都是force類型的。

    看到這，就知道怎麼改了，我本身定義了一個方法（_genLegendTypeByName）從category裏面獲取，每一個category是個對象，裏面定義name和type屬性（我在後臺封裝好了），改動以後代碼以下：

itemType = data[i].icon || this._getLegendTypeByName(itemName).type;
if(!itemType || itemType == '') {
    itemType = data[i].icon || this._getSomethingByName(itemName).type;
}

 這樣若是category裏面沒有定義話，還使用_getSomethingByName方法獲取，不會出錯，獲取到type以後，還有個問題

// 圖形
itemShape = this._getItemShapeByType(
    lastX, lastY,
    itemWidth, itemHeight,
    (this._selectedMap[itemName] && this._hasDataMap[itemName] ? color : '#ccc'),
    itemType,
    color
);

這裏獲根據以前得到的type封裝shape對象

_getItemShapeByType: function (x, y, width, height, color, itemType, defaultColor) {
    var highlightColor = color === '#ccc' ? defaultColor : color;
    var itemShape = {
        zlevel: this.getZlevelBase(),
        z: this.getZBase(),
        style: {
            iconType: 'legendicon' + itemType ,
            x: x,
            y: y,
            width: width,
            height: height,
            color: color,
            strokeColor: color,
            lineWidth: 2
        },
        highlightStyle: {
            color: highlightColor,
            strokeColor: highlightColor,
            lineWidth: 1
        },
        hoverable: this.legendOption.selectedMode,
        clickable: this.legendOption.selectedMode
    };

   上面這個方法圖標的類型已經變成了'legendicon'+type，最終生成圖標的方法在icon.js裏面

/**
         * 建立矩形路徑
         * @param {Context2D} ctx Canvas 2D上下文
         * @param {Object} style 樣式
         */
        buildPath : function (ctx, style, refreshNextFrame) {
            if (this.iconLibrary[style.iconType]) {
                this.iconLibrary[style.iconType].call(this, ctx, style, refreshNextFrame);
            }
            else {
                ctx.moveTo(style.x, style.y);
                ctx.lineTo(style.x + style.width, style.y);
                ctx.lineTo(style.x + style.width, style.y + style.height);
                ctx.lineTo(style.x, style.y + style.height);
                ctx.lineTo(style.x, style.y);
                ctx.closePath();
            }
            return;
        },

  可是這裏iconLibrary內容以下：

 

  看到沒有，legendicon開頭的就那麼幾種，因此你要想用triangle這些，就把_getItemShapeByType裏面iconType改下就能夠了