ECharts

時間 2019-11-21

標籤 echarts 简体版

原文原文鏈接

百度的ECharts目前在國內使用的比較多，因此總結了一些相關知識；官網地址，詳細的能夠參考：http://echarts.baidu.com/index.htmljavascript

特性介紹

ECharts，一個純 Javascript 的圖表庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。css

ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，而且對移動端作了深度的優化。html

獲取 ECharts

你能夠經過如下幾種方式獲取 ECharts。java

從官網下載界面選擇你須要的版本下載，根據開發者功能和體積上的需求，咱們提供了不一樣打包的下載，若是你在體積上沒有要求，能夠直接下載完整版本。開發環境建議下載源代碼版本，包含了常見的錯誤提示和警告。node
在 ECharts 的 GitHub 上下載最新的 release 版本，解壓出來的文件夾裏的 dist 目錄裏能夠找到最新版本的 echarts 庫。webpack
經過 npm 獲取 echarts，npm install echarts --save，詳見「在 webpack 中使用 echarts」css3
cdn 引入，你能夠在 cdnjs，npmcdn 或者國內的 bootcdn 上找到 ECharts 的最新版本。git

引入 ECharts

ECharts 3 開始再也不強制使用 AMD 的方式按需引入，代碼裏也再也不內置 AMD 加載器。所以引入方式簡單了不少，只須要像普通的 JavaScript 庫同樣用 script 標籤引入。github

<!DOCTYPE html> <html> <header> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </header> </html>

繪製一個簡單的圖表

在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器。web

<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>

這樣你的第一個圖表就誕生了！

在 webpack 中使用 ECharts

Webpack 是目前比較流行的模塊打包工具，你能夠在使用 webpack 的項目中輕鬆的引入和打包 ECharts，這裏假設你已經對 webpack 具備必定的瞭解而且在本身的項目中使用。

npm 安裝 ECharts

在 3.1.1 版本以前 ECharts 在 npm 上的 package 是非官方維護的，從 3.1.1 開始由官方 EFE 維護 npm 上 ECharts 和 zrender 的 package。

你可使用以下命令經過 npm 安裝 ECharts

npm install echarts --save

引入 ECharts

經過 npm 上安裝的 ECharts 和 zrender 會放在node_modules目錄下。能夠直接在項目代碼中 require('echarts') 獲得 ECharts。



var echarts = require('echarts'); // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main'));

// 繪製圖表 myChart.setOption({ title: { text: 'ECharts 入門示例' }, tooltip: {}, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });

按需引入 ECharts 圖表和組件

默認使用 require('echarts') 獲得的是已經加載了全部圖表和組件的 ECharts 包，所以體積會比較大，若是在項目中對體積要求比較苛刻，也能夠只按需引入須要的模塊。

例如上面示例代碼中只用到了柱狀圖，提示框和標題組件，所以在引入的時候也只須要引入這些模塊，能夠有效的將打包後的體積從 400 多 KB 減少到 170 多 KB。

// 引入 ECharts 主模塊 var echarts = require('echarts/lib/echarts'); // 引入柱狀圖 require('echarts/lib/chart/bar'); // 引入提示框和標題組件 require('echarts/lib/component/tooltip'); require('echarts/lib/component/title');

// 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 繪製圖表 myChart.setOption({ title: { text: 'ECharts 入門示例' }, tooltip: {}, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });

對於另外一個流行的模塊打包工具 browserify 也是一樣的用法，這裏就不贅述了。

繪製南丁格爾圖

餅圖主要是經過扇形的弧度表現不一樣類目的數據在總和中的佔比，它的數據格式比柱狀圖更簡單，只有一維的數值，不須要給類目。由於不在直角座標系上，因此也不須要xAxis，yAxis。

myChart.setOption({ series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:400, name:'搜索引擎'}, {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:274, name:'聯盟廣告'}, {value:235, name:'視頻廣告'} ] } ] })

異步數據加載和更新

異步加載

入門示例中的數據是在初始化後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%'}。
位置描述
- 能夠設置 left: 'center'，表示水平居中。
- 能夠設置 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，寫成後者就不奇怪了。

Media Query

