前言：
近年來，在數據服務的公司中，數據可視化越來越重要。隨着而來的，國內外正在如火如荼的開發各種在線js視圖展示框架。而百度的e-chart算是實用性較高且體驗最好的！今天閑來無事，便來玩玩~
echart自我介紹：
“基於Canvas，純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。”
1資源下載
下載路徑（http://echarts.baidu.com/build/echarts-2.2.7.zip）
2文件目錄說明
echart-2.2.7
-build js總文件夾（diss,src）
-doc 使用說明文檔
-extension 地圖相關拓展
-src js源碼細節
-test 測試
3 使用說明
解壓后，用瀏覽器打開文件'./doc/start.html'
4 實戰
step1:新建 echart-test.html 文件，為ECharts准備一個具備大小（寬高）的Dom。
直接調用在線的js,無需本地加載echart相關資源文件
step2:新建<script>標簽引入模塊化單文件echarts.js
step3:新建<script>標簽中為模塊加載器配置echarts和所需圖表的路徑（相對路徑為從當前頁面鏈接到echarts.js）
step4:編輯html，修改數值並保存，可以觀察到圖的實時變化（支持下載保存）
echart-test.html的完整html代碼
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ECharts</title> 5 </head> 6 <body> 7 <!-- 為ECharts准備一個具備大小（寬高）的Dom --> 8 <div id="main" style="height:400px"></div> 9 <!-- ECharts單文件引入 --> 10 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> 11 <script type="text/javascript"> 12 // 路徑配置 13 require.config({ 14 paths: { 15 echarts: 'http://echarts.baidu.com/build/dist' 16 } 17 }); 18 19 // 使用 20 require( 21 [ 22 'echarts', 23 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載 24 ], 25 function (ec) { 26 // 基於准備好的dom，初始化echarts圖表 27 var myChart = ec.init(document.getElementById('main')); 28 29 var option = { 30 tooltip: { 31 show: true 32 }, 33 legend: { 34 data:['銷量'] 35 }, 36 xAxis : [ 37 { 38 type : 'category', 39 data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] 40 } 41 ], 42 yAxis : [ 43 { 44 type : 'value' 45 } 46 ], 47 series : [ 48 { 49 "name":"銷量", 50 "type":"bar", 51 "data":[5, 20, 40, 10, 10, 20] 52 } 53 ] 54 }; 55 56 // 為echarts對象加載數據 57 myChart.setOption(option); 58 } 59 ); 60 </script> 61 </body>
結語：
以上實戰只是10分鍾的echart小demo,后續還將通過動態加載數據對接后台數據。盡請關注！