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

最新推荐文章于 2024-09-12 11:56:14 发布

木雷双雄7

最新推荐文章于 2024-09-12 11:56:14 发布

阅读量3.7w

点赞数 2

分类专栏： echarts 文章标签： echarts legend grid

本文链接：https://blog.csdn.net/wlangmood/article/details/71404537

版权

echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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'
	}

}