ECharts 簡介

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

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

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

1. 特點

豐富的可視化類型

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

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

你可以在下載界面下載包含所有圖表的構(gòu)建文件，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構(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)換的步驟，而且多個組件能夠共享一份數(shù)據(jù)而不用克隆。

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

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

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

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

移動端優(yōu)化

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

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

多渲染方案，跨平臺使用！

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

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

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

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

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

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

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

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

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

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

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

絢麗的特效

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

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

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

無障礙訪問（4.0+）

當(dāng)我們說到“可視化”的時候，我們往往很自然地將它與“看得?”聯(lián)系在一起，但其 實這是片面的。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ī)范，支持自動根據(jù)圖表配置項智能生成描述，使得盲人可 以在朗讀設(shè)備的幫助下了解圖表內(nèi)容，讓圖表可以被更多人群訪問！

2. 教程設(shè)計

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

3. 你需要掌握

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

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

4. 小結(jié)

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