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' οnclick="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 &#