实现柱状图功能

Posted 2020-09-29 还行吗年轻人

用的插件实现柱状图功能

/*
* 渲染图表
*/
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);

};