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