echarts 一个表多个柱状图

最新推荐文章于 2024-05-17 14:32:46 发布

走，带你去玩

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量886

点赞数

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

本文链接：https://blog.csdn.net/weixin_47517731/article/details/128664514

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要使用grid去控制每一块柱状图的具体位置同时使用gridIndex控制对应的X轴

			initChartEnergyThree() {

				let chartInstance = echarts.init(this.$refs.energy_echarts_three);
				let initOption = {
					title:{
						text:"各室总功率:",
						textStyle:{
							color:"#fff",
							fontWeight:400,
							fontSize:14,
						},
						left:"28%",
						top:2
					},
					legend: {
						itemWidth:18,
						itemHeight:18,
						
						textStyle: {
							color: "#fff",
							fontWeight:400,
							fontSize:14,
							
						}
					},
					grid: [{
						top: "10%",
						right: '8%',
						left: '0%',
						bottom: '1%',
						width: '25%',
						containLabel: true
					}, {
						top: "10%",
						right: '4%',
						left: '25%',
						bottom: '1%',
						width: '25%',
						containLabel: true
					}, {
						top: "10%",
						right: '4%',
						left: '50%',
						bottom: '1%',
						width: '25%',
						containLabel: true
					}, {
						top: '10%',
						right: '4%',
						left: '75%',
						bottom: '1%',
						width: '25%',
						containLabel: true
					}],
					yAxis: [{
							splitLine: {
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.18)'
								}
							},
							axisLabel: {

								textStyle: {
									fontSize: 12,
									color: "#fff"
								}
							}
						},
						{
							gridIndex: 1,
							splitLine: {
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							}
						},
						{
							splitLine: {
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							gridIndex: 2,

							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							}
						},
						{
							splitLine: {
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							gridIndex: 3,
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							}
						}
					],
					xAxis: [{
							data: ['A11', 'A12', 'A13', 'A14', 'A15'],
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.18)'
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							axisLabel: {

								textStyle: {
									fontSize: 12,
									color: "#fff"
								}
							}
						},
						{
							data: ['A21', 'A22', 'A23', 'A24', 'A25'],
							gridIndex: 1,
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.18)'
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							axisLabel: {

								textStyle: {
									fontSize: 12,
									color: "#fff"
								}
							}
						},
						{
							data: ['B11', 'B12', 'B13', 'B14', 'B15'],
							gridIndex: 2,
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.18)'
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							axisLabel: {

								textStyle: {
									fontSize: 12,
									color: "#fff"
								}
							}
						},
						{
							data: ['B21', 'B22', 'B23', 'B24', 'B25'],
							gridIndex: 3,
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.18)'
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							axisLabel: {

								textStyle: {
									fontSize: 12,
									color: "#fff"
								}
							}
						}
					],
					series: [{
							name: '功率1',
							type: 'bar',
							barWidth: '60%',
							data: [10, 52, 200, 334, 390],
							itemStyle: {
								color: "#6FD577"
							}
						},
						{
							name: '功率2',
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1,
							barWidth: '60%',
							data: [10, 52, 200, 334, 390],
							itemStyle: {
								color: "#3245E1"
							}
						},
						{
							name: '功率3',
							type: 'bar',
							xAxisIndex: 2,
							yAxisIndex: 2,
							barWidth: '60%',
							data: [10, 52, 200, 334, 390],
							itemStyle: {
								color: "#FD7857"
							}
						},
						{
							name: '功率4',
							type: 'bar',
							xAxisIndex: 3,
							yAxisIndex: 3,
							barWidth: '60%',
							data: [10, 52, 200, 334, 390],
							itemStyle: {
								color: "#FDC759"
							}
						}
					]
				}

				chartInstance.setOption(initOption);
			},