柱形图案例的赋值
相关文档参考：https://blog.csdn.net/yangsitong1314/article/details/76984616
<div class="map_bg">
<div class="map_center">
<div class="map_title1">选调生图书馆资料阅读统计图</div>
<div class="map_select">
<select id="library_num">
<option value="1">最近半年</option>
<option value="2">最近30天</option>
<option value="3">最近一周</option>
</select>
</div>
<div id="party_member" style="width: 500px;height:274px;"></div>
</div>
</div>
/*
* 选调生图书馆资料阅读统计图
*/
var party_member = echarts.init(document.getElementById('party_member'));
var posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop',
'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft',
'insideTopRight', 'insideBottomLeft', 'insideBottomRight' ]; var app = [];
app.config = {
rotate : 90,
align : 'left',
verticalAlign : 'middle',
position : 'insideBottom',
distance : 15,
onChange : function() {
var labelOption = {
normal : {
rotate : app.config.rotate,
align : app.config.align,
verticalAlign : app.config.verticalAlign,
position : app.config.position,
distance : app.config.distance
}
};
myChart.setOption({
series : [ {
label : labelOption
}, {
label : labelOption
}, {
label : labelOption
}, {
label : labelOption
} ]
});
}
}; var labelOption = {
normal : {
show : true,
position : app.config.position,
distance : app.config.distance,
align : app.config.align,
verticalAlign : app.config.verticalAlign,
rotate : app.config.rotate,
formatter : '{c} {name|{a}}',
fontSize : 16,
rich : {
name : {
textBorderColor : '#fff'
}
}
}
}; var option3 = {
color : [ '#f7683c', '#fbb42a', '#3c82f7', '#36cd26' ],
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'shadow'
}
},
legend : {
data : [ '公开课', '学习专题', '书库', '时事新闻' ]
},
toolbox : {
show : false
},
calculable : true,
xAxis : [ {
name : '月',
type : 'category',
axisTick : {
show : false
},
axisLabel :{
interval:0
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月' ]
} ],
yAxis : [ {
name : '次数',
type : 'value',
axisTick : {
show : false,
},
splitLine : {//背景图的内置表格中“边框”的颜色线条 这个是y轴的辅助线
show : false
}
} ],
series : [ {
name : '公开课',
type : 'bar',
barGap : 0,
barWidth : 8,
data : [ 320, 132, 201, 334, 150, 220 ]
}, {
name : '学习专题',
type : 'bar',
barWidth : 8,
data : [ 220, 182, 151, 234, 290, 120 ]
}, {
name : '书库',
type : 'bar',
barWidth : 8,
data : [ 150, 232, 201, 154, 190, 90 ]
}, {
name : '时事新闻',
type : 'bar',
barWidth : 8,
data : [ 198, 177, 301, 199, 140, 160 ]
} ]
};
// 使用刚指定的配置项和数据显示图表。
party_member.setOption(option3); //以下代码是从后台获取到数据并赋值
var recentTime3 = $("#library_num").val(); //最近时间
$("#library_num").click(function() {
libraryReading(this.value);
});
libraryReading(recentTime3);
function libraryReading(recentTime) {
$.ajax({
type : "post",
url : "rest/admin/log/library_Reading",
data : {
"recentTime" : recentTime
},
cache : false, //禁用缓存
dataType : "json",
success : function(result) {
var xAxisNames = result.xAxisNames1;
console.log(result)
console.log(xAxisNames)
var xAxisUnit;
if (result.recentTime == 1) {
xAxisUnit = "月";
//xAxisNames=['1月', '2月','3月', '4月', '5月', '6月']
}
if (result.recentTime == 2) {
xAxisUnit = "周";
//xAxisNames=['第一周', '第二周','第三周', '第四周']
}
if (result.recentTime == 3) {
xAxisUnit = "天";
//xAxisNames=['周一', '周二','周三', '周四', '周五', '周六']
}
var linNum1 = result.array1;
var linNum2 = result.array2;
var linNum3 = result.array3;
var linNum4 = result.array4; /* $.each(result.array1,function(key,value){
linNames.push(value);
linNums.push(value);
}); */
//柱形图赋值
party_member.setOption({ //加载数据图表
xAxis : {
name : xAxisUnit,
data : xAxisNames,
axisLabel :{
interval:0
}
},
series : [ {
data : linNum1
}, {
data : linNum2
}, {
data : linNum3
}, {
data : linNum4
} ]
});
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
}