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;  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>

　　实现的效果图：