echarts中图例legend和坐标系grid实现左右布局

时间:2024-11-18 14:58:58

1、效果图


2、实现方法

将图例legend纵向排列(orient: 'vertical'),宽度给150(width: 150),坐标系grid左侧距离200(left: 200),中间有50的边距

3,、代码展示

grid: {
	left: 200
},
legend: {
        x: 'left',
        data: ['送风温度', '混风温度', '冷冻水送水温度', '冷冻水回水温度', '热水送水温度', '热水回水温度', '送风温度设定点', '风机速度','风机速度反馈','风阀开度'],
	inactiveColor: '#999',
	selectedMode: 'single',
	orient: 'vertical',
	width: 150,
	top: 50,
	borderWidth: 2,
	borderColor: 'blue',
	textStyle: {
		color: '#000'
	}

}