这个是虚幻私塾的主站。牢记域名: [xuhss.com](拼音首字母)。首页可以搜索或: 虚幻账号

Python Flask定时调度疫情大数据爬取全栈项目实战使用-14中国地图ajax动态获取数据

python-flask 虚幻 225℃ 0评论

中国地图

一、复制中国地图option,导入china.js

ec_center.js定义了option,复制到项目的js文件夹中

//初始化echarts实例
var ec_center = echarts.init(document.getElementById("c2"),"dark");
var mydata = []
var optionMap = {
        title: {
            text: '',
            subtext: '',
            x: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        //左侧小导航图标
        visualMap: {
            show: true,
            x: 'left',
            y: 'bottom',
            textStyle: {
                fontSize: 8
            },
            splitList: [{
                    start: 1,
                    end: 9
                },
                {
                    start: 10,
                    end: 99
                },
                {
                    start: 100,
                    end: 999
                },
                {
                    start: 1000,
                    end: 9999
                },
                {
                    start: 10000
                }
            ],
            color: ['#8A3310','#C64918', '#E55B25','#F2AD92', '#F9DCD1']
        },

            //配置属性
            series: [{
                name: '累积确诊人数',
                type: 'map',
                mapType: 'china',
                roam: false,
                itemStyle: {
                    normal: {
                        borderWidth: .5,
                        borderColor: '#009fe8',
                        areaColor: '#ffefd5'
                    },
                    emphasis: {
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor: '#fff'
                    }
                },
                label: {
                    normal: {
                        show: true, //省份名称
                        fontSize: 8
                    },
                    emphasis: {
                        show: true,
                        fontSize: 8
                    }
                },
                data: mydata //数据
            }]
        };

        //使用制定的配置项和数据显示图表
        ec_center.setOption(optionMap);

main.html引入echarts.min.js china.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>疫情监控</title>
        <script src="../static/js/jquery.js"></script>
        <script src="../static/js/echarts.min.js"></script>
        <script src="../static/js/china.js"></script>

body中 把ec_center.js引入进来

        <div id="r1">我是右1</div>
        <div id="r2">我是右2</div>
        <script src="../static/js/ec_center.js"></script>

优化main.html代码 把js抽取出来

新建一个controller.js

            function gettime(){
                $.ajax({
                    url:"/time",
                    timeout:10000,//超时时间设置为10秒;
                    success:function(data){
                        $("#time").html(data)
                    },
                    error:function(xhr,type,errorThrown){

                    }
                });
            }

            function get_c1_data(){
                $.ajax({
                        url:"c1",
                        success:function(data){
                            $(".num h1").eq(0).text(data.confirm);
                            $(".num h1").eq(1).text(data.suspect);
                            $(".num h1").eq(2).text(data.heal);
                            $(".num h1").eq(3).text(data.dead);
                        },
                        error:function(xhr,type,errorThrown){

                        }
                })
            }
            //setInterval(get_c1_data, 1000)
            // setInterval(gettime, 1000)

main.html 引入controller.js

        <div id="c2">我是中2</div>
        <div id="r1">我是右1</div>
        <div id="r2">我是右2</div>
        <script src="../static/js/ec_center.js"></script>
        <script src="../static/js/controller.js"></script>

添加controllers.js获取后台数据

function get_c2_data(){
    $.ajax({
            url:"c2",
            success:function(data){
                optionMap.series[0].data = data.data
                ec_center.setOption(optionMap)
            },
            error:function(xhr,type,errorThrown){

            }
    })
}

二、 前后台数据交流

utils.py添加数据库获取函数

def get_c2_data():
    """
    :return 返回各省数据
    """
    sql= "select province,sum(confirm) from details" \
            " where update_time=(select update_time from  details order by update_time desc limit 1)" \
            " group by province"
    res = query(sql)
    return  res

app.py 添加c2接口路由:

@app.route('/c2')
def get_c2_data():
    res = []
    for tup in utils.get_c2_data():
        print(tup)
        res.append({"name":tup[0],"value":int(tup[1])})
    return jsonify({"data": res})

更改前端调用方式 只是调用1次:

function get_c2_data(){
    $.ajax({
            url:"c2",
            success:function(data){
                optionMap.series[0].data = data.data
                ec_center.setOption(optionMap)
            },
            error:function(xhr,type,errorThrown){

            }
    })
}
gettime()
get_c1_data()
get_c2_data()

最后的运行结果:

20210323071225278 - Python Flask定时调度疫情大数据爬取全栈项目实战使用-14中国地图ajax动态获取数据

转载请注明:虚幻私塾 » Python Flask定时调度疫情大数据爬取全栈项目实战使用-14中国地图ajax动态获取数据

喜欢 (8)

您必须 登录 才能发表评论!