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;width: 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");
        }
    }
});