Echarts的使用與配置項
阿新 • • 發佈：2020-10-28
Echarts的使用與配置項 具體詳情參見官方文件：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 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” cdn 引入，你可以在 cdnjs，npmcdn 或者國內的 bootcdn 上找到 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 parallel 這個配置項是平行座標系的『座標系』本身。一個系列（series）或多個系列（如上圖中的『北京』、『上海』、『廣州』分別各是一個系列）可以共用這個『座標系』。 和其他座標系一樣，座標系也可以建立多個。 位置設定，也是放在這裡進行。 parallelAxis 這個是『座標系』中的座標軸的配置。自然，需要有多個座標軸。 其中有 parallelAxis.parallelIndex 屬性，指定這個『座標軸』在哪個『座標系』中。預設使用第一個『座標系』。 series-parallel 這個是『系列』的定義。系列被畫到『座標系』上。 其中有 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 中時間相關部分。