Table of contents
1. Data source and html file prerequisites
I. Introduction
1.Purpose introduction
This experiment uses the visualization tool Echarts to intuitively display PM2.5 values in major cities across the country, allowing people to quickly discover key points of information and gain an intuitive understanding of the air quality in each city.
2. Effect picture preview
3.html code preview:
<!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>2. Premise
1. Data source and html file prerequisites
data source:
HTML file preview:
Data source file and HTML file download link:
https://pan.baidu.com/s/1UGridvfqTx-Pi_mCkyMwEQ?pwd=v20oExtraction
code: v20o
--Sharing from Baidu Netdisk Super Member V2
2.Software premise
apache-tomcat-9.0.68notepad++Software download link:
https://pan.baidu.com/s/17ruuHAwswPHVmt2QMBLNjA?pwd=ttr9
Extraction code: ttr9
3. System premise
需提前安装配置好JDK3. Operation steps
1.Install TomCat
2. The webapps in the tomcat directory are used to store applications. Create a Myweb directory under the webapps in the tomcat directory, and place the data source files and html code in the myweb directory.
3. Find the startup.bat file in tomcat’s bin directory and double-click to start (JDK needs to be installed in advance)
4. Startup.bat startup effect preview, garbled characters are normal and will not affect the operation.
Note: Do not shut down after starting! ! !
5. Next we open the browser and enter the tomcat server
http://localhost:8080/This page appears to prove successful startup:
6. Execute the html file under the application
Among them, "Myweb" is the directory just created under webapps
http://localhost:8080/Myweb/AirQuality.htmlFinal result picture:
Summarize
Of course, from a learning perspective, it is recommended to start with html files to understand the functions and usage of various image configuration items and deepen your impression.
Common mistakes:
(1) The startup.bat process is closed after it is started.
(2) The html file and the data source file are not in the same directory (if they are in different directories, the path to the data source file needs to be specified):
(3) The startup.bat file crashes during startup (you can find the solution by yourself)
(4) The following code is not configured at the end of the html file:
If you want to know and learn more graphics configuration items, you can visit Echarts official website
Documentation - Apache ECharts
Finally, if the content is helpful to you, please give it a like! !