一、簡介：
1、繪制數據圖表，有了它，想要網頁上繪制個折線圖、柱狀圖，從此easy。
2、使用這個百度的echarts.js插件，是通過把圖片繪制在canvas上在顯示在頁面上。
官網對echarts的簡介：
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。
二、兩種引入文件的方式
echarts插件下載地址：
http://echarts.baidu.com/build/echarts-2.2.0.zip
https://codeload.github.com/ecomfe/echarts/zip/2.2.0
1、標簽式單文件引入
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts單文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> <script type="text/javascript"> // 基於准備好的dom，初始化echarts圖表 var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['銷量'] }, xAxis : [ { type : 'category', data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"銷量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 為echarts對象加載數據 myChart.setOption(option); </script> </body>
2、模塊化單文件引入
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts單文件引入 --> <script src="js/dist/echarts.js"></script> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: 'js/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/map' // 使用柱狀圖就加載bar模塊，按需加載 ], function (ec) { // 基於准備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); option = { tooltip : { trigger: 'item', formatter: '{b}' }, series : [ { name: '中國', type: 'map', mapType: 'china', selectedMode : 'multiple', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name:'廣東',selected:true} ] } ] }; var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){ var selected = param.selected; var str = '當前選擇： '; for (var p in selected) { if (selected[p]) { str += p + ' '; } } document.getElementById('wrong-message').innerHTML = str; }) /*var option = { tooltip: { show: true }, legend: { data:['銷量'] }, xAxis : [ { type : 'category', data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"銷量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] };*/ // 為echarts對象加載數據 myChart.setOption(option); } ); </script> </body>
方法二的效果圖就是全國地圖的效果，點擊當前省份，背景顏色切換為黃色，如下：
我的文件目錄是這樣的：
so，在配置時，記得配置好路徑！！！！
關於這兩種引入方式，
1、肯定的，如果是用標簽式的引入，就跟我們使用jquery的時候一樣，在使用之前先引入jquery類庫。然后就開始用了。
2、標簽式引入，是引入了整個echarts這個插件，總共大小是899KB,壓縮后的jquery大小才有90.9KB，~~~~(>_<)~~~~ 。這個插件實在大！！
3、模塊化單文件引入，這是引入方式是一個基礎js+你想要的那個模塊，比如echarts.js+map.js，一個基礎js的大小是341KB，一個模塊是最小是k.js，5.15KB，最大模塊是map.js，437KB，如果項目里要繪制的圖不是很多種，使用模塊化更節約資源。
三、筆記
標簽式引入文件的步驟：
1、初始化echarts對象
var myChart = echarts.init(document.getElementById('main'));
2、做好配置option
option={
}
3、加載數據到echarts對象
myChart.setOption(option)
===========================================================
關於幾個常用到的參數：
title：
標題，在左上方
ps：跟subtext都可以通過x：參數進行更改
subtext：
副標題，在標題下方
legen:
圖例，在頭部的中間
boundaryGap:true
類目起始和結束兩端空白策略
type:line：
圖的類型,折線圖
series:[{type:line}]
tooltip：
鼠標懸浮時的提示框
tooltip:{trigger:'axis'}
toolbox:
工具箱，在右上方，可不要
calculable : true：
拖拽重計算，就是這個柱形可以用鼠標拖動。
xAxis:
設置橫坐標
yAxis：
設置縱坐標
series：
最重要，生成圖表內容的。
markPoint：
繪制點，包括最大小值，以及轉折點
markLine：
繪制直線，平均值線
splitLine : false
分割線
grid:設置網格
grid : {
borderWidth : 0, /* 兩邊的border=0 */
x :'55px', /* 通過修改xy x2 y2更改折線圖的大小 */
y : '25px',
x2 : '20px',
y2 : '20px',
},
trigger:item/axis /* 觸發提示框顯示的樣式 */
tooltip : {
trigger: 'item'
},
itemStyle: /* 要設置拐點的圖案跟顏色也是在這里設置，line跟圈圈的顏色就直接設置color */
itemStyle: {
normal: {
color : '#03a1e8',
lineStyle: {
borderColor : '#03a1e8'
},
label : { // 顯示此刻數據
show: true,
textStyle : {
color : '#555',
fontSize : '12'
}
},
},
}
================================================
Last，API文檔里面有好多參數，我個人比較喜歡閱讀里面說明參數的圖解，看起來更加簡單明了，印象深刻。例如這圖：
一看就知道要如何去掉標尺設置axisTick參數，要去除橫豎的線是設置對應的x、y軸上得splitLine參數。
可設置參數甚多，閱讀API文檔是最好的idea~