Echarts实现空气质量仪表盘网页

youngbingbing

已于 2022-04-02 10:39:50 修改

阅读量1.3k

点赞数 1

文章标签： echarts html ajax

于 2021-08-24 23:43:40 首次发布

本文链接：https://blog.csdn.net/youngbingbing/article/details/119855960

版权

本文介绍了使用Echarts和Flask构建全国及城市空气质量查询网页的过程。内容包括Python爬虫获取数据，Echarts展示地图、饼图等图表，以及前端通过Ajax与后端交互更新时间及查询结果。

摘要由CSDN通过智能技术生成

Echarts实现空气质量仪表盘

前端的文件是在“static”和“templates”目录下，“templates”存放网页“html”文件，“static”存放修饰网页的“css”、“js”和“json”文件。
以下为我们项目有关文件目录的结构。可以看见我们前端文件的分布。

对于前端的文件：

1、“templates”里的两个html文件，就是我们的网页文件，有网页控件的设计；会读取有关的css文件渲染页面；读取有关“control.js”实现输入项具体的功能实现。
2、“static”->“province”中的json文件是省份的地图数据。
3、“static”中的“echarts.min.js”是echarts功能的配置文件；“flexible.js”是网页实现一些布局时需要的配置文件；“jquery.js”是网页实现数据传向后Ajax的配置文件。
4、“static”中的“cur_control.js”是全国空气质量查询的有功能实现的文件，比如：点击网页中的“提交”按钮，会将输入框的数据都传回flask，然后又将返回的信息进行处理，调用各个图模块的实现函数，进行图的重新绘制；“cur_map_table.js”、“cur_Pie_table.js”“cur_rank_table.js”分别是各个图表模块的绘制。

对目录和文件了解了之后，便开始具体代码的实现。

一、全国空气质量查询网页设计

1、current_time.html，主要对页面的部件进行了定义，然后导入相应的文件，具体实现只有页面跳转在这里实现了，其它的都在相应地的js文件中实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>全国空气质量实时查询</title>
<!--    导入css渲染-->
    <link type="text/css" href="../static/css/current_time.css" rel="stylesheet" />
<!--    导入有关的配置文件-->
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/china.js"></script>
</head>
<body>
    <div id="title">全国空气质量实时查询</div>
    <div id="time_now">2021/6/29</div>
    <div id="time_update">2021/6/28</div>
    <div id="change">
        <button onclick="tz()">城市空气质量查询</button>
        <button>全国空气质量查询</button>
<!--        页面切换-->
        <script type="text/javascript" language="javascript">
            function tz(){
   
                window.location.href='http://127.0.0.1:5000/visual_histroy';}
        </script>
    </div>
    <div id="table1">
        <form id="form2" style="text-alige:left">
            <h1>省份
                <input type="text" name="province_name" style="height:30px;width:160px;font-size:30px;">
                <input type="submit" value="点击查询">
<!--                提交-->
            </h1>
        </form>
    </div>
    <div id="chinaMap">全国地图</div>
    <div id="Pie">全国空气质量饼图</div>
    <div id="rank">全国各省空气质量排名</div>
<!--    具体模块的实现-->
    <script src="../static/js/cur_Pie_table.js"></script>
    <script src="../static/js/cur_rank_table.js"></script>
    <script src="../static/js/cur_map_table.js"></script>
    <script src="../static/js/cur_control.js"></script>
</body>
</html>

2、cur_control.js，是实现功能的主要文件。
2.1、更新实时时间。通过向“/time”路由，发送请求，后端返回当前实时的时间。然后通过显示时间模块的id("#time_now")，进行更新。

// 获取实时数据
function getnowtime() {
   
    $.ajax({
   
        url:"/time",			// 路由
        data:{
   "name":"现在"},	// 传递的参数
        type:"post",            // HTTP请求类型
        timeout:10000,          // 超时设置为10秒
        success:function(data) {
   	// 返回的数据
            $("#time_now").html("当前时间：" + data) // 在网页中更新时间
        },
        error:function(){
   
            alter("实时数据时间失败")
        },
    })
}

2.1、表单提交。当输入了查询项，点击了查询按钮，就会跳转到此，执行此函数。我们想要自定义传输数据，就需要禁用表单的自动提交。根据返回的数据，进行图表模块的更新。
对于地图，因为省份的地图数据和全国的地图有点不一样，echarts可以直接使用“china.js”全国地图数据，而省份的地图数据，需要进行注册；且在js中找了很久，也没有找到较好实现读取省份json数据文件的方法，于是使用后端python读取到了数据，然后传到前端再更新地图。

// 表单提交，post获取数据
$("#form2").submit(function(e){
   
	e.preventDefault();             // 禁用表单的自动提交
    var province_name = $(this).serialize();
    $.ajax({
   
        url:"/data_country",
        type:'POST',
        data: $(this).serialize(),   // 这个序列化传递很重要
        success:function(data) {
   
            $("#time_update").html(data.Today_time)     //设置更新时间
            if(data.p_name == "全国"){
                       // 如果是全国地图则直接绘制
                echarts1.setOption(drawMap('china',{
   }