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

原創 lycp 2018-08-27 23:18

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 the section and the tooltip;  18*6 //重度污染 中度 轻度污染； 正常；四种天数的统计
	//for(var t=0;t<18*21;t++){
		//data.push(t);
	//}
	//for(var t=0;t<18*24;t++){
	//	dataHour.push(t);
	//}
	//for(var t=0;t<18*7;t++){
		//dataDay.push(t);
	//}   
	//for(var t=0;t<18*4;t++){
		//dataSuspension.push(t);
	//} 
// TODO :these initialization just for test ;  deleted  when use
	}
	var functionType 	= 1; // 1,2,3 corresponding to three different functions 	
	var sectionName		=[ '朝阳区', '昌平区',    '大兴区','东城区', '石景山区', '怀柔区',
				'房山区', '门头沟区','密云县','宣武区', '平谷区', '顺义区',  '崇文区' ,'通州区', 
				'海淀区', '西城区','延庆县','丰台区'];
	// use a array store the name and related with the data 	
	
	var myChart1 = echarts.init(document.getElementById('main'));
	var myChart2 = echarts.init(document.getElementById('main2'));
	var myChart3 = echarts.init(document.getElementById('main3'));
	// store the data for 曲线图
	// for radio 1	
	$(document).ready(function(){
		$("#id1").click(function(){
		//	$.get(url1,function(data,status){
				functionType=1;
				 //maybe this interactive function no use  			  
		//	});
		});
	});
	
	$(document).ready(function(){
		$("#id2").click(function(){
		//	$.get(url2,function(data,status){				
				 functionType=2;
				// TODO 
				//get dataHour;
		//	});
		});
	});
	
	$(document).ready(function(){
		$("#id3").click(function(){
		//	$.get(url3,function(data,status){
				functionType=3;
				// TODO 
				//get dataDay
		//	});
		});
	});
	//
	
