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