首先，你需要下載ECharts所需的文件，我使用的是echarts-2.0.2版本，點擊這里下載：echarts-2.0.2
下載解壓后，下面有一系列文件夾，其中build中有我們需要引入的JS文件，doc里面是ECharts的API文檔以及實例。
使用ECharts有兩種方式，一種是通過模塊化單文件引入的方式，另一種是通過標簽式單文件引入。我們這里使用標簽式單文件引入。
一、第一個ECharts報表
首先新建一個echarts.html文件。為ECharts准備一個具備大小（寬高）的Dom。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> </body>
接着新建<script>標簽引入echarts-plain.js
<!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/echarts-plain.js"></script> </body>
注：這里引入的是百度官網的文件，你可以將其替換成你自己下載的ECharts build文件夾下的JS文件
接着新建<script>標簽，使用全局變量echarts初始化圖表並驅動圖表的生成
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/echarts-plain.js"></script> 11 <script type="text/javascript"> 12 // 基於准備好的dom，初始化echarts圖表 13 var myChart = echarts.init(document.getElementById('main')); 14 15 var option = { 16 tooltip: { 17 show: true 18 }, 19 legend: { 20 data:['銷量'] 21 }, 22 xAxis : [ 23 { 24 type : 'category', 25 data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] 26 } 27 ], 28 yAxis : [ 29 { 30 type : 'value' 31 } 32 ], 33 series : [ 34 { 35 "name":"銷量", 36 "type":"bar", 37 "data":[5, 20, 40, 10, 10, 20] 38 } 39 ] 40 }; 41 42 // 為echarts對象加載數據 43 myChart.setOption(option); 44 </script> 45 </body>
瀏覽器中打開echarts.html，就可看到以下效果：
二、ECharts代碼的結構
1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>ECharts</title> 5 </head> 6 <body> 7 <!-- 1.為ECharts准備一個具備大小（寬高）的Dom --> 8 <div id="main" style="width:800px;height:400px;margin: 0 auto;" ></div> 9 <!-- 2.ECharts單文件引入 --> 10 <script src="js/echarts-plain.js"></script> 11 12 <script type="text/javascript"> 13 <!-- 3.基於准備好的dom，初始化echarts圖表 --> 14 var myChart = echarts.init(document.getElementById('main')); 15 16 <!-- 4.Option參數 --> 17 <!-- 省略Option代碼 -->
18 <!-- 5.加載數據 --> 19 myChart.setOption(option); 20 </script> 21 </body>
可以看到，使用ECharts最簡單的只有5個步驟。使用不同的報表，那么只需要改變第4步（16行）中Option的參數即可。
而如果你想引用一些更加高級的功能圖形，比如說地圖，那么你可能還需要引入另外一個擁有更加豐富資源的JS文件（改變第2步引入的JS文件）。至於引入哪個JS文件，你可以參考下面對各個JS的說明：
echarts-plain.js : 經過壓縮，包含除地圖外的全部圖表
echarts-plain-original.js : 未壓縮，可用於調試，包含除地圖外的全部圖表
echarts-plain-map.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖數據
echarts-plain-original-map.js : 未壓縮，可用於調試，全圖表，包含world，china以及34個省市級地圖數據
上面的JS都可以在echart下載目錄的build目錄下找到。
三、Option參數
在ECharts里，所有的參數都是通過Option進行設置的。一般來說，Option里最常用的參數有下面幾個：
title ：圖形的標題
tooltip ：鼠標移上去的提示
legend ：圖例
toolbox ：工具箱
calculable：是否可拖動計算（true 或者 false）
xAxis：X軸
yAyis：Y軸
Series：數據集（系列）
他們在圖形中的位置如圖所示：
在EChats中最重要的就是Option中的參數，各種圖形的變化以及數據都是在Option進行設置的。