目录
一、前言
1.目的介绍
本次实验通过可视化工具Echarts来对全国主要城市的PM2.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.68
notepad++
软件下载链接:
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
最后,如果内容对你有帮助,不妨点个赞!!