全国主要城市空气质量(PM2.5)对比图
使用Echarts对数据进行可视化，在地图中显示各个城市的PM2.5污染情况，使人能够直观看出各个城市的污染情况。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>全国主要城市空气质量对比图</title><script src="js/echarts.min.js"></script><script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script><script type="text/javascript" src="js/china.js" ></script></head><body><div id="main" style="width: 600px;height: 400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option = {backgroundColor: '#404a59',title:{text:'全国主要城市空气质量对比图-PM2.5',left:'center',textStyle:{color:'white',fontSize:22}},legend:{orient:'vertical',left:'right',bottom:'bottom',data:['PM2.5','Top5'],textStyle:{color:'white'}},tooltip:{trigger:'item',formatter:function(params){return "城市："+params.name+" <br>PM2.5:"+params.value[2];} },geo: {map: 'china',roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#404a59'},emphasis: {areaColor: '#2a333d'}}},visualMap:{type: 'piecewise',splitNumber:6,min:0,max:360,textStyle:{color:'white'}},}var cityCoordData = null;$.ajax({url:"data/dtData.json",async:false,dataType:"json",success:function(data){cityCoordData = data;}});var pmData = null;$.ajax({url:"data/pmData.json",async:false,dataType:"json",success:function(data){pmData = data.pmData;}});var convertData = function getData(pmData){var res = [];for(var i=0;i<pmData.length;i++){var cityName = pmData[i].name;var cityCoord = cityCoordData[cityName];var cityValue = pmData[i].value;cityCoord.push(cityValue);res.push({name:cityName,value:cityCoord});}return res;}series =[{name:"PM2.5",type:'scatter',coordinateSystem:'geo',symbol:'circle',symbolSize: function(val){return val[2]/10;},data:convertData(pmData)},{name:'Top5',type:'effectScatter',coordinateSystem:'geo',data:convertData(pmData.sort(function(a,b){return b.value-a.value;}).slice(0,5)),showEffectOn: 'emphasis',rippleEffect: {brushType: 'stroke'},effectType:"ripple", //特效类型，目前只支持涟漪特效'ripple'。showEffectOn:"render", //配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。rippleEffect:{ //涟漪特效相关配置。period:4, //动画的时间。scale:2.5, //动画中波纹的最大缩放比例。brushType:'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'。},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true,color:'yellow'}},itemStyle: {normal: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1,symbolSize: function(val){return val[2]/10;},}]option.series = series;myChart.setOption(option);</script></body>
</html>