echarts大屏柱状图柱子添加背景

如上图效果
方法`series: [
{
name: '一线配怀1',
type: 'bar',
barWidth: '20%',
z: 10,
showBackground: true,
backgroundStyle: {
color: 'transparent', // 背景透明
borderColor: '#033d5e', // 外框颜色
borderWidth: 1, // 边框宽度
borderRadius: [1, 1, 0, 0], // 圆角和柱子保持一致
shadowBlur: 10, // 阴影模糊
shadowColor: 'rgba(0, 232, 253, 0.3)', // 外发光阴影
shadowOffsetX: 100, // 阴影偏移量
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#92FBA3' },
{ offset: 1, color: '#111A308f' }
])
},
data: props.line1Data
},
{
name: '二线配怀1',
type: 'bar',
barWidth: '20%',
z: 10,
showBackground: true,
backgroundStyle: {
color: 'transparent', // 背景透明
borderColor: '#033d5e', // 外框颜色
borderWidth: 1, // 边框宽度
borderRadius: [1, 1, 0, 0], // 圆角和柱子保持一致
shadowBlur: 10, // 阴影模糊
shadowColor: 'rgba(0, 232, 253, 0.3)', // 外发光阴影
shadowOffsetX: 100, // 阴影偏移量
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00E8FD' },
{ offset: 1, color: '#111A308f' }
])
},
data: props.line2Data
}
]`
使用showBackground,backgroundStyle方法解决
浙公网安备 33010602011771号