// 北京市地图	
var option1	={
    title : {
        text: '北京市PM2.5',
        x:'center'
    },
	 tooltip : {
	    trigger: 'item',
        showDelay: 0,
        hideDelay: 50,
        transitionDuration:0,
        backgroundColor : 'rgba(255,0,255,0.7)',
        borderColor : '#f50',
        borderRadius : 8,
        borderWidth: 2,
        padding: 10,    // [5, 10, 15, 20]
        textStyle : {
            color: 'yellow',
            decoration: 'none',
            fontFamily: 'Verdana, sans-serif',
            fontSize: 15,
            fontStyle: 'italic',
            fontWeight: 'bold'
        },
        formatter: function(params,ticket,callback){
			//alert("tste");
			var sectionTemp = params[1]; 
			var res = sectionTemp+'<br/>';
			//alert(sectionTemp);
			for(var i=0;i<sectionName.length;i++){
			//	alert(sectionTemp+'....'+ sectionName[i]);
				if(sectionTemp == sectionName[i]){
	//				alert('get the section'+sectionName[i]);
					res = res +'空气质量优：' +dataSuspension[i*6]+'<br/>'+'空气质量良：'+dataSuspension[i*6+1]+'<br/>'+'轻度污染:'+dataSuspension[i*6+2]+'<br/>'
					+'中度污染:'+dataSuspension[i*6+3]+'<br/>'+'重度污染:'+dataSuspension[i*6+4]+'<br/>'+'严重污染:'+dataSuspension[i*6+5]+'<br/>';
				}
			};
			//alert(ticket);
            setTimeout(function(){
                callback(ticket,res);
            }, 1000)
            return 'DataLoading';
        }
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
	
	
    series : [
        {
			 
            name: '重度污染',
            type: 'map',
            mapType: '北京',
			selectedMode : 'single',
			//roam: true,
            itemStyle:{
                emphasis:{label:{show:true}}
            },
            data:[
			    {name: '朝阳区',selected:false},
                {name: '昌平区',selected:false},
                {name: '大兴区',selected:false},
                {name: '东城区',selected:false},
                {name: '石景山区',selected:false},
                {name: '怀柔区',selected:false},
				{name: '房山区',selected:false},
                {name: '门头沟区',selected:false},
                {name: '密云县',selected:false},
				{name: '宣武区',selected:false},
                {name: '平谷区',selected:false},
                {name: '顺义区',selected:false},
                {name: '崇文区',selected:false},
                {name: '通州区',selected:false},
                {name: '海淀区',selected:false},
                {name: '西城区',selected:false},
                {name: '延庆县',selected:false},
                {name: '丰台区',selected:false},
            ]
        }
    ],
	//animation: false
};                   

myChart1.on(echarts.config.EVENT.MAP_SELECTED, function(param){
	//alert("test");
	var selectedIndex = -1; // corresponding to sectionName
    var selected = param.selected;
    var name;
    for (var i = 0, l = option1.series[0].data.length; i < l; i++) {
        name = option1.series[0].data[i].name;
        option1.series[0].data[i].selected = selected[name];
        if (selected[name]) {
			selectedIndex = i;
        }
    }	
	//alert(selectedSection);   // get the section index and correspond to 'sectionName'
	
	var option2;
	switch(functionType){
	case 1:
		var dataTemp = data.slice(selectedIndex*21,selectedIndex*21+21); //data for echart2 
			// the pm data date from 20140107-20140127  
		option2 = {
			title : {
				text: sectionName[selectedIndex]+'每天污染情况',
				x:'left'
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:['重度污染']
			},
			toolbox: {
				show : true,
				feature : {
				mark : {show: true},
				dataZoom : {show: true},
				dataView : {show: true},
				magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				restore : {show: true},
				saveAsImage : {show: true}
				}
			},
			calculable : true,
			dataZoom : {
				show : true,
				realtime : true,
				start : 20,
				end : 80
			},
			xAxis : [
				{
				type : 'category',
				boundaryGap : false,
				data : function(){
					var list = [];
					for (var i = 7; i <= 27; i++) {
						list.push('2014-01-' + i);
					}
					return list;
				}()
				}
			],
			yAxis : [
				{
					type : 'value',
					splitArea : {show : true}
				}
			],
			series : [
				{
				name:'重度污染',
				type:'line',
				data:function(){
					var list = [];
					for (var i = 7; i <= 27; i++) {
					//TODO:  transmit the data to the list 
						list.push(dataTemp[i-7]);
					}
					return list;
				}()
				}		
			]
		};
			break;
	case 2:
		var dataTemp = dataHour.slice(selectedIndex*24,selectedIndex*24+24); //data for echart2 
			// the pm data date from 20140107-20140127  
		option2 = {
			title : {
				text: sectionName[selectedIndex]+'一天中每个小时段的污染统计（天）',
				x:'left'
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:['重度污染']
			},
			toolbox: {
				show : true,
				feature : {
				mark : {show: true},
				dataZoom : {show: true},
				dataView : {show: true},
				magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				restore : {show: true},
				saveAsImage : {show: true}
				}
			},
			calculable : true,
			dataZoom : {
				show : true,
				realtime : true,
				start : 20,
				end : 80
			},
			xAxis : [
				{
				type : 'category',
				boundaryGap : false,
				data : function(){
					var list = [];
					for (var i = 0; i <= 23; i++) {
						list.push(i+':00');
					}
					return list;
				}()
				}
			],
			yAxis : [
				{
					type : 'value',
					splitArea : {show : true}
				}
			],
			series : [
				{
				name:'重度污染',
				type:'line',
				data:function(){
					var list = [];
					for (var i = 0; i <= 23; i++) {
					//TODO:  transmit the data to the list 
						list.push(dataTemp[i]);
					}
					return list;
				}()
				}		
			]
		};
			break;
	case 3:
		var dataTemp = dataDay.slice(selectedIndex*7,selectedIndex*7+7); //data for echart2 
		option2 = {
			title : {
				text: sectionName[selectedIndex]+'一个星期中每天的污染统计（天）',
				x:'left'
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:['重度污染']
			},
			toolbox: {
				show : true,
				feature : {
				mark : {show: true},
				dataZoom : {show: true},
				dataView : {show: true},
				magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				restore : {show: true},
				saveAsImage : {show: true}
				}
			},
			calculable : true,
			dataZoom : {
				show : true,
				realtime : true,
				start : 20,
				end : 80
			},
			xAxis : [
				{
				type : 'category',
				boundaryGap : false,
				data : function(){
					var list = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日",];
					return list;
				}()
				}
			],
			yAxis : [
				{
					type : 'value',
					splitArea : {show : true}
				}
			],
			series : [
				{
				name:'重度污染',
				type:'line',
				data:function(){
					var list = [];
					for (var i = 0; i <= 7; i++) {
					//TODO:  transmit the data to the list 
						list.push(dataTemp[i]);
					}
					return list;
				}()
				}		
			]
		};
			break;
	}
	
	myChart2.setOption(option2);   //display 
});

myChart1.setOption(option1);
 
// pm2.5影响因子分析 
var option3 = {
    title : {
        text: 'PM2.5影响因子分析',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['风速','降雨','温度']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius: '55%',
            center: ['50%', 225],
            data:[
                {value:335, name:'风速'},
                {value:310, name:'降雨'},
                {value:234, name:'温度'}
            ]
        }
    ]
};
          
function click1() {
	myChart3.setOption(option3);
}

</script>
</html>













    





發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








Excel2007 自定义函数






