ECharts圖表自定義系列

series[i]-custom表示ECharts圖表的自定義系列，自定義系列也就是您能夠根據(jù)您自己的需要對ECharts圖表中的圖形元素自定義其渲染方式，這樣做可以幫助您擴展出不一樣的圖表。

同時，echarts 會統(tǒng)一管理圖形的創(chuàng)建刪除、動畫、與其他組件（如 dataZoom、visualMap）的聯(lián)動，使開發(fā)者不必糾結(jié)這些細節(jié)。

例如，下面的例子使用 custom series 擴展出了 x-range 圖：

點擊編輯實例 》》

更多的例子參見：custom examples

您可以參考：自定義系列教程

renderItem 方法

開發(fā)者自定義渲染邏輯（renderItem 函數(shù)），有關(guān) renderItem 函數(shù)的詳細內(nèi)容您可以參考下節(jié)內(nèi)容。

custom 系列需要開發(fā)者自己提供圖形渲染的邏輯。這個渲染邏輯一般命名為 renderItem。例如：

var option = {
    ...,
    series: [{
        type: 'custom',
        renderItem: function (params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;

            return {
                type: 'rect',
                shape: echarts.graphic.clipRectByRect({
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                }, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                }),
                style: api.style()
            };
        },
        data: data
    }]
}

對于 data 中的每個數(shù)據(jù)項（為方便描述，這里稱為 dataItem)，會調(diào)用此 renderItem 函數(shù)。

renderItem 函數(shù)提供了兩個參數(shù)：

• params：包含了當前數(shù)據(jù)信息和坐標系的信息。
• api：是一些開發(fā)者可調(diào)用的方法集合。

renderItem 函數(shù)須返回根據(jù)此 dataItem 繪制出的圖形元素的定義信息，參見 renderItem.return。

一般來說，renderItem 函數(shù)的主要邏輯，是將 dataItem 里的值映射到坐標系上的圖形元素。這一般需要用到 renderItem.arguments.api 中的兩個函數(shù)：

• api.value(...)，意思是取出 dataItem 中的數(shù)值。例如 api.value(0) 表示取出當前 dataItem 中第一個維度的數(shù)值。
• api.coord(...)，意思是進行坐標轉(zhuǎn)換計算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的數(shù)值轉(zhuǎn)換成坐標系上的點。

有時候還需要用到 api.size(...) 函數(shù)，表示得到坐標系上一段數(shù)值范圍對應(yīng)的長度。

返回值中樣式的設(shè)置可以使用 api.style(...) 函數(shù)，他能得到 series.itemStyle.normal 中定義的樣式信息，以及視覺映射的樣式信息。也可以用這種方式覆蓋這些樣式信息：api.style({fill: 'green', stroke: 'yellow'})。

維度的映射（encode 和 dimensions 屬性）

custom 系列往往需要定義 series.encode，主要用于指明 data 的哪些維度映射到哪些數(shù)軸上。從而，echarts 能根據(jù)這些維度的值的范圍，畫出合適的數(shù)軸刻度。 同時，encode.tooltip 和 encode.label 也可以被指定，指明默認的 tooltip 和 label 顯示什么內(nèi)容。series.dimensions 也可以被指定，指明顯示在 tooltip 中的維度名稱，或者維度的類型。

例如：

series: {
    type: 'custom',
    renderItem: function () {
        ...
    },
    encode: {
        x: [2, 4, 3],
        y: 1,
        label: 0,
        tooltip: [2, 4, 3]
    }
}

與 dataZoom 組件的結(jié)合

與 dataZoom 結(jié)合使用的時候，常常使用會設(shè)置 dataZoom.filterMode 為 'weakFilter'，從而讓 dataItem 部分超出坐標系邊界的時候，不會整體被過濾掉。

關(guān)于 dataIndex 和 dataIndexInside 的區(qū)別

• dataIndex 指的 dataItem 在原始數(shù)據(jù)中的 index。
• dataIndexInside 指的是 dataItem 在當前數(shù)據(jù)窗口（參見 dataZoom）中的 index。

renderItem.arguments.api 中使用的參數(shù)都是 dataIndexInside 而非 dataIndex，因為從 dataIndex 轉(zhuǎn)換成 dataIndexInside 需要時間開銷。