javascript ecmascript Echarts、js编写“中国主要城市空气质量对比”散点图,tomcat实现部署到服务器上运行

目录

一、前言

1.目的介绍

2.效果图预览

3.html代码预览：

二、前提

1.数据源和html文件前提

2.软件前提

3.系统前提

三、运行步骤

总结

一、前言

1.目的介绍

 本次实验通过可视化工具Echarts来对全国主要城市的ＰＭ2.5的值进行直观的展示，使人们可以快速的发现信息的关键点，从而对各个城市的空气质量情况有直观的了解。

2.效果图预览

3.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

最后，如果内容对你有帮助，不妨点个赞！！

好文链接

 您阅读本篇文章共花了：