本文介紹一個echarts工具類EChart.js，用來制作統計圖表,基於echarts3。
一、工具類特性如下：
- 包含柱狀圖、折線圖和餅圖，可以實現這三類統計圖之間的切換；
- 支持標題和副標題；
- 支持圖例；
- 支持保存為圖片；
- 支持x軸，y軸名稱；
- 支持tooltip，並且數據中帶單位；
- 支持顯示數據標注；
- 支持x軸數據縮放；
注：構建echarts腳本的時候，需要包含柱狀圖、餅狀圖、折線圖、直角坐標系、標題、圖例、提示框、標注、數據區域縮放、工具欄組件。
二、接口說明如下：
- containerID：html容器的id【string】；
- title：圖表標題【string】；
- subTitle：圖表子標題【string】；
- xName：x軸名稱【string】；
- yName：y軸名稱【string】；
- unit：y軸單位【string】；
- click：圖表click事件【function】；
- xViewRange：x軸顯示范圍【[min,max]】；
- yViewRange：y軸顯示范圍【[min,max]】；
- data：圖表數據；
- function：show(p_type):顯示圖表。p_type【string】,值為"bar","line","pie"中的一個值；
圖表數據格式示例如下：
[{name:"個數",values:
{
"a":1,
"b":2
}},{name:"面積",values:
{
"a":0.1,
"b":0.2
}}
]
說明：
- 數據為數組；
- 數據子項：
name：數據名稱；
values：數據對象，其中key為數據名稱；值為數據值；
三、示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <script type="text/javascript" src="/jslib/echarts/echarts3.min.js"></script> 5 <script type="text/javascript" src="/jslib/echarts/EChart.js"></script> 6 </head> 7 <body> 8 9 <!-- 為ECharts准備一個具備大小（寬高）的Dom --> 10 <div id="main" style="height:400px"></div> 11 12 </body> 13 </html>
頁面引入echarts庫echarts3.min.js和工具類EChart.js，在body中為echarts准備一個容器<div id="main"></div>
1 var myChart; 2 $(document).ready(function(){ 3 4 var data=[{name:"2014年銷量",values: 5 { // yfileds[0] 6 "襯衫":1, 7 "羊毛衫":2, 8 "雪紡衫":3, 9 "褲子":4, 10 "高跟鞋":5, 11 "襪子":6 12 }},{name:"2015年銷量",values: 13 { // yfileds[1] 14 "襯衫":2, 15 "羊毛衫":3, 16 "雪紡衫":4, 17 "褲子":5, 18 "高跟鞋":6, 19 "襪子":7 20 }},{name:"2016年銷量",values: 21 { // yfileds[1] 22 "襯衫":1, 23 "羊毛衫":5, 24 "雪紡衫":2, 25 "褲子":6, 26 "高跟鞋":7, 27 "襪子":6 28 }} 29 ]; 30 31 // 基於准備好的dom，初始化echarts實例 32 myChart = new EChart({ 33 title:"各類服裝年度銷量統計", 34 subTitle:"2014-2016", 35 yName:"銷量", 36 xName:"服裝類型", 37 containerID:"main", 38 data:data, 39 unit:"套", 40 click:function(p_params){ 41 alert(p_params.name); 42 }, 43 xViewRange:[0,24] 44 }); 45 46 myChart.show("bar"); 47 });
效果圖：
