引入 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> <!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>
這樣你的第一個圖表就誕生了！
vue使用 ECharts
<template> <div :style="{height: echartsheight}"> <div style="width:100%;height:100%;" id="lineEcharts"></div> <div style="position:absolute;top:93%;left:10%;"> <Icon type="ios-umbrella" />最大載荷48 最小載荷32 在0.5m的時候載荷達到最低<br> <Icon type="md-trophy" />在位移2.35m的時候載荷達到最高</div> </div> </template> <script> import echarts from 'echarts'; export default { name: 'lineEcharts', props: { seriesData: { type: Array, default () { return [] } }, echartsheight: { type: String, default: '' } }, data() { return { echartsheight: window.innerHeight, } }, mounted() { this.$nextTick(() => { const option = { title: { left: 'center', text: 'w21-cm35-1 井', subtext: '位置載荷變化曲線功圖', }, xAxis: { name: '位移(m)', //軸名 nameLocation: 'middle', //軸位置 nameGap: '20', //name名字與軸線間距 boundaryGap: true, }, yAxis: { type: 'value', name: '載荷', //軸名 // max: 100, //軸刻度最大值 min: 30, //軸刻度最小值 nameGap: 30, //name名字與軸線間距 nameLocation: 'center', //軸位置 }, series: [{ data: this.seriesData, //二維數組 type: 'line', //圖的類型，柱狀圖'bar' ,折線圖'line' symbol: 'none', //這句就是去掉點的 smooth: true, //這句就是讓曲線變平滑的 }] } const lineEcharts = echarts.init(document.getElementById('lineEcharts')); lineEcharts.setOption(option); window.addEventListener('resize', function () { lineEcharts.resize(); }); }); } }; </script>
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 主模塊
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]
}]
});
按需引入 ECharts 圖表和組件
默認使用 require('echarts') 得到的是已經加載了所有圖表和組件的 ECharts 包，因此體積會比較大，如果在項目中對體積要求比較苛刻，也可以只按需引入需要的模塊。
例如上面示例代碼中只用到了柱狀圖，提示框和標題組件，因此在引入的時候也只需要引入這些模塊，可以有效的將打包后的體積從 400 多 KB 減小到 170 多 KB。
異步加載
入門示例中的數據是在初始化后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%'],