官網(wǎng)：https://www.echartsjs.com/zh/index.html
GitHub：https://github.com/apache/incubator-echarts
特性介紹
百度的
ECharts目前在國內(nèi)使用的比較多，ECharts一個(gè)純Javascript的圖表庫工三，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上澎灸，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11夫啊，Chrome，F(xiàn)irefox钟鸵，Safari等）钉稍，底層依賴輕量級(jí)的Canvas類庫ZRender，提供直觀棺耍，生動(dòng)贡未，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表蒙袍。
ECharts 3中更是加入了更多豐富的交互功能以及更多的可視化效果俊卤，并且對(duì)移動(dòng)端做了深度的優(yōu)化。
獲取 ECharts
你可以通過以下幾種方式獲取 ECharts害幅。
從官網(wǎng)下載界面選擇你需要的版本下載消恍，根據(jù)開發(fā)者功能和體積上的需求，我們提供了不同打包的下載以现，如果你在體積上沒有要求狠怨，可以直接下載完整版本。開發(fā)環(huán)境建議下載源代碼版本邑遏，包含了常見的錯(cuò)誤提示和警告佣赖。
在 ECharts 的 GitHub 上下載最新的
release版本，解壓出來的文件夾里的dist目錄里可以找到最新版本的 echarts 庫记盒。通過 npm 獲取 echarts憎蛤，
npm install echarts --save，詳見“在 webpack 中使用 echarts”cdn 引入纪吮，你可以在 cdnjs俩檬，npmcdn 或者國內(nèi)的 bootcdn 上找到 ECharts 的最新版本栏豺。
引入 ECharts
ECharts 3開始不再強(qiáng)制使用AMD的方式按需引入，代碼里也不再內(nèi)置AMD加載器豆胸。因此引入方式簡單了很多，只需要像普通的JavaScript庫一樣用script標(biāo)簽引入巷疼。
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</header>
</html>
繪制一個(gè)簡單的圖表
在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器晚胡。
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡單的柱狀圖嚼沿，下面是完整代碼估盘。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom骡尽，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表遣妥。
myChart.setOption(option);
</script>
</body>
</html>
這樣你的第一個(gè)圖表就誕生了！
在 webpack 中使用 ECharts
Webpack 是目前比較流行的模塊打包工具攀细，你可以在使用
webpack的項(xiàng)目中輕松的引入和打包ECharts箫踩，這里假設(shè)你已經(jīng)對(duì)webpack具有一定的了解并且在自己的項(xiàng)目中使用。
npm 安裝 ECharts
在 3.1.1 版本之前
ECharts在npm上的package是非官方維護(hù)的谭贪，從 3.1.1 開始由官方 EFE 維護(hù)npm上ECharts和zrender的package境钟。
你可以使用如下命令通過 npm 安裝 ECharts
npm install echarts --save
引入 ECharts
通過
npm上安裝的ECharts和zrender會(huì)放在node_modules目錄下〖笫叮可以直接在項(xiàng)目代碼中require('echarts')得到ECharts慨削。
var echarts = require('echarts');
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
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 圖表和組件
默認(rèn)使用
require('echarts')得到的是已經(jīng)加載了所有圖表和組件的ECharts包套媚，因此體積會(huì)比較大缚态，如果在項(xiàng)目中對(duì)體積要求比較苛刻，也可以只按需引入需要的模塊堤瘤。
例如上面示例代碼中只用到了柱狀圖玫芦，提示框和標(biāo)題組件，因此在引入的時(shí)候也只需要引入這些模塊宙橱，可以有效的將打包后的體積從 400 多 KB 減小到 170 多 KB姨俩。
// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入提示框和標(biāo)題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
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]
}]
});
對(duì)于另一個(gè)流行的模塊打包工具 browserify 也是同樣的用法师郑，這里就不贅述了环葵。
繪制南丁格爾圖
餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比，它的數(shù)據(jù)格式比柱狀圖更簡單宝冕，只有一維的數(shù)值张遭，不需要給類目。因?yàn)椴辉谥苯亲鴺?biāo)系上地梨，所以也不需要
xAxis菊卷，yAxis缔恳。
myChart.setOption({
series : [{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'搜索引擎'},
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:274, name:'聯(lián)盟廣告'},
{value:235, name:'視頻廣告'}
]
}]
})
異步數(shù)據(jù)加載和更新
異步加載
入門示例中的數(shù)據(jù)是在初始化后
setOption中直接填入的，但是很多時(shí)候可能數(shù)據(jù)需要異步加載后再填入洁闰。ECharts中實(shí)現(xiàn)異步數(shù)據(jù)的更新非常簡單歉甚，在圖表初始化后不管任何時(shí)候只要通過jQuery等工具異步獲取數(shù)據(jù)后通過setOption填入數(shù)據(jù)和配置項(xiàng)就行。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '異步數(shù)據(jù)加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
var myChart = echarts.init(document.getElementById('main'));
// 顯示標(biāo)題扑眉，圖例和空的坐標(biāo)軸
myChart.setOption({
title: {
text: '異步數(shù)據(jù)加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
// 異步加載數(shù)據(jù)
$.get('data.json').done(function (data) {
// 填入數(shù)據(jù)
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列
name: '銷量',
data: data.data
}]
});
});
ECharts 中在更新數(shù)據(jù)的時(shí)候需要通過name屬性對(duì)應(yīng)到相應(yīng)的系列纸泄，上面示例中如果name不存在也可以根據(jù)系列的順序正常更新，但是更多時(shí)候推薦更新數(shù)據(jù)的時(shí)候加上系列的name數(shù)據(jù)腰素。
loading 動(dòng)畫
如果數(shù)據(jù)加載時(shí)間較長聘裁，一個(gè)空的坐標(biāo)軸放在畫布上也會(huì)讓用戶覺得是不是產(chǎn)生
bug了，因此需要一個(gè)loading的動(dòng)畫來提示用戶數(shù)據(jù)正在加載弓千。
ECharts 默認(rèn)有提供了一個(gè)簡單的加載動(dòng)畫衡便。只需要調(diào)用 showLoading 方法顯示。數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法隱藏加載動(dòng)畫洋访。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
移動(dòng)端自適應(yīng)
ECharts工作在用戶指定高寬的DOM節(jié)點(diǎn)（容器）中镣陕。ECharts的『組件』和『系列』都在這個(gè)DOM節(jié)點(diǎn)中，每個(gè)節(jié)點(diǎn)都可以由用戶指定位置捌显。圖表庫內(nèi)部并不適宜實(shí)現(xiàn)DOM文檔流布局茁彭，因此采用類似絕對(duì)布局的簡單容易理解的布局方式。但是有時(shí)候容器尺寸極端時(shí)扶歪，這種方式并不能自動(dòng)避免組件重疊的情況理肺，尤其在移動(dòng)端小屏的情況下。
另外善镰，有時(shí)會(huì)出現(xiàn)一個(gè)圖表需要同時(shí)在PC妹萨、移動(dòng)端上展現(xiàn)的場景。這需要 ECharts 內(nèi)部組件隨著容器尺寸變化而變化的能力炫欺。
為了解決這個(gè)問題乎完，ECharts 完善了組件的定位設(shè)置，并且實(shí)現(xiàn)了類似 CSS Media Query 的自適應(yīng)能力品洛。
ECharts組件的定位和布局
大部分『組件』和『系列』會(huì)遵循兩種定位方式：
1)left/right/top/bottom/width/height 定位方式：
這六個(gè)量中树姨，每個(gè)量都可以是『絕對(duì)值』或者『百分比』或者『位置描述』
-
絕對(duì)值
單位是瀏覽器像素（px），用
number形式書寫（不寫單位）桥状。例如{left: 23, height: 400}帽揪。 -
百分比
表示占 DOM 容器高寬的百分之多少，用
string形式書寫辅斟。例如{right: '30%', bottom: '40%'}转晰。 -
位置描述
- 可以設(shè)置
left: 'center'，表示水平居中。 - 可以設(shè)置
top: 'middle'查邢，表示垂直居中蔗崎。
- 可以設(shè)置
這六個(gè)量的概念，和 CSS 中六個(gè)量的概念類似：
- left：距離 DOM 容器左邊界的距離扰藕。
- right：距離 DOM 容器右邊界的距離缓苛。
- top：距離 DOM 容器上邊界的距離。
- bottom：距離 DOM 容器下邊界的距離邓深。
- width：寬度他嫡。
- height：高度。
在橫向庐完，left、right徘熔、width 三個(gè)量中门躯，只需兩個(gè)量有值即可，因?yàn)槿蝺蓚€(gè)量可以決定組件的位置和大小酷师，例如 left 和right 或者 right 和 width 都可以決定組件的位置和大小讶凉。 縱向，top山孔、bottom懂讯、height 三個(gè)量，和橫向類同不贅述台颠。
2)center / radius`定位方式：
-
center是一個(gè)數(shù)組褐望，表示
[x, y]，其中串前，x瘫里、y可以是『絕對(duì)值』或者『百分比』，含義和前述相同荡碾。 -
radius是一個(gè)數(shù)組谨读，表示
[內(nèi)半徑, 外半徑]，其中坛吁，內(nèi)外半徑可以是『絕對(duì)值』或者『百分比』劳殖，含義和前述相同。在自適應(yīng)容器大小時(shí)拨脉，百分比設(shè)置是很有用的哆姻。
橫向（horizontal）和縱向（vertical）
- ECharts的『外觀狹長』型的組件（如
legend、visualMap女坑、dataZoom填具、timeline等），大多提供了『橫向布局』『縱向布局』的選擇。例如劳景，在細(xì)長的移動(dòng)端屏幕上誉简，可能適合使用『縱向布局』；在PC寬屏上盟广，可能適合使用『橫向布局』闷串。 - 橫縱向布局的設(shè)置，一般在『組件』或者『系列』的
orient或者layout配置項(xiàng)上筋量，設(shè)置為'horizontal'或者'vertical'烹吵。
于 ECharts2 的兼容：
- ECharts2 中的
x/x2/y/y2的命名方式仍被兼容，對(duì)應(yīng)于left/right/top/bottom桨武。但是建議寫left/right/top/bottom肋拔。 - 位置描述中，為兼容 ECharts2呀酸，可以支持一些看起來略奇怪的設(shè)置：
left: 'right'凉蜂、left: 'left'、top: 'bottom'性誉、top: 'top'窿吩。這些語句分別等效于：right: 0、left: 0错览、bottom: 0纫雁、top: 0，寫成后者就不奇怪了倾哺。
Media Query
Media Query 提供了『隨著容器尺寸改變而改變』的能力轧邪。
如下例子，可嘗試拖動(dòng)右下角的圓點(diǎn)羞海，隨著尺寸變化闲勺，legend 和 系列會(huì)自動(dòng)改變布局位置和方式。
要在 option 中設(shè)置 Media Query 須遵循如下格式：
option = {
baseOption: { // 這里是基本的『原子option』扣猫。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [{ // 這里定義了 media query 的逐條規(guī)則菜循。
query: {...}, // 這里寫規(guī)則。
option: { // 這里寫此規(guī)則滿足下的option申尤。
legend: {...},
...
}
},
{
query: {...}, // 第二個(gè)規(guī)則癌幕。
option: { // 第二個(gè)規(guī)則對(duì)應(yīng)的option。
legend: {...},
...
}
},
{ // 這條里沒有寫規(guī)則昧穿，表示『默認(rèn)』勺远，
option: { // 即所有規(guī)則都不滿足時(shí)，采納這個(gè)option时鸵。
legend: {...},
...
}
}]
};
上面的例子中胶逢，baseOption厅瞎、以及 media 每個(gè) option 都是『原子 option』，即普通的含有各組件初坠、系列定義的 option和簸。而由『原子option』組合成的整個(gè) option，我們稱為『復(fù)合 option』碟刺。baseOption 是必然被使用的锁保，此外，滿足了某個(gè) query條件時(shí)半沽，對(duì)應(yīng)的 option 會(huì)被使用 chart.mergeOption() 來 merge 進(jìn)去爽柒。
query：
每個(gè) query 類似于這樣：
{
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3
}
現(xiàn)在支持三個(gè)屬性：width、height者填、aspectRatio（長寬比）浩村。每個(gè)屬性都可以加上 min 或 max 前綴。比如占哟，minWidth: 200 表示『大于等于200px寬度』穴亏。兩個(gè)屬性一起寫表示『并且』，比如：{minWidth: 200, maxHeight: 300} 表示『大于等于200px寬度重挑，并且小于等于300px高度』。
option：
media中的 option 既然是『原子 option』棠涮，理論上可以寫任何 option 的配置項(xiàng)谬哀。但是一般我們只寫跟布局定位相關(guān)的，例如截取上面例子中的一部分 query option：
media: [
...,
{
query: {
maxAspectRatio: 1 // 當(dāng)長寬比小于1時(shí)严肪。
},
option: {
legend: { // legend 放在底部中間史煎。
right: 'center',
bottom: 0,
orient: 'horizontal' // legend 橫向布局。
},
series: [{ // 兩個(gè)餅圖左右布局驳糯。
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}]
}
},
{
query: {
maxWidth: 500 // 當(dāng)容器寬度小于 500 時(shí)篇梭。
},
option: {
legend: {
right: 10, // legend 放置在右側(cè)中間。
top: '15%',
orient: 'vertical' // 縱向布局酝枢。
},
series: [{ // 兩個(gè)餅圖上下布局恬偷。
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '75%']
}]
}
},
...
]
多個(gè) query 被滿足時(shí)的優(yōu)先級(jí)：
注意，可以有多個(gè) query 同時(shí)被滿足帘睦，會(huì)都被 mergeOption袍患，定義在后的后被 merge（即優(yōu)先級(jí)更高）。
默認(rèn) query：
如果 media 中有某項(xiàng)不寫 query竣付，則表示『默認(rèn)值』诡延，即所有規(guī)則都不滿足時(shí)，采納這個(gè)option古胆。
容器大小實(shí)時(shí)變化時(shí)的注意事項(xiàng)：
- 在不少情況下肆良，并不需要容器DOM節(jié)點(diǎn)任意隨著拖拽變化大小，而是只是根據(jù)不同終端設(shè)置幾個(gè)典型尺寸。
- 但是如果容器DOM節(jié)點(diǎn)需要能任意隨著拖拽變化大小惹恃，那么目前使用時(shí)需要注意這件事：某個(gè)配置項(xiàng)夭谤，如果在某一個(gè)
query option中出現(xiàn)，那么在其他query option中也必須出現(xiàn)座舍，否則不能夠回歸到原來的狀態(tài)沮翔。（left/right/top/bottom/width/height不受這個(gè)限制。） - 『復(fù)合 option』 中的
media不支持 merge - 也就是說曲秉，當(dāng)?shù)诙ɑ蛉墒础⑺摹⑽?...）次
chart.setOption(rawOption)時(shí)承二，如果rawOption是復(fù)合option（即包含media列表）榆鼠，那么新的rawOption.media列表不會(huì)和老的media列表進(jìn)行 merge，而是簡單替代亥鸠。當(dāng)然妆够，rawOption.baseOption仍然會(huì)正常和老的 option 進(jìn)行merge。 - 其實(shí)负蚊，很少有場景需要使用『復(fù)合 option』來多次
setOption神妹，而我們推薦的做法是，使用 mediaQuery 時(shí)家妆，第一次setOption使用『復(fù)合 option』鸵荠，后面setOption時(shí)僅使用 『原子 option』，也就是僅僅用 setOption 來改變baseOption伤极。
