echarts堆叠图柱状图的核心代码是在series中设置stack，拿官网的示例来讲，stack里内容相同的为一组堆叠
效果图
步骤
步骤一：引入echarts.js
<script src="../lib/echarts.min.js"></script>步骤二：准备一个呈现图表的盒子
<div id="main" style="width:600px;height:400px"></div>步骤三：初始化echarts实例对象
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);步骤四：准备配置项
option = {
// backgroud:'#333',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Email',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Union Ads',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310],
},
]
};步骤五：将配置项设置给echarts实例对象
option && myChart.setOption(option);完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 步骤一：引入echarts.js -->
<script src="../lib/echarts.min.js"></script>
</head>
<body>
<!-- 步骤二：准备一个呈现图表的盒子 -->
<div id="main" style="width:600px;height:400px"></div>
<script>
// 步骤三：初始化echarts实例对象
// 参数，dom，决定图标最终呈现的位置
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var large = 0.2;
// 步骤四：准备配置项
option = {
// backgroud:'#333',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Email',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Union Ads',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310],
},
]
};
// 步骤五：将配置项设置给echarts实例对象
option && myChart.setOption(option);
</script>
</body>
</html>