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>