多个echarts图叠加

最新推荐文章于 2024-09-20 11:18:18 发布
最新推荐文章于 2024-09-20 11:18:18 发布
阅读量2.3k 收藏 8
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43820535/article/details/107196952
版权

多个echarts图叠加

多个图叠加在一起

在这里插入图片描述
代码如下：

option = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			crossStyle: {
				color: '#999'
			}
		}
	},
	toolbox: {
		feature: {
			dataView: {show: true, readOnly: false},
			magicType: {show: true, type: ['line', 'bar']},
			restore: {show: true},
			saveAsImage: {show: true}
		}
	},
	color: ['#D38267', '#333333', 'red', 'blue','#8435DE','green','#3B99FB','#999999'],
	//有几个图，就有几个grid,从上往下排
	grid: [
		{x: '7%', y: '7%', height: '20%', left: '10%'},
		{x: '7%', y2: '7%', height: '20%', left: '10%', bottom: '53%'},
		{x: '7%', y2: '7%', height: '20%', left: '10%', bottom: '33%'},
		{x: '7%', y2: '7%', height: '20%', left: '10%', bottom: '13%'}
	],
	legend: {
		data:['PM₂.₅','PM₁₀','SO₂','NO₂','CO','O₃','AQI','AQI1']
	},
	xAxis: [
		{
			type: 'category',//PM2.5和PM10 X轴
			gridIndex: 0,//对应grid的索引位置（第1个）
			axisTick: {
				alignWithLabel: true,
				show:false
			},
			axisLabel: {
				show:false
			},
			data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
		},
		{
			type: 'category',//SO2 和NO2 X轴
			gridIndex: 1,//对应grid的索引位置（第2个）
			axisTick: {
				alignWithLabel: true,
				show:false
			},
			axisLabel: {
				show:false
			},
			data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],

		},
		{
			type: 'category',//CO和O3 X轴
			gridIndex: 2,//对应grid的索引位置（第3个）
			axisTick: {
				alignWithLabel: true,
				show:false
			},
			axisLabel: {
				show:false
			},
			data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
		},
		{
			type: 'category',//AQI X轴
			gridIndex: 3,//对应grid的索引位置（第4个）
			axisTick: {
				alignWithLabel: true
			},
			axisLabel: {
				//interval:showNum,
			},
			data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],

		}
	],
	//y轴
   
	yAxis: [
		{
			type: 'value',
			gridIndex: 0,//对应grid的索引位置（第1个）
			name: 'PM₂.₅(μg/m³)',
			nameTextStyle: {
				padding: 25
			},
			position: 'left',
			nameLocation: 'middle',
			splitLine: {show: false},
			axisLine: {
				lineStyle: {
					//color: '#f8f106'
				}
			},
			axisLabel: {
				formatter: '{value}',
				showMaxLabel: false,
				textStyle: {
					fontSize: 12//y轴坐标轴上的字体大小
				}
			},
		}, {
			type: 'value',
			gridIndex: 0,//对应grid的索引位置（第1个）
			name: 'PM₁₀(μg/m³)',
			nameTextStyle: {
				padding: 25
			},
			nameLocation: 'middle',
			position: 'right',
			splitLine: {show: false},
			axisLine: {
				lineStyle: {
					
				}
			},
			axisLabel: {
				formatter: '{value}',
				showMaxLabel: false,
				textStyle: {
					fontSize: 12//y轴坐标轴上的字体大小
				}
			}
		 },
		  
		  
		  
		{
			type: 'value',
			gridIndex: 1,//对应grid的索引位置（第2个）
			nameLocation: 'middle',
			name: 'SO₂(μg/m³)',
			nameTextStyle: {
				padding: 25
			},
			splitLine: {show: false},
			position: 'left',
			axisLine: {
				lineStyle: {
					
				}
			},
			axisLabel: {
				formatter: '{value}',
				showMaxLabel: false,
			}
		},{
			type: 'value',
			gridIndex: 1,//对应grid的索引位置（第2个）
			name: 'NO₂(μg/m³)',
			//nameLocation:'end',
			splitLine: {show: false},
			nameLocation: 'middle',
			nameTextStyle: {
				padding: 25
			},
			position: 'right',
			axisLine: {
				lineStyle: {
					
				}
			},
			axisLabel: {
				formatter: '{value}',
				showMaxLabel: false
			}
		},
		  
		  
		{
			type: 'value',
			gridIndex: 2,//对应grid的索引位置（第3个）
			name: 'CO(μg/m³)',
			nameTextStyle: {
				padding: 25
			},
			position: 'left',
			nameLocation: 'middle',
			splitLine: {show: false},
			axisLine: {
				lineStyle: {
					//color: '#f8f106'
				}
			},
			axisLabel: {
				formatter: '{value}',
				showMaxLabel: false,
				textStyle: {
					fontSize: 12//y轴坐标轴上的字体大小
				}
			},
		 }, {
			type: 'value',
			gridIndex: 2,//对应grid的索引位置（第3个）
			name: 'O₃(μg/m³)',
			nameTextStyle: {
				padding: 25
			},
			nameLocation: 'middle',
			position: 'right',
			splitLine: {show: false},
			axisLine: {
				lineStyle: {
					//color: colors[1]
				}
			},
			axisLabel: {
				formatter: '{value}',
				showMaxLabel: false,
				textStyle: {
					fontSize: 12//y轴坐标轴上的字体大小
				}
			}
		},
		  
		  
		{
			type: 'value',
			gridIndex: 3,//对应grid的索引位置（第4个）
			name: 'AQI(μg/m³)',
			nameTextStyle: {
				padding: 25
			},
			nameLocation: 'middle',
			position: 'left',
			splitLine: {show: false},
			axisLine: {
				lineStyle: {
					//color: colors[1]
				}
			},
			axisLabel: {
				formatter: '{value}',
				showMaxLabel: false,
				textStyle: {
					fontSize: 12//y轴坐标轴上的字体大小
				}
			}
		},
		{
			type: 'value',
			gridIndex: 3,//对应grid的索引位置（第4个）
			name: 'AQI(μg/m³)',
			nameTextStyle: {
				padding: 25
			},
			nameLocation: 'middle',
			position: 'right',
			splitLine: {show: false},
			axisLine: {
				lineStyle: {
					//color: colors[1]
				}
			},
			axisLabel: {
				formatter: '{value}',
				showMaxLabel: false,
				textStyle: {
					fontSize: 12//y轴坐标轴上的字体大小
				}
			}
		}
	],
	series: [
		{
			name:'PM₂.₅',
			type:'line',
			smooth:true,
			xAxisIndex: 0,//对应grid的索引位置（第1个）
			yAxisIndex: 0,//对应yAxis的索引位置（第1个）
			data:[200.0, 40.9, 70.0, 103.2, 55.6, 76.7, 100.6, 120.2, 150.6, 200.0, 60.4, 30.3]
		},
		{
			name:'PM₁₀',
			type: "line",
			smooth:true,
			xAxisIndex: 0,//对应grid的索引位置（第1个）
			yAxisIndex: 1,//对应yAxis的索引位置（第2个）
			data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		},
		
		
		{
			name:'SO₂',
			type:'line',
			smooth:true,
			xAxisIndex: 1,//对应grid的索引位置（第2个）
			yAxisIndex: 2,//对应yAxis的索引位置（第3个）
			data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
		},
		{
			name:'NO₂',
			type:'line',
			smooth:true,
			xAxisIndex: 1,//对应grid的索引位置（第2个）
			yAxisIndex: 3,//对应yAxis的索引位置（第4个）
			data:[220.0, 20.2, 30.3, 14.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
		},
		
		 
		{
			name:'CO',
			type:'line',
			smooth:true,
			xAxisIndex: 2,//对应grid的索引位置（第3个）
			yAxisIndex: 4,//对应yAxis的索引位置（第5个）
			data:[20.0, 40.9, 70.0, 103.2, 55.6, 76.7, 100.6, 120.2, 150.6, 200.0, 60.4, 30.3]
		},
		{
			name:'O₃',
			type: "line",
			smooth:true,
			xAxisIndex: 2,//对应grid的索引位置（第3个）
			yAxisIndex: 5,//对应yAxis的索引位置（第6个）
			data:[201.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		},
		
		
		{
			name:'AQI',
			type: "line",
			smooth:true,
			xAxisIndex: 3,//对应grid的索引位置（第4个）
			yAxisIndex: 6,//对应yAxis的索引位置（第7个）
			data:[21.6, 5.9, 90.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		},
		{
			name:'AQI',
			type: "line",
			smooth:true,
			xAxisIndex: 3,//对应grid的索引位置（第4个）
			yAxisIndex: 7,//对应yAxis的索引位置（第8个）
			tooltip: {
				show : false//设置提示框不显示
			},
			data:[21.6, 5.9, 90.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		}
	]
};
weixin_43820535
关注
echarts饼图pie应用之一--多个环形图叠加
欢迎大家交流前端开发技术、经验及各种知识沉淀
09-21 2218
echarts中饼图主要用于表现不同类目的数据在总和中的占比。每个弧度表示数据数量的比例。
【echarts】--地图添加边界，图层的叠加以及散点图的实现
lyn
06-30 1万+
【需求】 ：   页面显示对应地区的地图，给地图添加边框以及实现散点图。 【代码】：    //TODO 代码没照全，周一补充完整。// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { ...
echarts地图叠加百度地图底板实现数据可视化
Bolin
04-26 1245
实现数据可视化时，个别情况下需要在地图上实现数据的可视化，echarts加载geojson数据可以实现以地图形式展示数据，例如分层设色或者鼠标hover展示指标值，但如果要将echarts地图和真实的地图底板叠加官方就没有相关的示例了。这里的讲的echarts地图与百度地图叠加指的是在百度地图之上叠加一个行政区域的色块填充多边形。实现思路：使用series-custom，让series-custom. coordinateSystem echarts坐标系与百度地图坐标系一致。// 百度地图缩放级别。
【echarts】ECharts 解决地图标签重叠问题的技术实践
九日的博客
08-21 748
在使用 ECharts 绘制地图时，遇到的一个常见问题是某些地区的名称标签会因为地理位置接近而出现重叠，导致可读性变差。为了提升地图的展示效果，确保每个地区的名称都能清晰可见，我们可以通过自定义标签格式和位置偏移来解决这个问题。本文将分享一个实际的解决方案，并详细解释其实现思路。
Canvans实现ECharts图的叠加
qqjuanqq的博客
10-12 683
Canvans制作ECharts图表
pyechart绘制多图（三图及以上）的overlap叠加
呆萌的代Ma
03-01 2991
【代码】pyechart绘制多图（三图及以上）的overlap叠加。
我真傻，echarts里面这么简单的图层叠加我竟然需要搞这么久！！！！
最新发布
2301_79745722的博客
09-20 163
记住roam是用于开启用户通过鼠标滚轮或拖拽来缩放和平移地图。
echarts横向堆叠柱状图.zip
10-11
堆叠柱状图是一种特殊类型的柱状图，它允许我们在同一坐标轴上展示多个相关系列的数据，使得每个柱子由不同数据系列堆叠而成，从而方便地对比各个系列在总值中的相对贡献。 标题 "echarts横向堆叠柱状图.zip" 提示...
echarts地图叠加散点
09-05
另外，散点的数据是通过`data`属性传递的，示例中只有一个散点，你可以根据需要添加更多的散点数据。 不同的Echarts版本可能会有些差异，请确保你正在使用兼容的版本。你也可以根据自己的需求进一步自定义散点的...
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...
解决echarts的多个折现数据出现坐标和值对不上的问题
10-17
在处理多个折线数据系列时，为了比较不同数据系列之间的相对大小，ECharts 提供了“堆积”（stack）功能。当你设置 `stack` 属性时，ECharts 将按照指定的堆叠名称将各个数据系列的值进行累加，从而形成一个新的纵坐...
Vue3.2+Echarts叠加图层并且实现对地图的放大缩小功能
JackChan
04-18 224
Vue3.2+Echarts叠加图层并且实现对地图的放大缩小功能
echarts的多视图叠加以及缩放
04-08 1602
Echarts 缩放操作 实现目标： 多种视图：热力图，两种颜色的气泡图，折线图 缩放功能 多视图融合 基本概念： option.series 是数组结构，可以定义多个视图，从而实现多种视图叠加的效果。 本次的需求为：热力图显示底层颜色，两种颜色的气泡以及一条折线，代码如下。 series: [ { id: 0, name: 'Punch Card', type: 'heatmap',
ECharts.js（四）-叠加
weixin_33711647的博客
03-15 99
2019独角兽企业重金招聘Python工程师标准>>> ...
Echarts渲染图层叠加异常，多个折线图自动切换
weixin_44671162的博客
04-12 447
删除原来的div并重新生成新的div。Echarts渲染异常。
echarts饼图实现多环形对比图
热门推荐
木雷双雄7
09-25 1万+
要求：展示室外温度、室内温度设定点、室内温度的多环形对比图 最终实现效果图： 代码实现详解： var total = 50;//最大温度数据单独出来定义，方便环形总数的修改 var myChart = echarts.init(document.getElementById('pie'); placeHolderStyle = {
echarts的常用记录-叠加
xiaohjuan的博客
04-21 257
echarts的叠加图表代码如下（示例）： var Chart = echarts.init(document.getElementById('chargeEchart')); var option = { color: [ '#5D7092','#5AD8A6', '#5B8FF9'], tooltip: { trigger: 'axis', axisPointer: { type:
echarts：实现3D地图版块叠加动效散点+轮播高亮效果
smm的博客
01-17 8066
实现3D地图版块叠加动效散点效果，轮播高亮展示区域版块，且高亮区域的散点动效、颜色、标签样式均有变化
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值