全国主要城市空气质量(PM2.5)对比图

梦兮呀

于 2024-01-02 20:12:00 发布

阅读量420

点赞数 10

文章标签： echarts

本文链接：https://blog.csdn.net/isluya/article/details/135348522

版权

使用Echarts对数据进行可视化，在地图中显示各个城市的PM2.5污染情况，使人能够直观看出各个城市的污染情况。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全国主要城市空气质量对比图</title>
		<script src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="js/china.js" ></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px;"></div>
		
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));
			
			var option = {
				backgroundColor: '#404a59',
				title:{
					text:'全国主要城市空气质量对比图-PM2.5',
					left:'center',
					textStyle:{
					    color:'white',
					    fontSize:22
						}
					},
				legend:{
					orient:'vertical',
					left:'right',
					bottom:'bottom',
					data:['PM2.5','Top5'],
					textStyle:{
						color:'white'
					}
					},
					tooltip:{
						trigger:'item',
						formatter:function(params){
							return "城市："+params.name+" <br>PM2.5:"+params.value[2];
						}	
					},

								geo: {
			        				map: 'china',
			        				roam: true,
			        				itemStyle: {
			            				normal: {
			                				areaColor: '#323c48',
			                				borderColor: '#404a59'
			            				},
			            				emphasis: {
			                				areaColor: '#2a333d'
			            				}
			        				}
			    				},
								
							visualMap:{
									type: 'piecewise',
									splitNumber:6,
									min:0,
									max:360,
									textStyle:{
										color:'white'
											}
										},
						}
								
			var cityCoordData = null;
			$.ajax({
			               url:"data/dtData.json",
				async:false,
				dataType:"json",
				success:function(data){
					cityCoordData = data;
					}
				});
						
			var pmData = null;
			$.ajax({
				url:"data/pmData.json",
				async:false,
				dataType:"json",
				success:function(data){
					pmData = data.pmData;
					}
				});
						
			var convertData = function getData(pmData){
					var res = [];
					for(var i=0;i<pmData.length;i++){
					var cityName = pmData[i].name;
					var cityCoord = cityCoordData[cityName];
					var cityValue = pmData[i].value;
					cityCoord.push(cityValue);
					res.push({
							name:cityName,
							value:cityCoord
							});
						}
							return res;
						}
						
				series =[
					{
							name:"PM2.5",
							type:'scatter',
							coordinateSystem:'geo',
							symbol:'circle',
							symbolSize: function(val){
								return val[2]/10;
								},
							data:convertData(pmData)
							},
							{
								name:'Top5',
								type:'effectScatter',
								coordinateSystem:'geo',
								data:convertData(pmData.sort(function(a,b){
									return b.value-a.value;
								}).slice(0,5)),
														
								showEffectOn: 'emphasis',
								rippleEffect: {
							                 brushType: 'stroke'
							            		},
							            				
							    effectType:"ripple", //特效类型，目前只支持涟漪特效'ripple'。
							    showEffectOn:"render",      //配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
							    rippleEffect:{              //涟漪特效相关配置。
							        		period:4,               //动画的时间。
							        		scale:2.5,              //动画中波纹的最大缩放比例。
							        		brushType:'stroke',      //波纹的绘制方式，可选 'stroke' 和 'fill'。
							    			},
							    						
							    hoverAnimation: true,
							    label: {
							          normal: {
							               formatter: '{b}',
							               position: 'right',
							               show: true,
							               color:'yellow'
							                	 }
							            },
							          itemStyle: {
							               normal: {
							                      color: '#f4e925',
							                    	shadowBlur: 10,
							                    	shadowColor: '#333'
							                				}
							            				},
							           zlevel: 1,
							         symbolSize: function(val){
												return val[2]/10;
												},
								}
							]

           option.series = series;
			myChart.setOption(option);
			
			
		</script>
	</body>
</html>