码迷,mamicode.com
首页 > 其他好文 > 详细

实现柱状图功能

时间:2017-07-20 14:16:39      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:ado   name   value   trigger   sha   shadow   chart   str   tooltip   

用的插件实现柱状图功能

/*
* 渲染图表
*/
function renderChart() {
var data = $("#channelListId").bootstrapTable("getData");         //表格id
var names = [];
var count = [];
$(data).each(function(index, item) {
if(item.channelName != "合计"){
names.push(item.channelName);
count.push(item.insuranceNumber || 0);
}
/* if(item.channelName!="-"){

} */
});
//柱状图
var myChart = echarts.init(document.getElementById(‘mainBar‘));                 //柱状图id

var option = {
color : [ ‘#3398DB‘ ],
tooltip : {
trigger : ‘axis‘,
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : ‘shadow‘ // 默认为直线,可选为:‘line‘ | ‘shadow‘
}
},
legend : {
data : [ ‘投保人数‘ ]
},
grid : {
left : ‘7%‘,
right : ‘8%‘,
bottom : ‘7%‘,
containLabel : true
},
xAxis : [ {
type : ‘category‘,
data : names,
axisTick : {
alignWithLabel : true
}
} ],
yAxis : [ {
type : ‘value‘
} ],
series : [ {
name : ‘投保人数‘,
type : ‘bar‘,
barWidth : ‘10%‘,
data : count
} ]
};

// 为echarts对象加载数据
myChart.setOption(option);

};

实现柱状图功能

标签:ado   name   value   trigger   sha   shadow   chart   str   tooltip   

原文地址:http://www.cnblogs.com/yzw23333/p/7210847.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!