目录
一、前言
1.目的介绍
本次实验通过可视化工具Echarts来对全国主要城市的ＰＭ2.5的值进行直观的展示，使人们可以快速的发现信息的关键点，从而对各个城市的空气质量情况有直观的了解。
2.效果图预览
3.html代码预览：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- <meta charset="GB2312" /> -->
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.min.js"></script>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<!-- //图形在网页的长宽 DOM -->
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
<!-- Step 1：加载主要城市经纬度数据 -->
var cityCoordData = null;
$.ajax(
{
url :'dtData.json',
async:false,
dataType:"json",
success:function(data){
cityCoordData = data;
}
}); //ajax_end
<!-- Step 2: 加载主要城市PM2.5数据 -->
var pmData = null;
$.ajax(
{
url : 'pmData.json',
async:false,
dataType:"json",
success:function(data){
pmData = data.pmData;
}
});//ajax_end
<!-- Step 3: 对数据进行处理 -->
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;
};
var option =
{
<!-- geo是地理坐标系组件 -->
geo: {
map:'china',
roam: true,
itemStyle:{
normal:{
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis:{
areaColor: '#2a333d'
}
}
},
<!-- Step 2：配置visualMap -->
visualMap:{
type: 'piecewise',
splitNumber:6,
min:0,
max:360,
textStyle:{
color:'white'
}
},
<!-- Step 1:优化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];
}
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
<!-- Step 4: 设置series -->
var series = [
{
name:"PM2.5",
type:'scatter',
coordinateSystem:'geo',
symbol:'circle',
//symbolSize: 10,
<!-- Step 1：优化series -->
symbolSize: function(val){
return val[2]/10;
},
data:convertData(pmData)
},
<!-- Step 1：绘制带特效的散点图 -->
{
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>二、前提
1.数据源和html文件前提
数据源：
HTML文件预览:
数据源文件和HTML文件下载链接：
https://pan.baidu.com/s/1UGRidvfqTx-Pi_mCkyMwEQ?pwd=v20o
提取码：v20o
--来自百度网盘超级会员V2的分享
2.软件前提
apache-tomcat-9.0.68notepad++软件下载链接：
https://pan.baidu.com/s/17ruuHAwswPHVmt2QMBLNjA?pwd=ttr9
提取码：ttr9
3.系统前提
需提前安装配置好JDK三、运行步骤
1.安装TomCat
2.tomcat目录下的webapps是用来存放应用程序的，在tomcat目录下的webapps下创建一个Myweb目录，将数据源文件和html代码放在myweb目录下。
3.在tomcat的bin目录下找到startup.bat文件，双击启动（需要提前安装JDK）
4.startup.bat启动效果预览，出现乱码为正常现象，不影响运行。
注意：启动后不要关闭！！！
5.接下来我们打开浏览器，进入tomcat的服务器
http://localhost:8080/出现此页面证明启动成功：
6.执行应用程序下的html文件
其中“Myweb”为刚刚在webapps下创建的目录
http://localhost:8080/Myweb/AirQuality.html最终结果图：
总结
当然，从学习的角度来看还是建议从html文件入手，了解各种图像配置项的作用以及用法，加深印象。
常见错误：
（1）startup.bat进程启动后被关闭
（2）html文件与数据源文件不在同一目录下（如在不同目录，则需指定数据源文件的路径）：
（3）startup.bat文件启动闪退（可自行查找解决方法）
（4）html文件末尾未配置如下代码：
想要了解和学习更多图形配置项可浏览Echarts官网
Documentation - Apache ECharts
最后，如果内容对你有帮助，不妨点个赞！！