ECharts象形柱圖

2018-12-11 09:37 更新

象形柱圖在 ECharts 系列中使用series[i]-pictorialBar表示,它利用圖片和形狀表現(xiàn)數(shù)據(jù),具體來說它既可以用圖形的長寬變形表現(xiàn)數(shù)據(jù),也可以用圖形的個數(shù)、甚至是圖形的顏色、透明度變化表現(xiàn)數(shù)據(jù)。

象形柱圖是可以設(shè)置各種具象圖形元素(如圖片、SVG PathData 等)的柱狀圖。往往用在信息圖中。用于有至少一個類目軸或時間軸的直角坐標系上。

在下面的這個例子中,右邊的兩座山分別是一個圖片,而最左側(cè)的紙是由多個圖片堆加成的,象形柱圖會根據(jù)它們所在系列對應(yīng)的數(shù)值,決定其高度。配合動畫效果,能夠?qū)崿F(xiàn)很好的視覺效果,效果圖如下,您可以點擊圖片下方的鏈接來編輯該實例:

ECharts象形柱圖

點擊編輯實例 》》

象形柱圖布局

象形柱圖可以被想象為:它首先是個柱狀圖,但是柱狀圖的柱子并不顯示。這些柱子我們稱為『基準柱(reference bar)』,根據(jù)基準柱來定位和顯示各種象形圖形(包括圖片)。

每個象形圖形根據(jù)基準柱的定位,是通過 symbolPosition、symbolOffset 來調(diào)整其于基準柱的相對位置。

參見例子:

ECharts象形柱圖

點擊編輯實例 》》

可以使用 symbolSize 調(diào)整大小,從而形成各種視圖效果。

參見例子:

ECharts象形柱圖

點擊編輯實例 》》

象形圖形類型

每個圖形可以配置成『單獨』和『重復(fù)』兩種類型,即通過 symbolRepeat 來設(shè)置。

  • 設(shè)置為 false(默認),則一個圖形來代表一個數(shù)據(jù)項。
  • 設(shè)置為 true,則一組重復(fù)的圖形來代表一個數(shù)據(jù)項。

參見例子:

ECharts象形柱圖

點擊編輯實例 》》

每個象形圖形可以是基本圖形(如 'circle', 'rect', ...)、SVG PathData、圖片,參見:symbolType。

參見例子:

ECharts象形柱圖

點擊編輯實例 》》

可以使用 symbolClip 對圖形進行剪裁。

參見例子:

ECharts象形柱圖

點擊編輯實例 》》

象形柱圖使用實例

圣誕節(jié)快到了,您可以使用象形柱圖方便地實現(xiàn)以下這個馴鹿和交通方式的速度對比圖。下圖包含兩個系列,一個是顯示在上方的交通方式矢量圖標,象形柱圖默認會將每個圖標放在對應(yīng)值所在位置的下方,通過 symbolSize 指定圖標大??;另一個系列是顯示在圖標下方的山峰,在不指定 symbolSize 的情況下,將填充滿所在的“柱子”,因而就有了圖示效果:

ECharts象形柱圖

點擊編輯實例 》》

除此之外,象形柱圖還可以用同一圖形的個數(shù)表現(xiàn)數(shù)值,實現(xiàn)類似 ECharts 圣誕活動頁中一群小精靈的效果。因而象形柱圖可以很大程度上滿足信息圖的制圖需求:

ECharts象形柱圖

點擊編輯實例 》》

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號