利用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);