ECharts
百度的ECharts目前在國內使用的比較多，所以總結了一些相關知識；官網地址，詳細的可以參考：https://www.echartsjs.com/zh/index.html
ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，儀表盤，並且支持圖與圖之間的混搭。
除了已經內置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個renderItem函數，就可以從數據映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。
你可以在下載界面下載包含所有圖表的構建文件，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構建文件太大，也可以在在線構建中選擇需要的圖表類型后自定義構建
移動端優化
ECharts 針對移動端交互做了細致的優化，例如移動端小屏上適於用手指在坐標系中進行縮放、平移。 PC 端也可以用鼠標在圖中進行縮放（用鼠標滾輪）、平移等。細粒度的模塊化和打包機制可以讓 ECharts 在移動端也擁有很小的體積，可選的 SVG 渲染模塊讓移動端的內存占用不再捉襟見肘
獲取 ECharts
你可以通過以下幾種方式獲取 ECharts。
-
從官網下載界面選擇你需要的版本下載，根據開發者功能和體積上的需求，我們提供了不同打包的下載，如果你在體積上沒有要求，可以直接下載完整版本。開發環境建議下載源代碼版本，包含了常見的錯誤提示和警告。
-
在 ECharts 的 GitHub 上下載最新的
release版本，解壓出來的文件夾里的dist目錄里可以找到最新版本的 echarts 庫。 -
通過 npm 獲取 echarts，
npm install echarts --save，詳見“在 webpack 中使用 echarts”
引入 ECharts
ECharts 3 開始不再強制使用 AMD 的方式按需引入，代碼里也不再內置 AMD 加載器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標簽引入。
<!DOCTYPE html> <html> <header> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </header> </html>繪制一個簡單的圖表
在繪圖前我們需要為 ECharts 准備一個具備高寬的 DOM 容器。
<body> <!-- 為 ECharts 准備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body> 然后就可以通過 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>這樣你的第一個柱狀圖表就誕生了！
異步加載
入門示例中的數據是在初始化后setOption中直接填入的，但是很多時候可能數據需要異步加載后再填入。ECharts 中實現異步數據的更新非常簡單，在圖表初始化后不管任何時候只要通過 jQuery 等工具異步獲取數據后通過 setOption 填入數據和配置項就行。
var myChart = echarts.init(document.getElementById('main')); $.get('data.json').done(function (data) { myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); });
var myChart = echarts.init(document.getElementById('main')); // 顯示標題，圖例和空的坐標軸 myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); // 異步加載數據 $.get('data.json').done(function (data) { // 填入數據 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data.data }] });});ECharts 中在更新數據的時候需要通過name屬性對應到相應的系列，上面示例中如果name不存在也可以根據系列的順序正常更新，但是更多時候推薦更新數據的時候加上系列的name數據。
loading 動畫
如果數據加載時間較長，一個空的坐標軸放在畫布上也會讓用戶覺得是不是產生 bug 了，因此需要一個 loading 的動畫來提示用戶數據正在加載。
ECharts 默認有提供了一個簡單的加載動畫。只需要調用 showLoading 方法顯示。數據加載完成后再調用 hideLoading 方法隱藏加載動畫。
myChart.showLoading(); $.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...); });ECharts 工作在用戶指定高寬的 DOM 節點（容器）中。ECharts 的『組件』和『系列』都在這個 DOM 節點中，每個節點都可以由用戶指定位置。圖表庫內部並不適宜實現 DOM 文檔流布局，因此采用類似絕對布局的簡單容易理解的布局方式。但是有時候容器尺寸極端時，這種方式並不能自動避免組件重疊的情況，尤其在移動端小屏的情況下。
另外，有時會出現一個圖表需要同時在PC、移動端上展現的場景。這需要 ECharts 內部組件隨着容器尺寸變化而變化的能力。
為了解決這個問題，ECharts 完善了組件的定位設置，並且實現了類似 CSS Media Query 的自適應能力。
ECharts組件的定位和布局
大部分『組件』和『系列』會遵循兩種定位方式：
left/right/top/bottom/width/height 定位方式：
這六個量中，每個量都可以是『絕對值』或者『百分比』或者『位置描述』。
絕對值 ：單位是瀏覽器像素（px），用 number 形式書寫（不寫單位）。例如 {left: 23, height: 400}。
百分比 ：表示占 DOM 容器高寬的百分之多少，用 string 形式書寫。例如 {right: '30%', bottom: '40%'}。
位置描述 ：A 可以設置 left: 'center'，表示水平居中。 B 可以設置 top: 'middle'，表示垂直居中。
這六個量的概念，和 CSS 中六個量的概念類似：
- left：距離 DOM 容器左邊界的距離。
- right：距離 DOM 容器右邊界的距離。
- top：距離 DOM 容器上邊界的距離。
- bottom：距離 DOM 容器下邊界的距離。
- width：寬度。
- height：高度。
在橫向，left、right、width 三個量中，只需兩個量有值即可，因為任兩個量可以決定組件的位置和大小，例如 left 和right 或者 right 和 width 都可以決定組件的位置和大小。 縱向，top、bottom、height 三個量，和橫向類同不贅述。
center / radius 定位方式：
-
center是一個數組，表示
[x, y]，其中，x、y可以是『絕對值』或者『百分比』，含義和前述相同。 -
radius是一個數組，表示
[內半徑, 外半徑]，其中，內外半徑可以是『絕對值』或者『百分比』，含義和前述相同。在自適應容器大小時，百分比設置是很有用的。
橫向（horizontal）和縱向（vertical）
ECharts的『外觀狹長』型的組件（如 legend、visualMap、dataZoom、timeline等），大多提供了『橫向布局』『縱向布局』的選擇。例如，在細長的移動端屏幕上，可能適合使用『縱向布局』；在PC寬屏上，可能適合使用『橫向布局』。
橫縱向布局的設置，一般在『組件』或者『系列』的 orient 或者 layout 配置項上，設置為 'horizontal' 或者'vertical'。
於 ECharts2 的兼容：
ECharts2 中的 x/x2/y/y2 的命名方式仍被兼容，對應於 left/right/top/bottom。但是建議寫 left/right/top/bottom。
位置描述中，為兼容 ECharts2，可以支持一些看起來略奇怪的設置：left: 'right'、left: 'left'、top: 'bottom'、top: 'top'。這些語句分別等效於：right: 0、left: 0、bottom: 0、top: 0，寫成后者就不奇怪了。
Echarts的配置項 。詳細屬性請參考官方文檔：https://www.echartsjs.com/zh/option.html
title：標題組件，包含主標題和副標題。
legend：圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。ECharts 3 中單個 echarts 實例中可以存在多個圖例組件，會方便多個圖例的布局。
當圖例數量過多時，可以使用 滾動圖例（垂直） 或 滾動圖例（水平），參見：legend.type。
grid ：直角坐標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪制折線圖，柱狀圖，散點圖（氣泡圖）。在 ECharts 2.x 里單個 echarts 實例中最多只能存在一個 grid 組件，
在 ECharts 3 中可以存在任意個 grid 組件。
xAxis ：直角坐標系 grid 中的 x 軸，一般情況下單個 grid 組件最多只能放上下兩個 x 軸，多於兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。
yAxis ：直角坐標系 grid 中的 y 軸，一般情況下單個 grid 組件最多只能放左右兩個 y 軸，多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。
polar ：極坐標系，可以用於散點圖和折線圖。每個極坐標系擁有一個角度軸和一個半徑軸。
radiusAxis ：極坐標系的徑向軸。
angleAxis ：極坐標系的角度軸。
radar ：雷達圖坐標系組件，只適用於雷達圖。該組件等同 ECharts 2 中的 polar 組件。因為 3 中的 polar 被重構為標准的極坐標組件，為避免混淆，雷達圖使用 radar 組件作為其坐標系。
dataZoom ：組件 用於區域縮放，從而能自由關注細節的數據信息，或者概覽數據整體，或者去除離群點的影響。
visualMap ：是視覺映射組件，用於進行『視覺編碼』，也就是將數據映射到視覺元素（視覺通道）。
tooltip ：提示框組件的通用介紹：
提示框組件可以設置在多種地方：
可以設置在全局，即 tooltip
可以設置在坐標系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以設置在系列中，即 series.tooltip
可以設置在系列的每個數據項中，即 series.data.tooltip
axisPointer ：這是坐標軸指示器（axisPointer）的全局公用設置。
toolbox ：工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。
brush ：是區域選擇組件，用戶可以選擇圖中一部分數據，從而便於向用戶展示被選中數據，或者他們的一些統計計算結果。
geo ：地理坐標系組件。
地理坐標系組件用於地圖的繪制，支持在地理坐標系上繪制散點圖，線集。
3.1.10 開始 geo 組件也支持鼠標事件。事件參數為:
{ componentType: 'geo', // Geo 組件在 option 中的 index geoIndex: number, // 點擊區域的名稱，比如"上海" name: string, // 傳入的點擊區域的 region 對象，見 geo.regions region: Object }Tip: geo 區域的顏色也可以被 map series 所控制，參見 series-map.geoIndex。
parallel ：平行坐標系:平行坐標系（Parallel Coordinates） 是一種常用的可視化高維數據的圖表。
例如 series-parallel.data 中有如下數據： 平行坐標系適用於對這種多維數據進行可視化分析。每一個維度（每一列）對應一個坐標軸，每一個『數據項』是一條線，貫穿多個坐標軸。在坐標軸上，可以進行數據選取等操作。
[
[1, 55, 9, 56, 0.46, 18, 6, '良'], [2, 25, 11, 21, 0.65, 34, 9, '優'], [3, 56, 7, 63, 0.3, 14, 5, '良'], [4, 33, 7, 29, 0.33, 16, 6, '優'], { // 數據項也可以是 Object，從而里面能含有對線條的特殊設置。 value: [5, 42, 24, 44, 0.76, 40, 16, '優'] lineStyle: {...}, } ... ]
數據中，每一行是一個『數據項』，每一列屬於一個『維度』。（例如上面數據每一列的含義分別是：『日期』,『AQI指數』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。需要涉及到三個組件：parallel、parallelAxis、series-parallel
這個配置項是平行坐標系的『坐標系』本身。一個系列（series）或多個系列（如上圖中的『北京』、『上海』、『廣州』分別各是一個系列）可以共用這個『坐標系』。
和其他坐標系一樣，坐標系也可以創建多個。
位置設置，也是放在這里進行。
這個是『坐標系』中的坐標軸的配置。自然，需要有多個坐標軸。
其中有 parallelAxis.parallelIndex 屬性，指定這個『坐標軸』在哪個『坐標系』中。默認使用第一個『坐標系』。
這個是『系列』的定義。系列被畫到『坐標系』上。
其中有 series-parallel.parallelIndex 屬性，指定使用哪個『坐標系』。默認使用第一個『坐標系』。
singleAxis : 單軸。可以被應用到散點圖中展現一維數據
timeline ：組件，提供了在多個 ECharts option 間進行切換、播放等操作的功能。timeline 和其他組件有些不同，它需要操作『多個option』。
假設，我們把 ECharts 的傳統的 option 稱為原子option，那么使用 timeline 時，傳入 ECharts 的 option 就成為了一個集合多個原子option的復合option。
graphic ：是原生圖形元素組件。可以支持的圖形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
calendar ：日歷坐標系組件。在ECharts中，我們非常有創意地實現了日歷圖，是通過使用日歷坐標系組件來達到日歷圖效果的，如下方的幾個示例圖所示，我們可以在熱力圖、散點圖、關系圖中使用日歷坐標系。
dataset ：Charts 4 開始支持了 數據集（dataset）組件用於單獨的數據集聲明，從而數據可以單獨管理，被多個組件復用，並且可以自由指定數據到視覺的映射。這在不少場景下能帶來使用上的方便。
關於 dataset 的詳情，請參見教程。
aria ：W3C 制定了無障礙富互聯網應用規范集（WAI-ARIA，the Accessible Rich Internet Applications Suite），致力於使得網頁內容和網頁應用能夠被更多殘障人士訪問。ECharts 4.0 遵從這一規范，
支持自動根據圖表配置項智能生成描述，使得盲人可以在朗讀設備的幫助下了解圖表內容，讓圖表可以被更多人群訪問。
默認關閉，需要通過將 aria.show 設置為 true 開啟。開啟后，會根據圖表、數據、標題等情況，自動智能生成關於圖表的描述，用戶也可以通過配置項修改描述。
series ：系列列表。每個系列通過 type 決定自己的圖表類型
color ：調色盤顏色列表。如果系列沒有設置顏色，則會依次循環從該列表中取顏色作為系列顏色。
默認為：['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
backgroundColor ：背景色，默認無背景。顏色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，
比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六進制格式，比如 '#ccc'。除了純色之外顏色也支持漸變色和紋理填充
// 線性漸變，前四個參數分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當於在圖形包圍盒中的百分比，如果 globalCoord 為 `true`，則該四個值是絕對的像素位置
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: 'red' // 0% 處的顏色
},
{
offset: 1,
color: 'blue' // 100% 處的顏色
}
],
global: false // 缺省為 false
}
// 徑向漸變，前三個參數分別是圓心 x, y 和半徑，取值同線性漸變
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'red' // 0% 處的顏色
},
{
offset: 1,
color: 'blue' // 100% 處的顏色
}
],
global: false // 缺省為 false
}
// 紋理填充
color: {
image: imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串
repeat: 'repeat' // 是否平鋪, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
textStyle ：全局的字體樣式。
animation ： 是否開啟動畫。
animationThres ：2000 是否開啟動畫的閾值，當單個系列顯示的圖形數量大於這個閾值時會關閉動畫。
animationThreshold ：1000 初始動畫的時長，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果：
animationDuration: function (idx) { // 越往后的數據延遲越大 return idx * 100; }animationEasing ：cubicOut 初始動畫的緩動效果。不同的緩動效果可以參考 緩動示例。
animationDelay ： 0初始動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果：
animationDurationUpdate : 300 數據更新動畫的時長。支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果
animationEasingUpdate ：cubicOut數據更新動畫的緩動效果。
animation DelayUpdate :0 數據更新動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果。
blendMode : 'source-over'圖形的混合模式，不同的混合模式見 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation 。
默認為'source-over'。 支持每個系列單獨設置。
'lighter'也是比較常見的一種混合模式，該模式下圖形數量集中的區域灰顏色疊加成高亮度的顏色（白色），常常能起到突出該區域的效果。
hoverlayerThreshold : 3000, 圖形數量閾值，決定是否開啟單獨的 hover 層，在整個圖表的圖形數量大於該閾值時開啟單獨的 hover 層。單獨的 hover 層主要是為了在高亮圖形的時候
不需要重繪整個圖表，只需要把高亮的圖形放入單獨的一個 canvas 層進行繪制，防止在圖形數量很多的時候因為高亮重繪所有圖形導致卡頓。
ECharts 2 里是底層強制使用單獨的層繪制高亮圖形，但是會帶來很多問題，比如高亮的圖形可能會不正確的遮擋所有其它圖形，
還有圖形有透明度因為高亮和正常圖形疊加導致不正確的透明度顯示，還有移動端上因為每個圖表都要多一個 canvas 帶來的額外內存開銷。
因此 3 里默認不會開啟該優化，只有在圖形數量特別多，有必要做該優化時才會自動開啟。
useUTC : false 是否使用 UTC 時間。true: 表示axis.type為'time'時，依據 UTC 時間確定 tick 位置，並且axisLabel和tooltip默認展示的是 UTC 時間。false: 表示axis.type為'time'時，依據本地時間確定 tick 位置，並且axisLabel和tooltip默認展示的是本地時間。
默認取值為false，即使用本地時間。因為考慮到：
很多情況下，需要展示為本地時間（無論服務器存儲的是否為 UTC 時間）。
如果 data 中的時間為 '2012-01-02' 這樣的沒有指定時區的時間表達式，往往意為本地時間。默認情況下，時間被展示時需要和輸入一致而非有時差。
注意，這個參數實際影響的是『展示』，而非用戶輸入的時間值的解析。 關於用戶輸入的時間值（例如 1491339540396, '2013-01-04' 等）的解析，參見 date 中時間相關部分。