ECharts 簡介

ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。 ——ECharts 官網(wǎng)

現(xiàn)如今，數(shù)據(jù)的收集、存儲(chǔ)、分析成本越來越低，許多企業(yè)已將大數(shù)據(jù)視作企業(yè)發(fā)展的戰(zhàn)略資源，衍生出對(duì)數(shù)據(jù)可視化在功能層面、交互層面的巨大需求。ECharts 作為國內(nèi)目前影響力最大的可視化工具庫，一方面它內(nèi)置了豐富的2D、3D圖表，以及大量輔助交互組件，另一方面它提供了一套行之有效的圖形擴(kuò)展接口，方便開發(fā)者接入自定義圖表，很大程度上能夠覆蓋大多數(shù)可視化場景。

另外，ECharts 社區(qū)活躍，有豐富的中文文檔，學(xué)習(xí)曲線低；支持PC、移動(dòng)端、小程序等場景；能兼容市面上大多數(shù)瀏覽器等等。非常值得入手作為常備工具庫。

1. 特點(diǎn)

豐富的可視化類型

ECharts 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日?qǐng)D，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

除了已經(jīng)內(nèi)置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個(gè)_renderItem_函數(shù)，就可以從數(shù)據(jù)映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結(jié)合使用而不需要操心其它事情。

你可以在下載界面下載包含所有圖表的構(gòu)建文件，如果只是需要其中一兩個(gè)圖表，又嫌包含所有圖表的構(gòu)建文件太大，也可以在在線構(gòu)建中選擇需要的圖表類型后自定義構(gòu)建。

多種數(shù)據(jù)格式無需轉(zhuǎn)換直接使用

ECharts 內(nèi)置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數(shù)據(jù)源，通過簡單的設(shè)置 encode 屬性就可以完成從數(shù)據(jù)到圖形的映射，這種方式更符合可視化的直覺，省去了大部分場景下數(shù)據(jù)轉(zhuǎn)換的步驟，而且多個(gè)組件能夠共享一份數(shù)據(jù)而不用克隆。

為了配合大數(shù)據(jù)量的展現(xiàn)，ECharts 還支持輸入 TypedArray 格式的數(shù)據(jù)，TypedArray 在大數(shù)據(jù)量的存儲(chǔ)中可以占用更少的內(nèi)存，對(duì) GC 友好等特性也可以大幅度提升可視化應(yīng)用的性能。

千萬數(shù)據(jù)的前端展現(xiàn)

通過增量渲染技術(shù)（4.0+），配合各種細(xì)致的優(yōu)化，ECharts 能夠展現(xiàn)千萬級(jí)的數(shù)據(jù)量，并且在這個(gè)數(shù)據(jù)量級(jí)依然能夠進(jìn)行流暢的縮放平移等交互。

幾千萬的地理坐標(biāo)數(shù)據(jù)就算使用二進(jìn)制存儲(chǔ)也要占上百 MB 的空間。因此 ECharts 同時(shí)提供了對(duì)流加載（4.0+）的支持，你可以使用 WebSocket 或者對(duì)數(shù)據(jù)分塊后加載，加載多少渲染多少！不需要漫長地等待所有數(shù)據(jù)加載完再進(jìn)行繪制。

移動(dòng)端優(yōu)化

ECharts 針對(duì)移動(dòng)端交互做了細(xì)致的優(yōu)化，例如移動(dòng)端小屏上適于用手指在坐標(biāo)系中進(jìn)行縮放、平移。 PC 端也可以用鼠標(biāo)在圖中進(jìn)行縮放（用鼠標(biāo)滾輪）、平移等。

細(xì)粒度的模塊化和打包機(jī)制可以讓 ECharts 在移動(dòng)端也擁有很小的體積，可選的 SVG 渲染模塊讓移動(dòng)端的內(nèi)存占用不再捉襟見肘。

多渲染方案，跨平臺(tái)使用！

ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 可以兼容低版本 IE，SVG 使得移動(dòng)端不再為內(nèi)存擔(dān)憂，Canvas 可以輕松應(yīng)對(duì)大數(shù)據(jù)量和特效的展現(xiàn)。不同的渲染方式提供了更多選擇，使得 ECharts 在各種場景下都有更好的表現(xiàn)。

除了 PC 和移動(dòng)端的瀏覽器，ECharts 還能在 node 上配合 node-canvas 進(jìn)行高效的服務(wù)端渲染（SSR）。從 4.0 開始我們還和微信小程序的團(tuán)隊(duì)合作，提供了 ECharts 對(duì)小程序的適配！

社區(qū)熱心的貢獻(xiàn)者也為我們提供了豐富的其它語言擴(kuò)展，比如 Python 的 pyecharts，R 語言的 recharts, Julia 的 ECharts.jl 等等。

我們希望平臺(tái)和語言都不會(huì)成為大家使用 ECharts 實(shí)現(xiàn)可視化的限制！

