利用echarts對pm2.5資料進行視覺化處理
阿新 • • 發佈：2019-02-08
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>