學(xué)習(xí)網(wǎng)站：https://echarts.apache.org/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88

一、實(shí)例

一個(gè)網(wǎng)頁中可以創(chuàng)建多個(gè) echarts 實(shí)例，每個(gè) echarts 實(shí)例 中可以創(chuàng)建多個(gè)圖表和坐標(biāo)系等等（用 option 來描述）。準(zhǔn)備一個(gè) DOM 節(jié)點(diǎn)（作為 echarts 的渲染容器），就可以在上面創(chuàng)建一個(gè) echarts 實(shí)例。每個(gè) echarts 實(shí)例獨(dú)占一個(gè) DOM 節(jié)點(diǎn)。如下圖所示。

二、系列（series）

系列是指：一組數(shù)值以及他們映射成的圖。一個(gè) 系列 包含的要素至少有：一組數(shù)值、圖表類型（series.type）、以及其他的關(guān)于這些數(shù)據(jù)如何映射成圖的參數(shù)，如下圖所示。

三、組件

在系列之上，echarts 中各種內(nèi)容，被抽象為“組件”，系列是專門繪制“圖”的組件。echarts 中各組件如下圖所示。

四、組件的定位

類似CSS的絕對(duì)定位：基于 top / right / down / left / width / height 進(jìn)行絕對(duì)定位，絕對(duì)定位基于的是 echarts 容器 DOM 節(jié)點(diǎn)。組件定位如下圖所示。

五、坐標(biāo)系

坐標(biāo)系用于布局這些圖，以及顯示數(shù)據(jù)的刻度等等，直角坐標(biāo)系中，包括有 xAxis（直角坐標(biāo)系 X 軸）、yAxis（直角坐標(biāo)系 Y 軸）、grid（直角坐標(biāo)系底板）三種組件，如下圖所示。

六、異步數(shù)據(jù)加載

在圖表初始化后不管任何時(shí)候只要通過 jQuery 等工具異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項(xiàng)就行。

七、loading動(dòng)畫

數(shù)據(jù)加載過程中，可調(diào)用showLoading方法顯示加載動(dòng)畫。

八、支持?jǐn)?shù)據(jù)的動(dòng)態(tài)更新

九、交互組件

圖里組件legend、數(shù)據(jù)區(qū)域縮放組件dataZoom、拖拽功能grahic組件等。

十、移動(dòng)端自適應(yīng)

針對(duì)一個(gè)圖表需要同時(shí)在PC、移動(dòng)端上展現(xiàn)的場(chǎng)景，ECharts 內(nèi)部組件具備隨著容器尺寸變化而變化的能力。

十一、數(shù)據(jù)的視覺映射

數(shù)據(jù)可視化是 數(shù)據(jù) 到 視覺元素 的映射過程（這個(gè)過程也可稱為視覺編碼，視覺元素也可稱為視覺通道）。ECharts 的每種圖表本身就內(nèi)置了這種映射過程（如折線圖把數(shù)據(jù)映射到“線”，柱狀圖把數(shù)據(jù)映射到“長(zhǎng)度”），此外，ECharts 還提供了 visualMap 組件來提供通用的視覺映射。

十二、ECharts 中的事件和行為

在 ECharts 的圖表中用戶的操作將會(huì)觸發(fā)相應(yīng)的事件，開發(fā)者可以監(jiān)聽這些事件，然后通過回調(diào)函數(shù)做相應(yīng)的處理，比如跳轉(zhuǎn)到一個(gè)地址，或者彈出對(duì)話框，或者做數(shù)據(jù)下鉆等等。

ECharts 中事件分為兩種類型，一種是用戶鼠標(biāo)操作點(diǎn)擊，另一種是使用可以交互的組件后觸發(fā)的行為事件（如切換圖例開關(guān)）。

十三、渲染器選擇

覽器端圖表庫大多會(huì)選擇 SVG 或者 Canvas 進(jìn)行渲染。

十四、三維可視化

ECharts GL為 ECharts 補(bǔ)充了豐富的三維可視化組件。