1:正常的堆叠
var option = {
tooltip: {
trigger: "axis",
},
legend: {
itemWidth: 10,
itemHeight: 10,
data:['缺勤','出勤'],
x: '4%',
y: '5',
textStyle: {
fontSize: 14, color: '#1E2031'
},
},
grid: {
left: '3%',
right: '6%',
bottom: '0%',
containLabel: true
},
xAxis: {
name: '日期',
data: ['周一','周二','周三'],
splitLine:{
show:false,
},
},
yAxis: {
name: '次',
splitLine:{
show:false,
},
},
series: [{
name: '缺勤',
type: 'bar',
barWidth: 15,
stack:'使用情况',
data:[10, 20, 15],
itemStyle:{
normal:{color:"#FF5500"},
}
},{
name: '出勤',
type: 'bar',
barWidth: 15,
stack:'使用情况',
data: [10, 20, 15],
itemStyle:{
normal:{color:"#13C2C2"},
}
}]
};
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5685909ab3fd4ae32e89ceba04c29d20.png)
2:用作图例显示
var option = {
title: {
text: "没有数据",
x: "center",
y: "65%",
textStyle: {
color: "#ccc",
fontStyle: "normal",
fontWeight: "lighter",
fontSize: 12,
},
},
grid: {
left: "40%",
right: "40%",
bottom: "40%",
containLabel: true,
},
xAxis: {
data: ["", "", ""],
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
axisLabel: {
formatter: function () {
return "";
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
type: "bar",
barWidth: 50,
stack: "使用情况",
data: [10, 20, 15],
itemStyle: {
normal: { color: "#b3d7f7" },
},
},
{
type: "bar",
barWidth: 50,
stack: "使用情况",
data: [5, 12, 8],
itemStyle: {
normal: { color: "#fbe8a6" },
},
},
],
};
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/771bbbdabd666aa42d36a9bbfe3c8629.png)