修改前:
修改后:
关键代码:
设置一个背景并使之透明,否则宽度不生效,配合formatter使用
formatter: '{a|{name}}',
rich:{
a: {
width: 48,
fontSize: 12,
backgroundColor: "rgba(11, 39, 52, 0)" // 关键代码,设置一个背景并使之透明,否则宽度不生效,配合formatter使用
},
}
}
全部代码
option = {
xAxis: {
type: 'value',
show: false,
splitLine: {
show: false,
// lineStyle: {
// type: 'dashed', // 设置为虚线
// color: '#ccc' // 虚线颜色
// }
}
},
yAxis: {
zlevel:10,
type: 'category',
data: ['10年以上', '5-10年','3-5年', '0-3年'],
axisLine: {
lineStyle: {
color:'#D8D9E5',
},
},
axisLabel: {
color: '#1F2450',// x轴字体颜色
fontSize: 16,
fontFamily:'思源黑体'
},
axisTick:{
show:false,//是否显示刻度
lineStyle:{color:'#E5E5E5'} // x轴刻度的颜色
},
},
legend: {
orient: 'horizontal',
data: ['普通冰箱', '低温冰箱', '普通冷库', '低温冷库', '冷藏车', '其他'],
itemHeight: 6, //设置图标大小
itemWidth:6,
itemGap: 15, //设置图例的间距
// 设置图例的总宽度
width: 260,
left: 'center',
// x:'center',
bottom:'5',
icon: 'circle', //设置图标形状
formatter: '{a|{name}}',
textStyle: {
rich:{
a: {
width: 48,
fontSize: 12,
backgroundColor: "rgba(11, 39, 52, 0)" // 关键代码,设置一个背景并使之透明,否则宽度不生效,配合formatter使用
},
}
}
},
series: [
{
data: [172,182,192,202],
name: '普通冰箱',
type: 'bar',
barWidth:'12',
label: {
show: true,
position: 'right',
color:'#898CA3',
fontFamily:'Arial'
},
itemStyle: {
normal: {
color: '#4174FF',
}
}
},
{
data: [130,130,130,130],
name: '低温冰箱',
type: 'bar',
barWidth:'12',
label: {
show: true,
position: 'right',
color:'#898CA3',
fontFamily:'Arial'
},
itemStyle: {
normal: {
color: '#289BF3',
}
}
},
{
data: [90,100,110,120],
name: '普通冷库',
type: 'bar',
barWidth:'12',
label: {
show: true,
position: 'right',
color:'#898CA3',
fontFamily:'Arial'
},
itemStyle: {
normal: {
color: '#2BD2E7',
}
}
},
{
data: [50,60,70,80],
name: '低温冷库',
type: 'bar',
barWidth:'12',
label: {
show: true,
position: 'right',
color:'#898CA3',
fontFamily:'Arial'
},
itemStyle: {
normal: {
color: '#FF930D',
}
}
},
{
data: [100,120,130,140],
name: '冷藏车',
type: 'bar',
barWidth:'12',
label: {
show: true,
position: 'right',
color:'#898CA3',
fontFamily:'Arial'
},
itemStyle: {
normal: {
color: '#FBCD00',
}
}
},
{
data: [90,110,120,110],
name: '其他',
type: 'bar',
barWidth:'12',
label: {
show: true,
position: 'right',
color:'#898CA3',
fontFamily:'Arial'
},
itemStyle: {
normal: {
color: '#9C95FF',
}
}
}
]
};