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數據輸出

<script type="text/javascript">  
function getData(keyWord) {//Ajax方式動態獲取json格式數據
                $.ajax({
                    type: "get",
                    dataType: "json",
                    url: "xxxxx.ashx",
                    data: { t: 'm', keyWord: keyWord },
                    success: function (data) {
                        if (data.length == 0) {
                            alert("無數據！");
                        } else {
                            DrawBar(data, "mainMap")
                        }
                    },
                    error: function () {
                        alert("加載數據失敗,請重試！");
                    }
                });
            }
 function DrawBar(data, id) {
                var xData = [];
                var datas = [];
                var WEIGHT = [];
                var GROSSWEIGHT = []
                for (var i = 0; i < data.length; i++) {//將json格式轉換為Echarts的數組格式
                    xData.push(data[i].MODIFYON || ",");
                    datas.push({ name: data[i].MODIFYON, value: data[i].SUM || 0 });
                    WEIGHT.push({ name: data[i].WEIGHT, value: data[i].WEIGHT || 0 });
                    GROSSWEIGHT.push({ name: data[i].GROSSWEIGHT, value: data[i].GROSSWEIGHT || 0 });
                }
                // 路徑配置
                require.config({
                    packages: [{
                        name: 'echarts',
                        location: '/echart/echarts/src',
                        main: 'echarts'
                    }]
                });
                // 按需加載圖形
                require(
                    [
                        'echarts',
                        'echarts/chart/line',
                        'echarts/chart/gauge',
                        'echarts/chart/bar'
                    ],
                    function (ec) {
                        // 找到div容器，初始化echarts圖表
                        var myChart = ec.init(document.getElementById(id));
                        var option = {
                            tooltip: {
                                show: true
                            },
                            title: {
                                text: '每日過磅數據',
                                subtext: '我是副標題'
                            },
                            legend: {
                                data: ['總件數', '總凈重', '總毛重']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: xData
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    "name": "總件數",
                                    "type": "bar",
                                    "data": datas
                                }, {
                                    "name": "總凈重",
                                    "type": "bar",
                                    "data": WEIGHT
                                }, {
                                    "name": "總毛重",
                                    "type": "bar",
                                    "data": GROSSWEIGHT
                                }
                            ]
                        };
                        myChart.setOption(option);
                    }
                );
            }
</script>

　　實現的效果圖：