1.什么是ECharts
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，是來自百度商業前端數據可視化團隊EFE的一個開源的純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。
自2013年6月發布第一個版本以后，到現在已經經過了幾十次版本迭代，目前最新版本是2020年3月發布的ECharts 4.7.0
2.ECharts可以做什么
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關系數據可視化的關系圖、旭日圖，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，儀表盤，並且支持圖與圖之間的混搭。
除了這些內置的包含豐富功能的圖標，ECharts還提供自定義系列，可以從數據映射到任何你想要的圖形，並且可以和已有的交互組件結合使用而不需要操心其他事情。
ECharts還提供了基於 WebGL 的 ECharts GL，可以像使用 ECharts 普通組件一樣輕松的使用 ECharts GL 繪制出三維的地球，建築群，人口分布的柱狀圖，在這基礎之上還可以通過不同層級的畫面配置項，很輕松配置得到藝術化的畫面
3.ECharts基礎概念
(1) echarts實例
一個網頁中可以創建多個 echarts 實例。每個 echarts 實例 中可以創建多個圖表和坐標系等等（用 option 來描述）。准備一個 DOM 節點作為 echarts 的渲染容器，就可以在上面創建一個 echarts 實例。每個 echarts 實例獨占一個 DOM 節點。
簡言之，一個echarts實例對應一個DOM節點，用一個option來描述（option中所有的參數都是以Key-Value的格式來組織的）。
(2)組件component
echarts 中的各種內容，被抽象為“組件”。例如，echarts 中至少有這些組件：xAxis（直角坐標系 X 軸）、yAxis（直角坐標系 Y 軸）、grid（直角坐標系底板）、angleAxis（極坐標系角度軸）、polar（極坐標系底板）、geo（地理坐標系）、tooltip（提示框組件）、toolbox（工具欄組件）、series（系列）等。使用時，只需在一個echarts實例的option中聲明各個組件（必須要包含一個series），這些組件就會出現在圖中。
當我們對不同的數據進行可視化時，可以通過選取不同的組件對圖表進行設置，以滿足我們的可視化需求。
(3)系列series
在echarts 里，系列（series）是指：一組數值以及他們映射成的圖，可以看作一種特殊的組件。一個 系列 包含的要素至少有：一組數據、圖表類型（series.type）、以及其他的關於這些數據如何映射成圖的參數（例如圖表擺放的位置、圖表大小等）。
其中用於可視化的數據可以在包含series中，也可以在名叫dataset的組件中單獨聲明數據，echarts會自動讀取並默認按照二維表（二維數組）的列作為一個維度（dimension）來映射到圖表當中。
以上三個概念是ECharts中最基礎的部分，簡單來說，DOM節點構成了echarts實例的渲染容器，即圖表展示的容器；echarts實例擁有一個option屬性，用來描述對圖表的各種需求，包括：有什么數據、要畫什么圖表、圖表長什么樣子、含有什么組件、組件能操作什么事情等等；根據需要可以選取相應的各種組件component，在option中聲明這些組件（及其參數），即可在圖表中顯示各種組件；系列series是特殊的組件，描述了數據及其映射成的圖，是一個echarts實例的option中不可缺少的部分。
4.ECharts入門實踐
了解了上述三個基礎概念，就能寫出我們的第一個ECharts圖表了，讓我們從較簡單的柱狀圖和折線圖入手。
（1）獲取ECharts
可以通過以下幾種方式獲取 ECharts。
- 從 Apache ECharts (incubating) 官網下載界面 獲取官方源碼包后構建。
- 在 ECharts 的 GitHub 獲取構建好的js文件。
- 通過 npm 獲取 echarts，
npm install echarts --save - 通過 jsDelivr 等 CDN 引入
（2）然后引入ECharts
通過標簽，從CDN直接引入構建好的echarts文件
（3）准備DOM節點
為ECharts准備一個具備寬高的DOM節點
（4）初始化ECharts實例
根據准備的DOM節點，初始化ECharts實例
（5）指定圖表的配置項和數據
在option中配置所有需要的組件（包括series）
在echarts實例中使用指定的配置項option和數據顯示圖表
（6）更改圖表樣式
這里介紹一下比較常用的樣式設置方式——直接的樣式設置。在 ECharts 的 option 中，有很多地方可以設置 itemStyle、lineStyle、areaStyle、label 等屬性。改變這些屬性可以直接設置圖表中圖形元素的顏色、線寬、點的大小、標簽的文字、標簽的樣式等等。
讓我們嘗試一下改變折線圖的樣式，讓折線圖和柱狀圖的顏色有所區別。
下面看看樣式的設置效果，現在折線圖和柱狀圖的顏色就已經不同了。
這樣我們的第一個ECharts圖表就完成啦！有興趣的同學還可以看看官網的教程和API文檔，深入了解ECharts。