定义div
<div id="moreColumn" style="width: 80%; height: 90%;float: left;"></div>
js function:
function loadColumn(myChart, breed,district,year1,year2) {
// 显示标题,图例和空的坐标轴
myChart.setOption({
color : [ '#6dd8da', '#b6a2de', '#58afed', '#F3D7B5', '#98FB98', '#FFA500',
'#E9967A', '#808080', '#F0E68C', '#DB7093', '#9ACD32' ,'#c23531','#2f4554',
'#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
title : {
text : '历年轮换分析图(左侧轮入,右侧轮出)',
top : '13%'
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'shadow'
},
},
legend : {
data : []
},
grid: {
top:'20%',
containLabel: false
},
toolbox : {
show : true,
orient : 'vertical',
top : 'center',
right : 20,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar', 'stack', 'tiled' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [
{
type : 'category',
axisTick : {
show : false
},
data : []
}
],
yAxis : [
{
type : 'value'
}
],
series : []
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
$.ajax({
url : "",//自己的url
type : "post",
data : {
breed : breed,
district:district,
year1 : year1,
year2 : year2
},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result.length == 0) {
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
series : [],
legend : {
data : []
},
});
$.messager.show({
title : '',
msg : '柱状图无数据'
});
} else {
var servicedata = [];
//创建一个数组,用来装对象传给series.data,因为series.data里面不能直接写for循环
var xtype = []; //xtype存放的是横坐标,年
var ytype = []; //ytype存放的是每一条数据显示的name,品种
var breedAll = [];
//定义一个color数组,用来存放颜色,因要求两个柱状图相同品种的用同一个颜色
var colorset = [ '#6dd8da', '#b6a2de', '#58afed', '#F3D7B5', '#98FB98', '#FFA500',
'#E9967A', '#808080', '#F0E68C', '#DB7093', '#9ACD32' ,'#c23531','#2f4554',
'#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
//所有的品种
for (var i = 0; i < result.length; i++) {
if (breedAll.indexOf(result[i].breedname) == -1) {
breedAll.push(result[i].breedname);
}
}
var breedcolor = [];
//遍历所有的品种,将legend 的data做出来,就是ytype
//将同一个品种对应的颜色放在breedcolor中,后续进行判断定义颜色
for (var i = 0; i < breedAll.length; i++) {
ytype.push(breedAll[i] + "轮入");
ytype.push(breedAll[i] + "轮出");
var obj = new Object();
obj.breed = breedAll[i];
obj.color = colorset[i];
breedcolor[i] = obj;
}
//将x轴的年份放到xtype中
for (var i = 0; i < result.length; i++) {
if (xtype.indexOf(result[i].year) == -1) {
xtype.push(result[i].year);
}
}
//初始化servicedate这个service所用的data数组
//name是名字,data是数据,itemstyle就是自定义的颜色,stack标明两个柱子分别对应的字段,比如
//收入和支出,这个自己定义
for (var i = 0; i < ytype.length; i++) {
var counts = [];
for (var j = 0; j < xtype.length; j++) {
counts.push(0.00);
}
var obj = new Object();
obj.name = ytype[i];
obj.data = counts;
obj.type = 'bar';
obj.itemStyle = '';
obj.stack = ytype[i].substring(ytype[i].length-2);
servicedata[i] = obj;
}
//下面是我自己所需要的遍历数据操作,根据需求自己改就好
for (var i = 0; i < result.length; i++) {
for (var j = 0; j < ytype.length; j++) {
if (ytype[j] == (result[i].breedname + "轮入")) {
if (result[i].name == 'I') {
for (var k = 0; k < xtype.length; k++) {
if (result[i].year == xtype[k]) {
servicedata[j].data[k] = parseFloat(servicedata[j].data[k]) + parseFloat(result[i].count);
for (var n = 0;n < breedcolor.length; n ++) {
if (result[i].breedname == breedcolor[n].breed) {//定义一个itemStyle ,并给他赋值color,然后将servicedata的
//itemstyle赋值
var itemStyle = {
color : breedcolor[n].color
};
servicedata[j].itemStyle = itemStyle;
}
}
}
}
}
}else if (ytype[j] == (result[i].breedname + "轮出")) {
if (result[i].name == 'O') {
for (var k = 0; k < xtype.length; k++) {
if (result[i].year == xtype[k]) {
servicedata[j].data[k] = parseFloat(servicedata[j].data[k]) + parseFloat(result[i].count);
for (var n = 0;n < breedcolor.length; n ++) {
if (result[i].breedname == breedcolor[n].breed) {
var itemStyle = {
color : breedcolor[n].color
};
servicedata[j].itemStyle = itemStyle;
}
}
}
}
}
}
}
}
myChart.hideLoading(); //隐藏加载动画
//再次加载option,将做好的数据赋进去
myChart.setOption({ //加载数据图表
title : {
},
xAxis : [
{
type : 'category',
axisTick : {
show : false
},
data : xtype
}
],
series : servicedata,
legend : {
data : ytype
},
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
$.messager.show({
title : '很抱歉',
msg : '柱状图无数据'
});
myChart.hideLoading();
}
});
}
;
效果图: