Echarts柱狀圖簡單應用

     在對比了HighCharts以後，由於版權問題，仍是決定在項目中採用Echarts來作圖表展現。

     Echarts更新速度很快，已經更新到Echarts3了，感受3的表現更炫、更酷，聽說性能更好，但考慮到項目的總體風格，仍是採用Echarts2的版本。

　  在項目正式開始以前，作一個簡單的Demo，結合EasyUI的Grid呈現一個柱狀圖，後期再考慮對Echarts的js進行二次封裝。

     Echarts的使用跟HighCharts很相似，以前基於HighCharts作了一個Demo以後，熟悉了這類框架的基本用法。

     官方提供的Demo和說明文檔很是詳細，照着文檔和demo能夠很輕鬆的作出想要的各類圖形。

     園子裏也有熱心的朋友用.net作了封裝，方便.net用戶更好的使用Echarts。博客地址：echarts .NET類庫開源

 　 簡單三步：

　　第一步，添加Echarts引用

 <script type="text/javascript" src="../echart/echarts.js"></script>

      第二步，添加一個容器

 <div id="mainMap" style="height: 400px; width: 55%; float: right;"></div>

      第三步，js實現，後端用.net的handler作json數據輸出

  1 <script type="text/javascript">  
  2 function getData(keyWord) {//Ajax方式動態獲取json格式數據
  3                 $.ajax({
  4                     type: "get",
  5                     dataType: "json",
  6                     url: "xxxxx.ashx",
  7                     data: { t: 'm', keyWord: keyWord },
  8                     success: function (data) {
  9                         if (data.length == 0) {
 10                             alert("無數據！");
 11                         } else {
 12                             DrawBar(data, "mainMap")
 13                         }
 14                     },
 15                     error: function () {
 16                         alert("加載數據失敗,請重試！");
 17                     }
 18                 });
 19             }
 20  function DrawBar(data, id) {
 21                 var xData = [];
 22                 var datas = [];
 23                 var WEIGHT = [];
 24                 var GROSSWEIGHT = []
 25                 for (var i = 0; i < data.length; i++) {//將json格式轉換爲Echarts的數組格式
 26                     xData.push(data[i].MODIFYON || ",");
 27                     datas.push({ name: data[i].MODIFYON, value: data[i].SUM || 0 });
 28                     WEIGHT.push({ name: data[i].WEIGHT, value: data[i].WEIGHT || 0 });
 29                     GROSSWEIGHT.push({ name: data[i].GROSSWEIGHT, value: data[i].GROSSWEIGHT || 0 });
 30                 }
 31                 // 路徑配置
 32                 require.config({
 33                     packages: [{
 34                         name: 'echarts',
 35                         location: '/echart/echarts/src',
 36                         main: 'echarts'
 37                     }]
 38                 });
 39                 // 按需加載圖形
 40                 require(
 41                     [
 42                         'echarts',
 43                         'echarts/chart/line',
 44                         'echarts/chart/gauge',
 45                         'echarts/chart/bar'
 46                     ],
 47                     function (ec) {
 48                         // 找到div容器，初始化echarts圖表
 49                         var myChart = ec.init(document.getElementById(id));
 50                         var option = {
 51                             tooltip: {
 52                                 show: true
 53                             },
 54                             title: {
 55                                 text: '每日過磅數據',
 56                                 subtext: '我是副標題'
 57                             },
 58                             legend: {
 59                                 data: ['總件數', '總淨重', '總毛重']
 60                             },
 61                             toolbox: {
 62                                 show: true,
 63                                 feature: {
 64                                     dataView: { show: true, readOnly: false },
 65                                     magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
 66                                     restore: { show: true },
 67                                     saveAsImage: { show: true }
 68                                 }
 69                             },
 70                             xAxis: [
 71                                 {
 72                                     type: 'category',
 73                                     data: xData
 74                                 }
 75                             ],
 76                             yAxis: [
 77                                 {
 78                                     type: 'value'
 79                                 }
 80                             ],
 81                             series: [
 82                                 {
 83                                     "name": "總件數",
 84                                     "type": "bar",
 85                                     "data": datas
 86                                 }, {
 87                                     "name": "總淨重",
 88                                     "type": "bar",
 89                                     "data": WEIGHT
 90                                 }, {
 91                                     "name": "總毛重",
 92                                     "type": "bar",
 93                                     "data": GROSSWEIGHT
 94                                 }
 95                             ]
 96                         };
 97                         myChart.setOption(option);
 98                     }
 99                 );
100             }
101 </script>

　　實現的效果圖：