ECharts官方教程十二自定義系列

自定義系列（custom series），是一種系列的型別。它把繪製圖形元素這一步留給開發者去做，從而開發者能在座標系中自由繪製出自己需要的圖表。

echarts 為什麼會要支援自定義系列呢？echarts 內建支援的圖表型別是最常見的圖表型別，但是圖表型別是難於窮舉的，有很多小眾的需求 echarts 並不能內建的支援。那麼就需要提供一種方式來讓開發者自己擴充套件。另一方面，所提供的擴充套件方式要盡可能得簡單，例如圖形元素建立和釋放、過渡動畫、tooltip、資料區域縮放（datazoom）、視覺對映（visualmap）等功能，盡量在 echarts 中內建得處理，使開發者不必糾結於這些細節。綜上考慮形成了自定義系列（custom series）。

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

下面來介紹開發者怎麼使用自定義系列（custom series）。

開發者自定義的圖形元素渲染邏輯，是通過書寫 renderitem 函式實現的，例如：

var option = ,
data: data
}]}

在渲染階段，對於 series.data 中的每個資料項（為方便描述，這裡稱為 dataitem)，會呼叫此 renderitem 函式。這個 renderitem 函式的職責，就是返回乙個（或者一組）圖形元素定義，圖形元素定義中包括圖形元素的型別、位置、尺寸、樣式等。echarts 會根據這些圖形元素定義來渲染出圖形元素。如下的示意：

var option = , ),
// 用 api.style(...) 得到預設的樣式設定。這個樣式設定包含了
// option 中 itemstyle 的配置和視覺對映得到的顏色。
style: api.style()
};},
data: [
[12, 44, 55, 60], // 這是第乙個 dataitem
[53, 31, 21, 56], // 這是第二個 dataitem
[71, 33, 10, 20], // 這是第三個 dataitem
...]
}]}

renderitem 函式提供了兩個引數：

params：包含了當前資料資訊（如 seriesindex、dataindex 等等）和座標系的資訊（如座標系包圍盒的位置和尺寸）。

api：是一些開發者可呼叫的方法集合（如 api.value()、api.coord()）。

renderitem 函式須返回根據此 dataitem 繪製出的圖形元素的定義資訊，參見 renderitem.return。

一般來說，renderitem 函式的主要邏輯，是將 dataitem 裡的值對映到座標系上的圖形元素。這一般需要用到 renderitem.arguments.api 中的兩個函式：

api.value(...)，意思是取出 dataitem 中的數值。例如 api.value(0) 表示取出當前 dataitem 中第乙個維度的數值。
api.coord(...)，意思是進行座標轉換計算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataitem 中的數值轉換成座標系上的點。

有時候還需要用到 api.size(…) 函式，表示得到座標系上一段數值範圍對應的長度。

返回值中樣式的設定可以使用 api.style(…) 函式，他能得到 series.itemstyle.normal 中定義的樣式資訊，以及視覺對映的樣式資訊。也可以用這種方式覆蓋這些樣式資訊：api.style()。

書寫完 renderitem 方法後，自定義系列的 90% 工作就做完了。剩下的是一些精化工作。

在直角座標系（grid）、極座標系（polar）中都有座標軸。座標軸的刻度範圍需要自適應當前顯示出的資料的範圍，否則繪製出的圖形會超出去。所以，例如，在直角座標系（grid）中，使用自定義系列的開發者，需要設定，data 中的哪些維度會對應到 x 軸上，哪些維度會對應到 y 軸上。這件事通過 encode 來設定。例如：

option = ,
encode: ,
data: [
// 維度0 維度1 維度2 維度3
[ 12, 44, 55, 60 ], // 這是第乙個 dataitem
[ 53, 31, 21, 56 ], // 這是第二個 dataitem
[ 71, 33, 10, 20 ], // 這是第三個 dataitem
...]
}]};

當然，使用 tooltip.formatter 可以任意定製 tooltip 中的內容。但是還有更簡單的方法，通過encode 和 dimensions 來設定：

option = ,
encode: ,
// 表示給『維度2』和『維度3』分別取名為『年齡』和『滿意度』，顯示到 tooltip 中。
dimensions: [null, null, '年齡', '滿意度'],
data: [
// 維度0 維度1 維度2 維度3
[ 12, 44, 55, 60 ], // 這是第乙個 dataitem
[ 53, 31, 21, 56 ], // 這是第二個 dataitem
[ 71, 33, 10, 20 ], // 這是第三個 dataitem
...]
}]};

（1）與 datazoom 結合使用的時候，常常使用會設定 datazoom.filtermode 為『weakfilter』。這個設定的意思是：當dataitem部分超出座標系邊界的時候，dataitem不會整體被過濾掉。例如：

option = ,
series: [,
encode: ,
data: [
// 維度0 維度1 維度2 維度3
[ 12, 44, 55, 60 ], // 這是第乙個 dataitem
[ 53, 31, 21, 56 ], // 這是第二個 dataitem
[ 71, 33, 10, 20 ], // 這是第三個 dataitem
...]
}]};

在這個例子中，『維度1』和『維度2』對應到 x 軸，datazoom元件控制 x 軸的縮放。假如在縮放的過程中，某個dataitem的『維度1』超出了 x 軸的範圍，『維度2』還在 x 軸的範圍中，那麼只要設定datazoom.filtermode = 'weakfilter'，這個dataitem就不會被過濾掉，從而還能夠使用renderitem繪製圖形（可以使用上面提到過的echarts.graphic.cliprectbyrect把圖形繪製成被座標系剪裁過的樣子）。參見上面提到過的例子：profile

（2）另外，開發者如果使用到的話應注意，renderitem.arguments.params中的dataindex和dataindexinside是有區別的：

dataindex 指的 dataitem 在原始資料中的 index。

dataindexinside 指的是 dataitem 在當前資料視窗（參見 datazoom）中的 index。

renderitem.arguments.api中使用的引數都是dataindexinside而非dataindex，因為從dataindex轉換成dataindexinside需要時間開銷。

ECharts官方教程十二自定義系列

ECharts官方教程八資料的視覺對映

I學霸官方免費教程十二 Java基礎之內部類

NeHe OpenGL教程（十二）

ECharts官方教程 十二 自定義系列

ECharts官方教程 八 資料的視覺對映

I學霸官方免費教程十二 Java基礎之內部類

NeHe OpenGL教程 （十二）

相關推薦

ECharts官方教程十二自定義系列

ECharts官方教程八資料的視覺對映

NeHe OpenGL教程（十二）