利用echarts对pm2.5数据进行可视化处理

最新推荐文章于 2025-07-08 11:38:16 发布

原创

最新推荐文章于 2025-07-08 11:38:16 发布 · 4.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #可视化 #pm2.5

本文介绍了如何利用echarts这一数据可视化js插件，展示PM2.5数据。主要实现了四个功能：1) 地图上鼠标悬停显示各类型天气天数；2) 点击地图区域展示对应区域每日天气质量；3) 分析污染情况与时间段关系；4) 用饼图展示PM2.5影响因素权重。通过熟悉echarts文档和巧妙的全局变量交互，可以轻松完成这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts是百度提供的数据可视化js插件，功能强大，提供各种基本的图表（尤其世界以及中国各种地图，方便时空数据的可视化）；具体看参考http://echarts.baidu.com/ 。

本文主要尝试了四个功能

1. 鼠标放在地图某个区上时显示该区在所给数据的时间段内各中类型天气（优、良、轻度、中度、重度、严重污染）的天数

2. 鼠标点击某个区，在下方的曲线图中，显示该区每天的天气质量情况。

3. 鼠标点击某个区后显示该区域每天二十四个小时每个小时重度污染的天数（对污染情况按照每天的24个小时为变量进行统计，观察污染情况与时间段的关系）

4. 饼图显示对pm2.5的各种因素的影响权重。

截图如下：

实现过程非常简单，只要熟悉下百度提供的doc就可以做出来。

稍微有点思考的地方：将使用的各种不同的图标的实例放在一个<javascript>中，这样就可以通过全局变量的交互实现不同图表的交互；本次试验中曲线图的option就是放在地图的点击相应事件中的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
	<script type="text/javascript" src="/js/echarts/echarts-plain-map.js"></script>
	<script src="/js/echarts/jquery.js"> </script>
</head>
<body>
        <div position="left">                                
                    <hr>                   
                    <div class='content' >
                        <input name='showtype' class="content" id='id1' type='radio'  /><label for='mapBox'>具体污染情况</label>
						<input id='id2' type='radio'  name='showtype'></input><label for='mapBox'>每天内时间段污染情况统计</label>             
						<input id='id3' type='radio'  name='showtype'></input><label for='mapBox'>每周内污染情况统计</label>
						<input id='id4' type='radio'  name='showtype' onclick="click1()" ></input><label for='mapdBox'>PM2.5影响因子分析</label>
                    </div>
                    <hr>                              
        </div>
 <div style="display:float">
	<div id="main" style="height:400px;width:700px;float:left"  >		
	</div>
	<div id="main3" style="height:400px;width:500px;float:right" >		
	</div>
</div>	
	<div id="main2" style="height:400px" >
	
	</div>
</body>

<script type="text/javascript">
	var url1;
	var url2;
	var url3;  // the three urls for three diff data	
	{// TODO :  data for 18 section and 21 days for every section; 18*21  in total 
	//var dataDay 		= new Array();
	//var dataHour		= new Array();  //: 18*24 
	//var dataSuspension	= new Array();   // data for the mouse on