很幸運能夠給大家分享我對echarts的見解，在一些大型互聯網公司面試時都會問到會使用echarts么？ 今天在做項目時有這個需求，有幸學習echarts。
二、echarts.js的優勢與不足
優點：
1、echarts.js容易使用：echarts.js的官方文檔比較詳細，而且官網中提供大量的使用示例供大家使用
2、echarts.js支持按需求打包： echarts.js官網提供了在線構建的工具，可以在線構建項目時，選擇項目所需要使用到的模塊，從而達到減小JS文件的體積
3、echarts.js開源
4、支持中國地圖功能： 其他的一些框架中是沒有的
echarts.js缺點：
1、echarts.js的體積較大： 基礎的echarts.js都要400K左右，相對於D3.js和hightcharts.js來說都是比較大的（D3.js限制了開發時間，其開發時間較短；hightcharts.js公司使用需要付費，個人使用是免費的）
2、echarts.js的可定制性差
三、echarts的應用
首先，echarts中的方法較多應該對其進行分類的
1、1、首先echarts的圖形化呈現主要是通過配置方法來實現的(setOption),然后是對圖形標簽進行初始化，最后把配置方法(setOption)賦值到初始化圖形中，詳細的配置文件請戳這里，這里我就來介紹一下關於配置文件的學習的經驗之談，比較常見的配置大致如下圖：
3.1 echarts.js入門基礎小項目1--demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>echarts繪制簡單的圖</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="height: 600px;width: 800px;margin: 10px auto;"></div>
</body>
<script type="text/javascript">
// 初始化echarts實例
var container = document.getElementById('container');
var myEcharts = echarts.init(container);
// 指定圖表的配置項和數據
option = {
title:{
text:'Echarts入門'
},
tooltip:{
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(245, 245, 245, 0.8)'
},
legend:{
data:['銷量']
},
xAxis:{
data:['aaa','bbbb','ddd','gdgd','dsxsd','aas','ss']
},
yAxis:{},
series:[{
name:'銷量',
type: 'bar',
data:[10,3,8,20,38,10,22]
}]
};
myEcharts.setOption(option);
</script>
</html>
運行圖：
注意事項：在使用echarts.js的時候一定要配置xAxis,yAxis,series這三個參數，如果是不想設置的話也要初始化可以將其設置為空JSON就可以了，要不然會出項報錯，同時要保證在echarts.init之前的對象是有寬高的，要不然也會出現錯誤
3.2 echarts.js多系列綜合使用demo
在講解這個案例之前，首先我們來假設一個命題，假設要統計一個商店一周的購買金額和一周的銷售金額，其中的購買金額用柱狀圖表示，銷售金額用折線圖表示，然后還要標出一周中最大值和最小值，同時還要求出銷售和購買的平均數，購買金額分別是[200,312,431,241,175,275,369]，銷售金額[321,432,543,376,286,298,400]
這個問題其實也不是很難，想一想，其實也就是一個把多個 系列圖表應用到一個畫布上面的過程，為了簡短文章的篇幅，所以把不貼出全部的代碼，僅貼出主要的其中關鍵的代碼，代碼如下：
option = {
title:{
text:'Echarts入門'
},
tooltip:{
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(245, 245, 245, 0.8)'
},
legend:{
data:['銷量']
},
xAxis:{
data:['aaa','bbbb','ddd','gdgd','dsxsd','aas','ss']
},
yAxis:{},
series:[{
//series指定圖形的類型
name:'購買金額',
type:'bar',
data:[200,312,431,241,175,275,369],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值',itemStyle:{
normal:{
color:'green'
}
}}
]
}
},
{
name:'銷售金額',
type:'line',
data:[321,432,543,376,286,298,400],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值',itemStyle:{
normal:{
color:'blue'
}
}}
]
}
}]
};
3.3 echarts.js響應式實現
echarts響應式在echarts官網上面的介紹比較詳細，這里原理跟CSS3的媒體查詢有點類似，但是echarts.js的響應除了支持媒體查詢的在不同情況下面的相應還支持，根據長寬比來相應的方法，但是在官方文檔中還是有一點缺陷的，比如：一個是案例中的響應式沒有涉及到處理series之外的響應，另外一個是按照DEMO中去做，會發現每次都要刷新頁面才能出現響應的結果，所以下面我將寫一個簡單的案例來解決這些問題，數據樣式與上面demo2的例子一樣
這里就把所有的JS代碼貼出來：
var echart=echarts.init(document.getElementById('main1'));
var option={
baseOption:{
title:{
text:'模擬商店一周銷售情況',
subtext:'虛擬數據'
},
legend:{
data:['購買金額','銷售金額']
},
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
},
tooltip:{
show:true,
formatter:'系列名:{a}<br />類目:{b}<br />數值:{c}'
},
series:[{
name:'購買金額',
type:'bar',
data:[200,312,431,241,175,275,369],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值',itemStyle:{
normal:{
color:'green'
}
}}
]
}
},{
name:'銷售金額',
type:'line',
data:[321,432,543,376,286,298,400],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值',itemStyle:{
normal:{
color:'blue'
}
}}
]
}
}]
},
media:[
{
//小與1000像素時候響應
query:{
maxWidth:1000
},
option:{
title:{
show:true,
text:'測試一下'
}
}
}
]
};
//每次窗口大小改變的時候都會觸發onresize事件，這個時候我們將echarts對象的尺寸賦值給窗口的大小這個屬性，從而實現圖表對象與窗口對象的尺寸一致的情況
window.onresize = echart.resize;
echart.setOption(option);
3.4 echarts.js通過detaset管理數據的demo
option = { legend: {}, tooltip: {}, dataset: { // 提供一份數據。 source: [ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1] ] }, // 聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應到 dataset 第一列。 xAxis: {type: 'category'}, // 聲明一個 Y 軸，數值軸。 yAxis: {}, // 聲明多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列。 series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] }series中每個系列通過 type 決定自己的圖表類型：
series: [ {type: 'line'},//line折線圖是用折線將各個數據點標志連接起來的圖表，用於展現數據的變化趨勢 {type: 'bar'},//柱狀/條形圖,柱狀/條形圖 通過 柱形的高度/條形的寬度 來表現數據的大小，用於有至少一個類目軸或時間軸的直角坐標系上。 {type: 'pie'}//餅圖,餅圖主要用於表現不同類目的數據在總和中的占比。每個的弧度表示數據數量的比例。 ]type的效果圖如下：
1）type：line；為折線圖時
2）type：bar；為柱狀或者條形圖時
3）type：pie；為餅圖時，
4、tooltip提示框組件。
觸發類型：
'item'： 數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
'axis'： 坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
'none'：什么都不觸發
常見的用法如下：
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
}
5、echarts的API交互
這里我們就來解釋一下echarts對象里面主要是包括一些銷毀對象(dispose)，注冊地圖(registerMap)，初始化對象(echarts.init),關聯對象(connect)，屬於全局屬性的設置，echartsInstance這個是包含echarts圖中的某些屬性的獲取或者設置，獲取寬高(getWidth、getHeight),獲取配置(getOption)，設置配置(setOption)等操作action和events這兩個操作在上圖中已經很明白了，所以就不多做解釋，具體的使用方法要與業務進行掛鈎才有意義，所以在這里就不提供DEMO了，我相信大家看一下文檔都能夠看懂個究竟。
如果不想配置時可以是 空對象 寫法為： tooltip:{}更新
關於echarts.js的內容會不斷更新，
echarts.js的api官網：http://echarts.baidu.com/option.html