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

Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

python-flask 虚幻 340℃ 0评论

可视化大屏模板制作

一、最终的效果

c23bca53959d1e34a600febc7302e7b7 - Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

复制ec_left1.js到目录下面

222a5581f7a02a622bbfb024bc5b0398 - Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

关于各个配置项的介绍可以参考:

https://echarts.apache.org/zh/option.html#title

32e5766efc836ff3a52b095a6acf73f1 - Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

main.html引入js文件

5032cf011ad98d904c80c115f8cdaca5 - Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

utils.py添加获取数据库数据的方案:

bdc5b0d40bd6cc5efec8aaa92015ed1d - Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

def get_l1_data():
    sql = "select ds,confirm,suspect,heal,dead from history"
    res = query(sql)
    return res

def get_l2_data():
    sql = "select ds,confirm_add,suspect_add from history"
    res = query(sql)
    return res

app.py定义前端访问的路由:

@app.route('/l1')
def get_l1_data():
    data = utils.get_l1_data()
    day,confirm,suspect,heal,dead = [],[],[],[],[]
    for a,b,c,d,e in data[0:]:
        day.append(a.strftime("%m-%d"))
        confirm.append(b)
        suspect.append(c)
        heal.append(d)
        dead.append(e)
    return jsonify({"day":day,"confirm":confirm,"suspect":suspect,"heal":heal,"dead":dead})

@app.route('/l2')
def get_l2_data():
    data = utils.get_l2_data()
    day,confirm_add,suspect_add = [],[],[]
    for a,b,c in data[0:]:
        day.append(a.strftime("%m-%d"))
        confirm_add.append(b)
        suspect_add.append(c)
    return jsonify({"day":day,"confirm_add":confirm_add,"suspect_add":suspect_add})

在前端页面main.html引用的controler.js中编写ajax请求:

52d501ea2b224cd118232ac0037a46b9 - Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

function get_l1_data() {
    $.ajax({
        url:"/l1",
        success: function(data) {
            option_left1.xAxis.data = data.day
            option_left1.series[0].data = data.confirm
            option_left1.series[1].data = data.suspect
            option_left1.series[2].data = data.heal
            option_left1.series[3].data = data.dead
            ec_left1.setOption(option_left1)
        },
        error: function(xhr, type, errorThrown) {

        }
    })
}

运行app.py:

33b538ce7da33987e1f040eaff66b130 - Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

添加左下角l2的数据:

引入ec_left2.js文件

ca7c6d0dd15eae2150c858f46479a821 - Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

在前端页面main.html引用的controler.js中编写ajax请求:

function get_l2_data() {
    $.ajax({
        url:"/l2",
        success: function(data) {
            option_left2.xAxis.data = data.day
            option_left2.series[0].data = data.confirm_add
            option_left2.series[1].data = data.suspect_add
            ec_left2.setOption(option_left2)
        },
        error: function(xhr, type, errorThrown) {

        }
    })
}
get_l2_data()

转载请注明:虚幻私塾 » Python Flask定时调度疫情大数据爬取全栈项目实战使用-17可视化大屏左侧模板制作

喜欢 (1)

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