從別人那裏看的，濃縮一下：
1、打開Excel2007，按Alt+F11。出現VB的代碼編輯界面
2、左側的ThisWorkbook點右鍵菜單插入-> 模塊
3、在新出的編輯器裏編輯函數。關閉自動保存。
4、關閉VB，回到主界面調用。（在






 JohnZhang_

2020-07-08 00:24:25









mysqlclient 安装不上试下这个






 env LDFLAGS="-I/usr/local/Cellar/openssl/1.0.2t/include -L/usr/local/Cellar/openssl/1.0.2t/lib" pip install mysqlclien






 playStudy

2020-07-07 19:19:09









virtualenv详解及使用virtualenv复制虚拟独立的python环境（转载）






版權聲明：本文爲轉載文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/poxiaonie/article/details/78820015
virtua






 playStudy

2020-07-07 19:19:09









IDEA（Pycharm）一家子常用快捷键Keymap对应的英文、中文与具体位置






本博客旨在把idea全家桶中快捷鍵的英文與中文羅列出來，方便大家自定義
中文
英文
位置
代碼提示
Basic
code - completion - Basic
同時多行輸入
Add or Remove Car






 呆萌的代Ma

2020-07-07 12:02:08









IMEI校验码算法






(1).將偶數位數字分別乘以2，分別計算個位數和十位數之和
(2).將奇數位數字相加，再加上上一步算得的值
(3).如果得出的數個位是0則校驗位爲0，否則爲10減去個位數
 
如：35 89 01 80 69 72 41偶數位乘以2得到5






 hank_fan5

2020-07-07 10:12:49









移动，联通，电信3G协议区别






在2G時代：
聯通和移動的卡在同一手機中可以互換的，都屬於GSM制式。
而電信的卡實際是2.5G的產品,屬於CDMA1X制式,因此電信和聯通、移動不能相互通用。
3G時代：
移動用我國自主開發的TD-CDMA制式，推出的3G業務取名叫G3






 hank_fan5

2020-07-07 10:12:49









Solution for error: ‘CV_IMWRITE_JPEG_QUALITY’ was not declared in this scope






mjpg-streamer input plugin: input_opencv
This input plugin uses OpenCV to read from supported video sources, optionally






 pkuyjxu

2020-07-07 00:49:22









在Windows下配置与使用CVSNT - dudu - 博客园






導讀： 　　dudu爲程序員打雜的站長 　　博客園社區首頁新隨筆聯繫管理訂閱 隨筆- 1060 文章- 241 評論- 22227 　　在Window






 Night_Elf

2020-07-06 11:25:49









Windows下的CVS版本控制软件使用－CVS服务器端CVSNT






導讀： 　　用了這麼久CVS，斷斷續續接觸了不少CVS在WINDOWS的各種軟件，基本作個簡單說明和記錄，以便備忘。 　　CVSNT是CVS的基






 Night_Elf

2020-07-06 11:25:49









RS232 RS485 RS422






 
RS232 通訊原理 ? RS485通訊原理？RS422 是什麼？
RS485接線的正確原理圖 常見的RS485錯誤接線
RS-232是串行數據






 tony_zouzou

2020-07-06 04:28:26









示波器分析UART串口数据






 從泰克示波器裏面看UART數據的時候  截下來一段傳輸幾個字節的數據信號數據
改天把圖和數據傳上來了  再對着圖分析 各個UART中的各個概念
文






 tony_zouzou

2020-07-06 04:28:26









作为初中级程序员必需了解的技术






                          以下是針對於初中級程序員，特別是JAVA程序員的技術基礎必須要瞭解和掌握的以下只供參考：
 
對於Web Development我列出瞭如下技術(圖片顯示)：
   JavaScript






 sharme

2020-07-05 19:58:00









一道题目想到的






昨天晚上陪人蔘加阿里的網絡面試，看到一道題目，大概意思是：
由1、2、3、4、5組成的數字中，大於23154且小於45132的數字有多少個？1
本意應該是讓使用排列組合計算吧，我直接寫了一個簡單的程序解決了。忽然發現，其實有好






 pdcxs007

2020-07-05 15:49:07









安装Office 2013后的HTML图标问题记录






今天安裝了Office 2013，安裝完之後發現所有html文件的全部變成了未知圖標！本人使用的是Chrome瀏覽器，找了一些資料，最終參照這個方法解決問題。
在運行中輸入regedit 打開註冊表。
在HKEY_CLASSES






 pdcxs007

2020-07-05 15:49:07









试了一下QQ云输入法






RT,還行，我是在ubuntu中懶得裝輸入法。。。。。好像還支持快捷鍵,,,不錯...贊一個...
我用的是五筆.看來,把碼錶配好了之後, 很多事都好做了.






 tryfinally

2020-07-05 14:53:14