echart图表legend每列固定宽度

加加加菲猫

于 2024-05-28 16:27:28 发布

阅读量409

点赞数 2

分类专栏： echarts 文章标签：前端

仅作为自己学习的记录。本文为博主原创文章，可以转载，请标明出处。

本文链接：https://blog.csdn.net/Feel__/article/details/139270530

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

修改前：

修改后：

关键代码：

设置一个背景并使之透明，否则宽度不生效，配合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',
				}
			}
		}
	]
};