其实用ECharts画柱子还是挺简单的,多去官网看看官方文档,就理解了。
columLabel是多柱子的名字。columName 是横坐标。bgColorList 是柱子的颜色。arr 是每个柱子的值。list 是后台传过来的各个柱子的值,但是要经过处理赋值给arr ,赋值的方法也不只这一种,当然也可以直接赋值。columnValue 是每个柱子的数据(颜色、宽度、数值等)。
$(function () {
initData();
});
// 初始化各个数据
function initData(){
var columLabel = ${dept};
var columName = ${times};
var bgColorList = ['#FBB730', '#31BDF2','#6197fb'];
var list = ${list};
var columnValue = [];
for (var i = 0; i < columLabel.length; i++) {
var arr = [];
var columnDataValue = null;
// 为每个柱子赋值
for (var j = 0; j < columName.length; j++) {
var a = list[i + (j * columLabel.length)];
arr.push(a);
}
columnDataValue = {
barWidth: 15,//柱状条宽度
name:columLabel[i],
type:'bar',
itemStyle: {
normal: {
show: true,//鼠标悬停时显示label数据
barBorderRadius: [10, 10, 10, 10],//柱形图圆角,初始化效果
color: bgColorList[i]
}
},
label: {
normal: {
show: true, //显示数据
position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
}
},
data:arr
};
columnValue.push(columnDataValue);
}
var startTime = "${startTime}";
var endTime = "${endTime}";
var text = "";
if(startTime == endTime){
text = text + startTime;
}else{
text = text + startTime + "---" + endTime;
}
text = text + " 登陆人数统计";
buildChart(text,columLabel,columName,columnValue);
}
// 开始画柱子
function buildChart(text,columLabel,columName,columnValue){
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
// 标题
text: text,
x:'center',
textAlign:'left'
},
tooltip: {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true}
}
},
legend: {
data:columLabel,
y:'bottom' //图例说明文字设置
},
grid: {
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: {
// 横坐标
min: 0,
type: 'category',
data : columName,
axisLabel:{
interval:0,
rotate:22.5,//倾斜度 -90 至 90 默认为0
margin:4,
textStyle:{
fontWeight:"bolder",
color:"#000000",
fontSize:15
}
}
},
yAxis: [{
// 纵坐标
min: 0,
type: 'value',
splitArea: {show: false}
}],
label: {
normal: { //显示bar数据
show: true,
position: 'top'
}
},
series: columnValue
};
myChart.on('click', function (params) {
//为三个柱子设置点击事件
var name = params.name;
if(params.seriesName == '一部'){
//“一部”柱子的点击事件
}
if(params.seriesName == '二部'){
//“二部”柱子的点击事件
}
if(params.seriesName == '三部'){
//“三部”柱子的点击事件
}
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
最终效果图如下(每个柱子均可点击触发点击事件):
图中的各项数据我都是由后台传过来的,在这里要提醒一下,如果后台传过来的数据是中文,可能会报错,在这里我是在后台用单引号括起来将其解决的。
lists.add("'一部'");
lists.add("'二部'");
lists.add("'三部'");
request.setAttribute("dept", lists);
当然,以上数据你如果对哪个不是很理解,都可以试着改一下,这样可能会映像深刻一点(我当初就是这么过来的T_T)。