【echarts】堆叠柱状图，柱子之间间隔开

2024/10/24 9:30:21 来源：https://blog.csdn.net/qq_14993591/article/details/140788844 浏览: 次关键词：【echarts】堆叠柱状图，柱子之间间隔开

在这里插入图片描述

https://echarts.zhangmuchen.top/#/detail?cid=85095-9454-8a93-b33d7-999a76a3

itemStyle: { //柱子颜色normal: {color: '#4e73de',borderColor: "#fff",// 用border做borderWidth: 10,}
},

具体：

    option = {backgroundColor: '#fff',title: {text: "策略变更",top: 10,left: 15,textStyle: {color: "#35598d",fontSize: 16,fontWeight: 'normal'}},tooltip: {trigger: 'axis',},grid: {left: '5%',right: '6%',bottom: '3%',top: '20%',containLabel: true},legend: {icon: 'rect',right: "3%",top: 13,itemWidth: 20,itemHeight: 10,textStyle: {color: '#555'},data: ['新增', '修改', '删除']},xAxis: {type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],axisLabel: { //坐标轴字体颜色textStyle: {color: '#9eaaba'}},axisLine: {lineStyle: {color: "#e5e5e5"}},axisTick: { //y轴刻度线show: false},splitLine: { //网格show: false,}},yAxis: {type: 'value',axisLabel: { //坐标轴字体颜色textStyle: {color: '#9eaaba'}},axisLine: {show: false,},axisTick: { //y轴刻度线show: false},splitLine: { //网格show: true,lineStyle: {color: '#dadde4',type: "dashed"}}},series: [{name: '新增',type: 'bar',stack: '策略变更',barWidth: '40%', //柱子宽度itemStyle: { //柱子颜色normal: {color: '#4e73de',borderColor: "#fff",borderWidth: 10,}},data: [232, 193, 240, 214, 239, 223, 202]}, {name: '修改',type: 'bar',stack: '策略变更',barWidth: '40%', //柱子宽度itemStyle: { //柱子颜色normal: {color: '#2dafeb',borderColor: "#fff",borderWidth: 10,}},data: [320, 332, 301, 334, 390, 330, 320]}, {name: '删除',type: 'bar',stack: '策略变更',barWidth: '40%', //柱子宽度itemStyle: { //柱子颜色normal: {color: '#35c68d',borderColor: "#fff",borderWidth: 10,}},data: [60, 82, 51, 94, 100, 68, 74]}]};