修改前:
修改后:
关键代码:
设置一个背景并使之透明,否则宽度不生效,配合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',}}}]
};