深度的交互式數(shù)據(jù)探索

交互是從數(shù)據(jù)中發(fā)掘信息的重要手段?！翱傆[為先，縮放過濾按需查看細(xì)節(jié)”是數(shù)據(jù)可視化交互的基本需求。

ECharts 一直在_交互_的路上前進(jìn)，我們提供了 圖例、視覺映射、數(shù)據(jù)區(qū)域縮放、tooltip、數(shù)據(jù)刷選等開箱即用的交互組件，可以對(duì)數(shù)據(jù)進(jìn)行多維度數(shù)據(jù)篩取、視圖縮放、展示細(xì)節(jié)等交互操作。

多維數(shù)據(jù)的支持以及豐富的視覺編碼手段

ECharts 3 開始加強(qiáng)了對(duì)多維數(shù)據(jù)的支持。除了加入了平行坐標(biāo)等常見的多維數(shù)據(jù)可視化工具外，對(duì)于傳統(tǒng)的散點(diǎn)圖等，傳入的數(shù)據(jù)也可以是多個(gè)維度的。配合視覺映射組件 visualMap 提供的豐富的視覺編碼，能夠?qū)⒉煌S度的數(shù)據(jù)映射到顏色、大小、透明度、明暗度等不同的視覺通道。

動(dòng)態(tài)數(shù)據(jù)

ECharts 由數(shù)據(jù)驅(qū)動(dòng)，數(shù)據(jù)的改變驅(qū)動(dòng)圖表展現(xiàn)的改變。因此動(dòng)態(tài)數(shù)據(jù)的實(shí)現(xiàn)也變得異常簡單，只需要獲取數(shù)據(jù)，填入數(shù)據(jù)，ECharts 會(huì)找到兩組數(shù)據(jù)之間的差異然后通過合適的動(dòng)畫去表現(xiàn)數(shù)據(jù)的變化。配合 timeline 組件能夠在更高的時(shí)間維度上去表現(xiàn)數(shù)據(jù)的信息。

絢麗的特效

ECharts 針對(duì)線數(shù)據(jù)，點(diǎn)數(shù)據(jù)等地理數(shù)據(jù)的可視化提供了吸引眼球的特效。

通過 GL 實(shí)現(xiàn)更多更強(qiáng)大絢麗的三維可視化

想要在 VR，大屏場景里實(shí)現(xiàn)三維的可視化效果？我們提供了基于 WebGL 的 ECharts GL，你可以跟使用 ECharts 普通組件一樣輕松的使用 ECharts GL 繪制出三維的地球，建筑群，人口分布的柱狀圖，在這基礎(chǔ)之上我們還提供了不同層級(jí)的畫面配置項(xiàng)，幾行配置就能得到藝術(shù)化的畫面！

無障礙訪問（4.0+）

當(dāng)我們說到“可視化”的時(shí)候，我們往往很自然地將它與“看得?”聯(lián)系在一起，但其 實(shí)這是片面的。W3C制定了無障礙富互聯(lián)網(wǎng)應(yīng)用規(guī)范集(WAI-ARIA，the Accessible Rich Internet Applications Suite)，致力于使得網(wǎng)?內(nèi)容和網(wǎng)?應(yīng) 用能夠被更多殘障人士訪問。

ECharts 4.0 遵從這一規(guī)范，支持自動(dòng)根據(jù)圖表配置項(xiàng)智能生成描述，使得盲人可 以在朗讀設(shè)備的幫助下了解圖表內(nèi)容，讓圖表可以被更多人群訪問！

2. 教程設(shè)計(jì)

本門教程首先會(huì)對(duì) ECharts 的簡單使用以及各個(gè)配置項(xiàng)講解，再對(duì) ECharts 中視圖的構(gòu)成組件進(jìn)行一一解讀，之后會(huì)通過實(shí)例和使用對(duì) ECharts 中所有的圖表進(jìn)行講解，最后我們將在進(jìn)階部分對(duì)當(dāng)下流行的庫與 ECharts 的整合進(jìn)行全面介紹。

3. 你需要掌握

在學(xué)習(xí) ECharts 之前你需要掌握一些基礎(chǔ)知識(shí)以便之后的學(xué)習(xí)能夠順利進(jìn)展。

1. HTML 的基本知識(shí)；
2. JavaScript 的基本知識(shí)。
   當(dāng)然，在客戶的進(jìn)階部分我們也會(huì)對(duì) Vue 與 React 這兩大框架 和 ECharts 的整合做一下講解。所以還需要你根據(jù)所需的了解一些 Vue 和 React 的內(nèi)容。

4. 小結(jié)

該小節(jié)我們主要是了解了 ECharts 的一些基本情況，對(duì) ECharts 能夠在我們系統(tǒng)中起到的作用也有了一定的了解，在之后的章節(jié)中我們將持續(xù)的對(duì) ECharts 的各個(gè)環(huán)節(jié)進(jìn)一步的探索。