利用Echarts实现堆叠柱状图

最近在开发公司的项目过程中遇到一个有关柱状图的问题，需要实现堆叠的柱状图，也就是一个柱体中可以允许几种类别的元素，如下图所示：

要完成这个功能首先要下载echarts.js这个插件，这个网上一找一大堆，下载完成后将这个js放在你项目的某个文件夹下，并且引用它：<script type="text/javascript" src="./print/echarts.js"></script>（此处src路径根据自己的实际路径填写）。

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById("main"));
	// 指定图表的配置项和数据
	var option = {
	    title: {
	        text: "知识分类统计",
	        textStyle: {  
	            color: "#436EEE",  
	            fontSize: 17  
	        }  
	    },
	    //鼠标触发提示数量
	    tooltip: {
	    	 trigger: "axis"
	    },
	    legend: {
	        data:["政策法规","经办规程","业务场景模拟","常见问题"]
	    },
	    //x轴显示
	    xAxis: {
	        data: ["公共管理业务","基金财务业务","内控监督业务","养老待遇业务", "医疗待遇业务", "工伤待遇业务", "失业待遇业务","生育待遇业务"],
	        splitLine:{
	        　　　　show:false
	        　　}
	    },
	    //y轴显示
	    yAxis: {
	    	splitLine:{
	    	　　　　show:false
	    	　　}
	    },
	    series: [
		     {
		        name: "政策法规",
		        type: "bar",
		        stack: "业务",//折叠显示
		        data: <%=zcfgData%>,//（此处的<%=zcfgData%>为后台传过来的数据，格式为[1,2,3,4,2,3,3],根据实际情况修改）
		        barWidth : 38,
		        //显示颜色
		        itemStyle:{  
		             normal:{color:"#FFFF49"}  
		        }
		     },
		     {
		    	 name: "经办规程",
		    	 type: "bar",
		    	 stack: "业务",
		    	 data: <%=jbgcData%>,//（此处的<%=jbgcData%>为后台传过来的数据，格式为[1,2,3,4,2,3,3],根据实际情况修改）
		    	 barWidth : 38,
		     	 itemStyle:{  
	            	 normal:{color:"#FF8849"}  
	       		 }
		     },
		     {
		    	 name: "业务场景模拟",
		    	 type: "bar",
		    	 stack: "业务",
		    	 data: <%=ywcjmnData%>,//（此处的<%=ywcjmnData%>为后台传过来的数据，格式为[1,2,3,4,2,3,3],根据实际情况修改）
		    	 barWidth : 38,
		    	 itemStyle:{  
	            	 normal:{color:"#3FBB49"}  
	       		 }
		     },
		     {
		    	 name: "常见问题",
		    	 type: "bar",
		    	 stack: "业务",
		    	 data: <%=cjwtData%>,//（此处的<%=cjwtData%>为后台传过来的数据，格式为[1,2,3,4,2,3,3],根据实际情况修改）
		    	 barWidth : 38,
		    	 itemStyle:{  
	            	 normal:{color:"#56C4A5"}  
	       		 }
		     }
	     ]
	};
	
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);