ECharts基礎概念概覽
# ECharts基礎概念概覽
本文將介紹ECharts最基本的名字和概念。
# 1. ECharts實體
一個網頁中可以建立多個 echarts 實體。每個 echarts 實體 中可以建立多個圖表和座標系等等（用 option 來描述）。準備一個 DOM 節點（作為 echarts 的渲染容器），就可以在上面建立一個 echarts 實體。每個 echarts 實體獨佔一個 DOM 節點。
# 2. 系列(series)
系列（series）是很常見的名詞。在 echarts 里，系列（series）是指：一組數值以及他們對映成的圖。「系列」這個詞原本可能來源於「一系列的數據」，而在 echarts 中取其擴充套件的概念，不僅表示數據，也表示數據對映成為的圖。所以，一個 系列 包含的要素至少有：一組數值、圖表型別（series.type）、以及其他的關於這些數據如何對映成圖的參數。
echarts 里系列型別（series.type）就是圖表型別。系列型別（series.type）至少有：line（折線圖）、bar（柱狀圖）、pie（餅圖）、scatter（散點圖）、graph（關係圖）、tree（樹圖）、...
如下圖，右側的 option 中聲明了三個 系列（series）：pie（餅圖系列）、line（折線圖系列）、bar（柱狀圖系列），每個系列中有他所需要的數據（series.data）。
類同地，下圖中是另一種配置方式，系列的數據從 dataset 中取：
# 3. 元件（component）
在系列之上，echarts 中各種內容，被抽像為「元件」。例如，echarts 中至少有這些元件：xAxis（直角座標系 X 軸）、yAxis（直角座標系 Y 軸）、grid（直角座標系底板）、angleAxis（極座標系角度軸）、radiusAxis（極座標系半徑軸）、polar（極座標系底板）、geo（地理座標系）、dataZoom（數據區縮放元件）、visualMap（視覺對映元件）、tooltip（提示框元件）、toolbox（工具欄元件）、series（系列）、...
我們注意到，其實系列（series）也是一種元件，可以理解為：系列是專門繪製「圖」的元件。
如下圖，右側的 option 中聲明了各個元件（包括系列），各個元件就出現在圖中。
註：因為系列是一種特殊的元件，所以有時候也會出現 「元件和系列」 這樣的描述，這種語境下的 「元件」 是指：除了 「系列」 以外的其他元件。
# 4. 用 option 描述圖表
上面已經出現了 option 這個概念。echarts 的使用者，使用 option 來描述其對圖表的各種需求，包括：有什麼數據、要畫什麼圖表、圖表長什麼樣子、含有什麼元件、元件能操作什麼事情等等。簡而言之，option 表述了：數據、數據如何對映成圖形、互動行為。
// 建立 echarts 實體。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);
// 用 option 描述 `數據`、`數據如何對映成圖形`、`互動行為` 等。
// option 是個大的 JavaScript 對象。
var option = {
// option 每個屬性是一類元件。
legend: {...},
grid: {...},
tooltip: {...},
toolbox: {...},
dataZoom: {...},
visualMap: {...},
// 如果有多個同類元件，那麼就是個陣列。例如這裡有三個 X 軸。
xAxis: [
// 陣列每項表示一個元件實體，用 type 描述「子型別」。
{type: 'category', ...},
{type: 'category', ...},
{type: 'value', ...}
],
yAxis: [{...}, {...}],
// 這裡有多個系列，也是構成一個陣列。
series: [
// 每個系列，也有 type 描述「子型別」，即「圖表型別」。
{type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
{type: 'line', data: [2231, 1234, 552, ... ]},
{type: 'line', data: [[4, 51], [8, 12], ... ]}
}]
};
// 呼叫 setOption 將 option 輸入 echarts，然後 echarts 渲染圖表。
chart.setOption(option);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
系列裡的 series.data 是本系列的數據。而另一種描述方式，系列數據從 dataset 中取：
var option = {
dataset: {
source: [
[121, 'XX', 442, 43.11],
[663, 'ZZ', 311, 91.14],
[913, 'ZZ', 312, 92.12],
...
]
},
xAxis: {},
yAxis: {},
series: [
// 數據從 dataset 中取，encode 中的數值是 dataset.source 的維度 index （即第幾列）
{type: 'bar', encode: {x: 1, y: 0}},
{type: 'bar', encode: {x: 1, y: 2}},
{type: 'scatter', encode: {x: 1, y: 3}},
...
]
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 5. 元件的定位
不同的元件、系列，常有不同的定位方式。
- 類 CSS 的絕對定位
多陣列件和系列，都能夠基於 top / right / down / left / width / height 絕對定位。
這種絕對定位的方式，類似於 CSS 的絕對定位（position: absolute）。絕對定位基於的是 echarts 容器 DOM 節點。
其中，他們每個值都可以是：
- 絕對數值（例如
bottom: 54表示：距離 echarts 容器底邊界54畫素）。 - 或者基於 echarts 容器高寬的百分比（例如
right: '20%'表示：距離 echarts 容器右邊界的距離是 echarts 容器寬度的20%）。
如下圖的例子，對 grid 元件（也就是直角座標系的底板）設定 left、right、height、bottom 達到的效果。
我們可以注意到，left right width 是一組（橫向）、top bottom height 是另一組（縱向）。這兩組沒有什麼關聯。每組中，至多設定兩項就可以了，第三項會被自動算出。例如，設定了 left 和 right 就可以了，width 會被自動算出。
- 中心半徑定位
少數圓形的元件或系列，可以使用「中心半徑定位」，例如，pie（餅圖）、sunburst（旭日圖）、polar（極座標系）。
中心半徑定位，往往依據 center（中心）、radius（半徑）來決定位置。
- 其他定位
少陣列件和系列可能有自己的特殊的定位方式。在他們的文件中會有說明。
# 6. 座標系
很多系列，例如 line（折線圖）、bar（柱狀圖）、scatter（散點圖）、heatmap（熱力圖）等等，需要運行在 「座標系」 上。座標系用於佈局這些圖，以及顯示數據的刻度等等。例如 echarts 中至少支援這些座標系：直角座標系、極座標系、地理座標系（GEO）、單軸座標系、日曆座標系 等。其他一些系列，例如 pie（餅圖）、tree（樹圖）等等，並不依賴座標系，能獨立存在。還有一些圖，例如 graph（關係圖）等，既能獨立存在，也能佈局在座標系中，依據使用者的設定而來。
一個座標系，可能由多個元件協作而成。我們以最常見的直角座標系來舉例。直角座標系中，包括有 xAxis（直角座標系 X 軸）、yAxis（直角座標系 Y 軸）、grid（直角座標系底板）三種元件。xAxis、yAxis 被 grid 自動引用並組織起來，共同工作。
我們來看下圖，這是最簡單的使用直角座標系的方式：只聲明了 xAxis、yAxis 和一個 scatter（散點圖系列），echarts 暗自為他們建立了 grid 並關聯起他們：
再來看下圖，兩個 yAxis，共享了一個 xAxis。兩個 series，也共享了這個 xAxis，但是分別使用不同的 yAxis，使用 yAxisIndex 來指定它自己使用的是哪個 yAxis：
再來看下圖，一個 echarts 實體中，有多個 grid，每個 grid 分別有 xAxis、yAxis，他們使用 xAxisIndex、yAxisIndex、gridIndex 來指定引用關係：
另外，一個系列，往往能運行在不同的座標系中。例如，一個 scatter（散點圖）能運行在 直角座標系、極座標系 、地理座標系（GEO） 等各種座標系中。同樣，一個座標系，也能承載不同的系列，如上面出現的各種例子，直角座標系 里承載了 line（折線圖）、bar（柱狀圖）等等。