正文
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: ,
shadowOffsetX: ,
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==){
alert("无数据");
vm.reloadSearch();
}else{
for(var i=;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==){
alert("无数据");
vm.reloadSearch();
}else{
for(var i=;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: ,
shadowOffsetX: ,
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");
}
}
});
