簡介：
?ECharts是百度開發的一個國內比較常用的網頁圖表工具，也算是它旗下不可多得的優秀工具之一。如果你看過其它的js圖表工具就可以知道這玩意的強大之處了，相比其它xxChart，ECharts提供了基本上最完善的圖表類型模板，api接口和配置項，其次，它用起來比較方便，現成的模板非常易于使用，如果不需要一些高級特性，那么只需要一點前端知識就能完成數據的可視化。
參考：
html及javascript
如果你完全不了解html和javascript的相關內容，有那么一些網站可以參考：
?W3Cschool
?廖雪峰的官網
這些或許并不是最好的參考，但可以作為方便的隨時在手邊的教程來使用。
那就開始吧：
第一步，引入ECharts：
?echars的引入十分簡單，只需要在html中嵌入即可：
<!DOCTYPE html>
<html>
<head>
<script src="echarts.min.js"></script>
</head>
</html>
echarts.min.js從官網下載
此時echarts.min.js保存在html文件同目錄下
如果不想在本地保存echart.js文件，可以采用cdn引入：
<script src="echarts.min.js"></script>
改為
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
之后就可以開始進入echarts的世界了
第二步，生成echarts對象：
?要創建圖表首先要給圖表一個安置的空間，所以可以在body內嵌入一個空的<div>標簽，賦值一個id，以用來存放圖表對象，當然如果有多個圖表那可以創建多個標簽。參考官方的初始化方法，使用echarts.init(node)創建echarts對象，完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="container" style="height: 100%"></div>
<script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
</script>
</body>
</html>
這個myChart就是重點關注對象，之后的幾乎所有圖表方法都跟這玩意有關。
第三步，設置配置項
?echarts的需要通過一個option對象來進行配置，詳細配置項見官網說明文檔
?以折線圖為例，option的形式類似于這樣：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
其中series是數據系列，可以有多個，在這個折線圖中只設置了一個
至于xAxis和yAxis是echarts提供的折線圖配置項，要知道所有的可設置項可查看官方文檔
第四步，載入option:
?如果要載入option，只需要調用setOption()就好了
myChart.setOption(option, true);
其中第二個參數為[notMerge]，當設置為false時，如果更新數據將會合并新舊數據
最后上一個完整版：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="echarts.min.js"></script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
myChart.setOption(option, true);
</script>
</body>
</html>
?
常用的option配置項和對象方法
常用的mychart對象方法
myChart.showLoading(LoadingOption);
myChart.hideLoading();
添加showLoading()到加載數據之前可以顯示一個Loading的界面，防止加載時間過長，hideLoading()清除加載頁面
mychart.getOption();
獲取option對象的克隆版本
mychart.dispose()
mychart.clear();
前者為釋放圖表，釋放后不可在使用
后者為清空圖表內容，清空后可再添加內容
?
常用的配置項
圖例
legend: [{
data: categories.map(function (a) {
return a.name;
})，
selected: {
'系列1': true,
// 不選中'系列2'
'系列2': false
}
}],
因為原始數據不一定符合要求，所以data數據常常使用map和回調函數返回一個字符串數組
縮放
dataZoom: [
{ // 第一個 dataZoom 組件
radiusAxisIndex: [0, 2] // 表示這個 dataZoom 組件控制 第一個 和 第三個 radiusAxis
}]
dataZoom控制數據的縮放
以及最重要的
series:[{...},{...}]
series中包含了大量已有圖表類型的配置項，具體內容參考配置項文檔
?
異步加載數據
模板中常用的異步加載數據類型有json和圖表類型用的gexf，有關gexf格式的詳情可以看這里
為了方便起見，異步加載數據首先導入Jquery
<script type="text/javascript" src="jquery.js"></script>
加載gexf文件要先加載echarts的dataTool庫
<script type="text/javascript" src="dataTool.min.js"></script>
$.get('data.gexf',function(xml){
var graph = echarts.dataTool.gexf.parse(xml);//通過dataTool解析gexf
}),
其中graph對象帶有gexf中的節點信息
于是調用起來就非常方便了：
對于關系圖，我們可以這樣
series : [
{
name: 'graph',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links
}
加載json文件同理：
$.get('data.json',function(data){
data.nodes;//節點
data.links; //邊
})