最開始接觸到Echarts是在去年接私單的時(shí)候遇到搏屑，一使用芬膝，發(fā)現(xiàn)Echarts大有研究之處慧起。恰逢工作里負(fù)責(zé)的兩個(gè)項(xiàng)目均使用了大量的Echarts惩淳，現(xiàn)在就自己當(dāng)前做過(guò)的一些圖表做一些簡(jiǎn)單的總結(jié)疹吃，一來(lái)可以鞏固加深自己的印象蹦疑，二來(lái)其實(shí)是想養(yǎng)成一個(gè)總結(jié)的習(xí)慣。這樣比較能在自我規(guī)劃上有一個(gè)參考萨驶。
Echarts不難找歉摧，百度搜就能查到官網(wǎng)地址：echarts.baidu.com。 它主要是一個(gè)純圖表的JS庫(kù)腔呜，基本上能想到的圖表叁温，這里能到找到。并且可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上核畴，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11膝但，Chrome，F(xiàn)irefox谤草，Safari等）跟束。因?yàn)樗闹庇^性高、交互性強(qiáng)丑孩，還有可視化的效果體現(xiàn)冀宴，運(yùn)用最多的地方便是數(shù)據(jù)統(tǒng)計(jì)的模塊。官網(wǎng)下載界面提供了幾種版本的下載温学，便于以后的長(zhǎng)期使用略贮， 我建議下載完整版的。
使用也非常簡(jiǎn)單，下載完成后逃延，先引入Echarts的JS文件览妖，引入后，需要為圖表設(shè)置一個(gè)DOM容器真友，并且設(shè)置容器的寬度和高度（切忌一定要設(shè)置高度黄痪，博主我剛開始用的時(shí)候經(jīng)常忘記設(shè)置高度，當(dāng)然你們比較聰明盔然，不會(huì)忘記）。然后通過(guò)echarts.init方法初始化一個(gè)echarts實(shí)例是嗜，并通過(guò)setOption生成一個(gè)簡(jiǎn)單的圖表愈案。切忌，一定要為圖表的容器設(shè)置一個(gè)高度鹅搪，不然圖表無(wú)法顯示站绪。完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts實(shí)例</title>
//引入Echarts.js文件
<script src="echarts.min.js" />
<body>
//為圖表設(shè)置一個(gè)有寬高度的容器
<div id="main" style="height: 240px;width: 100px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById("main"));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : {? ? ? ? ? ? // 坐標(biāo)軸指示器丽柿，坐標(biāo)軸觸發(fā)有效
type : 'shadow'? ? ? ? // 默認(rèn)為直線恢准，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接訪問(wèn)',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
//使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption("option");?
</script>
</body>
</head>
</html>
這樣甫题，一個(gè)圖表就完成了：（當(dāng)然馁筐，還有很多效果需要參考文檔來(lái)完善）
當(dāng)一個(gè)頁(yè)面需要多個(gè)圖表的時(shí)候，只需要參照以上規(guī)范坠非，重新定義myChart和option敏沉，例如：
var mapChart = echarts.init(document.getElementById("map"));
var mapoption = {
......
}
mapChart.setOption("mapoption");
關(guān)于圖表里的交互事件，參考Echarts官網(wǎng)的文檔就可以找到炎码。
使用Echarts總結(jié)：多看文檔盟迟，多練！基本上所有的功能和展示效果都能通過(guò)文檔潦闲，結(jié)合自身項(xiàng)目需要完美實(shí)現(xiàn)攒菠。剩余不懂的，當(dāng)然是問(wèn)度娘啦~~~~
后面會(huì)詳細(xì)講解Echarts里的地圖
