echarts 多Y轴折线图(设置其他y轴的样式去查看echarts的文档)

走，带你去玩

已于 2023-05-11 11:25:01 修改

阅读量1.3k

点赞数

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

于 2023-01-10 16:44:39 首次发布

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

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

该代码段展示了如何使用ECharts库初始化一个图表，展示包括排放限制、实际出口排放、总能耗和负荷在内的多组时间序列数据。配置包括轴的样式、提示框、背景色以及渐变填充等，用于创建一个专业的数据监控界面。

摘要由CSDN通过智能技术生成

			initChartEnergyOne() {
				let chartInstance = echarts.init(this.$refs.energy_echarts_one);
				let initOption = {

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#ddd'
							}
						},
						backgroundColor: 'rgba(255,255,255,1)',
						padding: [5, 10],
						textStyle: {
							color: '#7588E4',
						},
						extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
					},
					grid: {
						left: "12%",
						right: "1.5%",
						bottom: "8%"
					},
					legend: {
						right: 20,
						orient: 'horizontal',
						data: ['排放限制(mg/Nm³)', '实际出口排放(mg/Nm³)', '总能耗(kW)', '负荷(MW)'],
						itemGap: 20,
						textStyle: {
							color: "#fff",
							fontSize: '14px',
							padding: [0, 0, 0, 10]
						},
						icon: "rect",
						itemWidth: 53,
						itemHeight: 2
					},
					// x轴数据
					xAxis: {
						type: 'category',
						data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00',
							'11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00',
							'19:00', '20:00', '21:00', "22:00", '23:00', '24:00'
						],
						boundaryGap: false,
						splitLine: {
							show: true,
							interval: 'auto',
							lineStyle: {
								color: ['rgba(255,255,255,.18)']
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#609ee9'
							}
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 14
							}
						}
					},
					
					// y轴数据，有几个定义几个即可  position: "left",控制y轴的位置  offset: 60,控制y轴的偏移量  
					yAxis: [{
							type: 'value',
							position: "left",
							splitLine: {
								lineStyle: {
									color: ['rgba(255,255,255,.18)']
								}
							},
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#21CBEE'
								}
							},
							axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 12
								}
							}
						},
						{
							type: 'value',
							position: "left",
							offset: 60,
							splitLine: {
								show: false
							},
							axisTick: {
								show: false,
								inside: true
							},
							axisLine: {
								lineStyle: {
									color: '#F19D7E'
								}
							},
							axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 12
								}
							},
						},
						{
							type: 'value',
							position: "left",
							offset: 120,
							splitLine: {
								show: false
							},
							axisTick: {
								show: false,
								inside: true
							},
							axisLine: {
								lineStyle: {
									color: '#768AFF'
								}
							},
							axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 12
								}
							}
						},
                      {
							type: 'value',
							position: "left",
							offset: 180,
							splitLine: {
								show: false
							},
							axisTick: {
								show: false,
								inside: true
							},
							axisLine: {
								lineStyle: {
									color: '#F3FFD5'
								}
							},
							axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 12
								}
							}
						}
					],
					// 有几个Y轴定义几个数据即可，yAxisIndex: 0,这玩意每一个都要写切从0开始
					series: [{

							name: '排放限制(mg/Nm³)',
							type: 'line',
							smooth: true,
							showSymbol: false,
							symbol: 'circle',
							yAxisIndex: 0,
							symbolSize: 6,
							data: ['1200', '1400', '1008', '1411', '1026', '1288', '1300', '800', '1100', '1000',
								'1118', '1322', '1200', '1400', '1008', '1411', '1026', '1288', '1300', '800',
								'1100', '1000',
								'1118', '1322'
							],
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(14,41,105,0.5)'
									}, {
										offset: 1,
										color: 'rgba(255,255,255,0)'
									}], false)
								}
							},
							itemStyle: {
								normal: {
									color: '#21CBEE'
								}
							},
							lineStyle: {
								normal: {
									width: 2
								}
							}
						}, {

							name: '实际出口排放(mg/Nm³)',
							type: 'line',
							smooth: true,
							showSymbol: false,
							symbol: 'circle',
							yAxisIndex: 1,
							symbolSize: 6,
							data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300',
								'1998', '822', '1200', '1400', '1008', '1411', '1026', '1288', '1300', '800',
								'1100', '1000',
								'1118', '1322'
							],
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(252,73,62,.2)'
									}, {
										offset: 1,
										color: 'rgba(252,73,62,0)'
									}], false)
								}
							},
							itemStyle: {
								normal: {
									color: '#FFA480'
								}
							},
							lineStyle: {
								normal: {
									width: 2
								}
							}
						},
						{
							name: '总能耗(kW)',
							type: 'line',
							smooth: true,
							showSymbol: false,
							symbol: 'circle',
							yAxisIndex: 2,
							symbolSize: 6,
							data: ['300', '400', '900', '811', '626', '488', '1600', '1100', '500', '300',
								'1998', '822', '1400', '808', '811', '626', '488', '1600', '1100', '500',
								'300',
								'1998', '822', '1200',
							],
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(118,138,255,.2)'
									}, {
										offset: 1,
										color: 'rgba(118,138,255,0)'
									}], false)
								}
							},
							itemStyle: {
								normal: {
									color: '#768AFF'
								}
							},
							lineStyle: {
								normal: {
									width: 2
								}
							}
						},
						{
							name: '负荷(MW)',
							type: 'line',
							smooth: true,
							showSymbol: false,
							symbol: 'circle',
							yAxisIndex: 3,
							symbolSize: 6,
							data: ['500', '100', '900', '811', '500', '991', '600', '200', '100', '300',
								'500', '822', '500', '100', '900', '811', '500', '991', '811', '626', '488',
								'1600', '1100', '500'
							],
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(243,255,213,.2)'
									}, {
										offset: 1,
										color: 'rgba(243,255,213,0)'
									}], false)
								}
							},
							itemStyle: {
								normal: {
									color: '#F3FFD5'
								}
							},
							lineStyle: {
								normal: {
									width: 2
								}
							}
						}
					]
				};
				chartInstance.setOption(initOption);
			},