Vue 柱状图

 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目，总体上来说有这样的一些优点

1、echarts.js容易使用

echarts.js的官方文档比较详细，而且官网中提供大量的使用示例供大家使用

2、echarts.js支持按需求打包

echarts.js官网提供了在线构建的工具，可以在线构建项目时，选择项目所需要使用到的模块，从而达到减小JS文件的体积

3、echarts.js开源

4、支持中国地图功能

这个在其他的一些框架中是没有的，所以为这个功能点个赞

但是echarts.js也存在着一些不好的地方，比如说：

1、echarts.js的体积较大

一个基础的echarts.js都要400K左右，相对于D3.js和hightcharts.js来说都是比较大的

2、echarts.js的可定制性差

说到echarts.js的定制性差，其实不止是包括echarts.js，hightcharts.js也是如此，因为这一类型的数据可视化框架主要是高度的进行分装，所以你在使用的时候只需要设置一下配置就可以了，但是如果是出现了要绘制配置中不支持的图表怎么办，那么你就只能放弃，尝试着使用其他的框架了

总的来说:从大的方向上面来看，echarts.js还是值得去了解学习使用的，因为echarts.js得到了百度团队的重视，在git上面的更新也是比较的频繁，所以不会出现一些比较严重的bug之类的，最后这款框架一点就是框架的配置文件相当的详细，但是交互API文档虽然有说明，但是还是没有示例来举证，这个可能就是我认为的一个不足之处吧

一、引入js

<script src="${rc.contextPath}/statics/plugins/echarts/echarts.min.js"></script>

二、创建显示区域

<div id="main" style="float:left; 600px;height:400px;"></div>

三、定义vue和柱状图

var vm = new Vue({
    el: '#rrapp',
    data: {
        names : [],
        nums: [],
        datas:[],
        q: {
            startTime:'',
            endTime:''
        },
        barChart:echarts.init(document.getElementById('main')),
    },
    methods: {
  }
});

四、初始化echarts

init: function(){
            vm.names = [];
            vm.nums = [];
            vm.datas = [];

            // 显示标题，图例和空的坐标轴
            vm.barChart.setOption({
                tooltip: {},
                xAxis: {
                    type : 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '事件类型分析',
                    type: 'bar',
                    barWidth: '20%',
                    data: [],
                    //配置样式
                    itemStyle: {
                        //通常情况下：
                        normal:{
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params){
                                var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589'
                                    ,'#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B'];
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });
        },

五、获取后台数据的方法

getSummary: function () {
            Ajax.request({
                url: "../adversetype/sunmmary/quaryAdverseType",
                async: true,
                params : JSON.stringify(vm.q),
                type: "POST",
                contentType: "application/json",
                successCallback: function (r) {
                    if(r){
                        if(r.list.length==0){
                            alert("无数据");
                            vm.reloadSearch();
                        }else{
                            for(var i=0;i<r.list.length;i++){
                                vm.names.push(r.list[i].adverseType);
                                vm.nums.push(r.list[i].count);
                                vm.datas.push({name:r.list[i].adverseType,value:r.list[i].count});
                            }
                            vm.barChart.hideLoading();    //隐藏加载动画
                            vm.barChart.setOption({        //加载数据图表
                                xAxis: {
                                    data: vm.names
                                },
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '事件类型分析',
                                    data: vm.nums
                                }]
                            });
                        }
                    }
                }
            });
        },

整体js

$(function () {
    vm.init();
    vm.barChart.showLoading();
    vm.getSummary();
});

var vm = new Vue({
    el: '#rrapp',
    data: {
        names : [],
        nums: [],
        datas:[],
        q: {
            startTime:'',
            endTime:''
        },
        barChart:echarts.init(document.getElementById('main')),
    },
    methods: {
        getSummary: function () {
            Ajax.request({
                url: "../adversetype/sunmmary/quaryAdverseType",
                async: true,
                params : JSON.stringify(vm.q),
                type: "POST",
                contentType: "application/json",
                successCallback: function (r) {
                    if(r){
                        if(r.list.length==0){
                            alert("无数据");
                            vm.reloadSearch();
                        }else{
                            for(var i=0;i<r.list.length;i++){
                                vm.names.push(r.list[i].adverseType);
                                vm.nums.push(r.list[i].count);
                                vm.datas.push({name:r.list[i].adverseType,value:r.list[i].count});
                            }
                            vm.barChart.hideLoading();    //隐藏加载动画
                            vm.barChart.setOption({        //加载数据图表
                                xAxis: {
                                    data: vm.names
                                },
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '事件类型分析',
                                    data: vm.nums
                                }]
                            });
                        }
                    }
                }
            });
        },
        init: function(){
            vm.names = [];
            vm.nums = [];
            vm.datas = [];

            // 显示标题，图例和空的坐标轴
            vm.barChart.setOption({
                tooltip: {},
                xAxis: {
                    type : 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '事件类型分析',
                    type: 'bar',
                    barWidth: '20%',
                    data: [],
                    //配置样式
                    itemStyle: {
                        //通常情况下：
                        normal:{
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params){
                                var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589'
                                    ,'#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B'];
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });
        },
        reloadSearch: function() {
            vm.q = {
                searchType: '',
                startTime: '',
                endTime: '',
                auditStatus:''
            }
            vm.init();
            vm.getSummary();

            vm.reload();
        },
        query: function(){
            vm.init();
            vm.getSummary();
        },
        reload: function (event) {
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {'searchType': vm.q.searchType,'startTime':vm.q.startTime,'endTime':vm.q.endTime,'status':vm.q.status},
                page: page
            }).trigger("reloadGrid");
        }
    }
});