echarts 堆叠柱状图多柱样例

定义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();
			}
		});
	}
	;

效果图：