Media Query 提供了『隨着容器尺寸改變而改變』的能力。

以下例子，可嘗試拖動右下角的圓點，隨着尺寸變化，legend 和系列會自動改變佈局位置和方式。

要在 option 中設置 Media Query 須遵循以下格式：

option = { baseOption: { // 這裏是基本的『原子option』。 title: {...}, legend: {...}, series: [{...}, {...}, ...], ... }, media: [ // 這裏定義了 media query 的逐條規則。 { query: {...}, // 這裏寫規則。 option: { // 這裏寫此規則知足下的option。 legend: {...}, ... } }, { query: {...}, // 第二個規則。 option: { // 第二個規則對應的option。 legend: {...}, ... } }, { // 這條裏沒有寫規則，表示『默認』， option: { // 即全部規則都不知足時，採納這個option。 legend: {...}, ... } } ] };

上面的例子中，baseOption、以及 media 每一個 option 都是『原子 option』，即普通的含有各組件、系列定義的 option。而由『原子option』組合成的整個 option，咱們稱爲『複合 option』。baseOption 是必然被使用的，此外，知足了某個 query條件時，對應的 option 會被使用 chart.mergeOption() 來 merge 進去。

query：

每一個 query 相似於這樣：

{ minWidth: 200, maxHeight: 300, minAspectRatio: 1.3 }

如今支持三個屬性：width、height、aspectRatio（長寬比）。每一個屬性均可以加上 min 或 max 前綴。好比，minWidth: 200 表示『大於等於200px寬度』。兩個屬性一塊兒寫表示『而且』，好比：{minWidth: 200, maxHeight: 300} 表示『大於等於200px寬度，而且小於等於300px高度』。

option：

media中的 option 既然是『原子 option』，理論上能夠寫任何 option 的配置項。可是通常咱們只寫跟佈局定位相關的，例如截取上面例子中的一部分 query option：

media: [ ..., { query: { maxAspectRatio: 1 // 當長寬比小於1時。 }, option: { legend: { // legend 放在底部中間。 right: 'center', bottom: 0, orient: 'horizontal' // legend 橫向佈局。 }, series: [ // 兩個餅圖左右佈局。 { radius: [20, '50%'], center: ['50%', '30%'] }, { radius: [30, '50%'], center: ['50%', '70%'] } ] } }, { query: { maxWidth: 500 // 當容器寬度小於 500 時。 }, option: { legend: { right: 10, // legend 放置在右側中間。 top: '15%', orient: 'vertical' // 縱向佈局。 }, series: [ // 兩個餅圖上下佈局。 { radius: [20, '50%'], center: ['50%', '30%'] }, { radius: [30, '50%'], center: ['50%', '75%'] } ] } }, ... ]

多個 query 被知足時的優先級：

注意，能夠有多個 query 同時被知足，會都被 mergeOption，定義在後的後被 merge（即優先級更高）。

默認 query：

若是 media 中有某項不寫 query，則表示『默認值』，即全部規則都不知足時，採納這個option。

容器大小實時變化時的注意事項：

在很多狀況下，並不須要容器DOM節點任意隨着拖拽變化大小，而是隻是根據不一樣終端設置幾個典型尺寸。

可是若是容器DOM節點須要能任意隨着拖拽變化大小，那麼目前使用時須要注意這件事：某個配置項，若是在某一個 query option 中出現，那麼在其餘 query option 中也必須出現，不然不可以迴歸到原來的狀態。（left/right/top/bottom/width/height 不受這個限制。）

『複合 option』中的 media 不支持 merge

也就是說，當第二（或3、4、五 ...）次 chart.setOption(rawOption) 時，若是 rawOption 是 複合option（即包含 media列表），那麼新的 rawOption.media 列表不會和老的 media 列表進行 merge，而是簡單替代。固然，rawOption.baseOption仍然會正常和老的 option 進行merge。

其實，不多有場景須要使用『複合 option』來屢次 setOption，而咱們推薦的作法是，使用 mediaQuery 時，第一次setOption使用『複合 option』，後面 setOption 時僅使用『原子 option』，也就是僅僅用 setOption 來改變 baseOption。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。