网约车大数据综合项目——数据可视化Flask+Echarts

Wa_Automata

已于 2024-06-13 12:00:34 修改

阅读量2.3k

点赞数 2

分类专栏：头歌实践教学平台文章标签：大数据信息可视化 flask

于 2023-06-02 08:21:16 首次发布

本文链接：https://blog.csdn.net/qq_52792570/article/details/130999414

版权

头歌实践教学平台专栏收录该内容

9 篇文章 11 订阅

订阅专栏

网约车大数据综合项目——数据可视化Flask+Echarts

第1关使用饼图展示撤销订单理由最多的前10种理由

class Config(object):
    #连接数据库
    ########## Begin ##########
    SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:123123@0.0.0.0:3306/trafficdb"
    SQLALCHEMY_TRACK_MODIFICATIONS = True
    ########## End ##########

from app import  db
########## Begin ##########
class cancelreason(db.Model):
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    cancelreason = db.Column(db.String(50))
    num = db.Column(db.Integer)
########## End ##########

from sqlalchemy.sql.elements import Cast
from app import db, app
from app.models.cancelreason import cancelreason
from flask import render_template, jsonify
@app.route("/cancelreasondata",methods=['POST'])
def cancel_reason():
    ########## Begin ##########
    cancelreasondata = cancelreason.query.order_by(cancelreason.num.desc()).all()
    list_ = []
    for x in cancelreasondata:
        data={
                "cancelreason":x.cancelreason,
                "num":x.num
            }
        list_.append(data)
    return jsonify(list_)
    ########## End ##########
@app.route("/cancelreason",methods=['GET'])
def home1():
    return render_template("cancelreason.html")
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撤销订单理由top10</title>
</head>
<body>
<div id="main" style="height: 800px;width:1200px;background:white;margin:20px 0 0;"></div>
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<script type="text/javascript">
    /********** Begin **********/
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            type: "post",
            async: true,
            url: "/cancelreasondata",
            dataType: "json",
            success: function (result) {
                var cancelreasons = [];
                var data = [];
                for (var i = 0; i < result.length; i++) {
                    cancelreasons.push(result[i].cancelreason);
                    data.push({"value": result[i].num, "name": result[i].cancelreason});
                }
                option = {
                    title: {
                        text: '撤销订单理由top10',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: cancelreasons
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    });
    /********** End **********/
</script>
</body>
</html>

第2关：使用柱状图展示成功订单最多的10个地区

class Config(object):
    #连接数据库
    ########## Begin ##########
    SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:123123@0.0.0.0:3306/trafficdb"
    SQLALCHEMY_TRACK_MODIFICATIONS = True
    ########## End ##########

from app import  db
########## Begin ##########
class order_district(db.Model):
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    districtname = db.Column(db.String(50))
    num = db.Column(db.Integer)
########## End ##########

from sqlalchemy.sql.elements import Cast
from app import db, app
from app.models.order_district import order_district
from flask import render_template, jsonify
@app.route("/order_districtdata",methods=['POST'])
def order_districtdata():
    ########## Begin ##########
    order_districtdata = order_district.query.order_by(order_district.num.desc()).all()
    list_ = []
    for x in order_districtdata:
        data={
                "districtname":x.districtname,
                "num":x.num
            }
        list_.append(data)
    print(list_)
    return jsonify(list_)
    ########## End ##########
@app.route("/order_district",methods=['GET'])
def home2():
    return render_template("order_district.html")
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成功订单数量最高的地区top10</title>
</head>
<body>
<center>
<div id="main" style="height: 750px;width:1000px;background:white;margin:20px 0 0;"></div>
</center>
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<script type="text/javascript">
    /********** Begin **********/
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            type: "post",
            async: true,
            url: "/order_districtdata",
            dataType: "json",
            success: function (result) {
                var districtnames = [];
                var data = [];
                for (var i = 0; i < result.length; i++) {
                    districtnames.push(result[i].districtname);
                    data.push(result[i].num);
                }
                option = {
                    title: {
                        text: '成功订单数量最高的地区top10',
                        left: 'center'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: districtnames,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value.split("").join("\n");
                                }
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '成功订单数量',
                            type: 'bar',
                            barWidth: '60%',
                            data: data
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    });
    /********** End **********/
</script>
</body>
</html>

第3关在湖南省地图上用热力图展示各个市的订单数量

class Config(object):
    #连接数据库
    ########## Begin ##########
    SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:123123@0.0.0.0:3306/trafficdb"
    SQLALCHEMY_TRACK_MODIFICATIONS = True
    ########## End ##########

from app import  db
########## Begin ##########
class orderbycity(db.Model):
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    city = db.Column(db.String(50))
    num = db.Column(db.Integer)
########## End ##########

from sqlalchemy.sql.elements import Cast
from app import db, app
from app.models.tb_orderbycity import orderbycity
from flask import render_template, jsonify
########## Begin ##########
@app.route("/orderbycitydata",methods=['POST'])
def orderbycitydata():
    orderbycitydata = orderbycity.query.order_by(orderbycity.num.desc()).all()
    list_ = []
    for x in orderbycitydata:
        data={
                "city":x.city,
                "num":x.num
            }
        list_.append(data)
    print(list_)
    return jsonify(list_)
@app.route("/orderbycity",methods=['GET'])
def home4():
    return render_template("orderbycity.html")
########## End ##########
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>湖南省各个城市订单数量</title>
</head>
<body>
<center>
    <div id="main" style="height: 750px;width:1000px;background:white;margin:20px 0 0;"></div>
</center>
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<script type="text/javascript">
    /********** Begin **********/
    $(document).ready(function () {
        $.ajax({
            type: "post",
            async: true,
            url: "/orderbycitydata",
            dataType: "json",
            success: function (result) {
                var data = [];
                for (var i = 0; i < result.length; i++) {
                    data.push(data.push({"value": result[i].num, "name": result[i].city}));
                }
                var url = window.location.href;
                var myChart = echarts.init(document.getElementById('main'));
                myChart.showLoading();
                $.get(url.substring(0, url.lastIndexOf("/")) + '/static/hunan.json', function (geoJson) {
                    myChart.hideLoading();
                    echarts.registerMap('hunan', geoJson);
                    myChart.setOption(option = {
                        title: {
                            text: '湖南省各个市网约车订单数量',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}<br/>{c} (p / km2)'
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                dataView: {readOnly: false},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        visualMap: {
                            min: 5000,
                            max: 200000,
                            text: ['High', 'Low'],
                            realtime: false,
                            calculable: true,
                            inRange: {
                                color: ['lightskyblue', 'yellow', 'orange', 'red']
                            }
                        },
                        series: [
                            {
                                name: '湖南省各个市网约车订单数量',
                                type: 'map',
                                mapType: 'hunan', // 自定义扩展图表类型
                                label: {
                                    show: true
                                },
                                data: data
                            }
                        ]
                    });
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    });
    /********** End **********/
</script>
</body>
</html>

第4关用折线图展示湖南省各个市在各个时间段的订单数量

class Config(object):
    #连接数据库
    ########## Begin ##########
    SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:123123@0.0.0.0:3306/trafficdb"
    SQLALCHEMY_TRACK_MODIFICATIONS = True
    ########## End ##########

from app import  db
########## Begin ##########
class order_city_hour(db.Model):
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    hour = db.Column(db.String(50))
    city = db.Column(db.String(50))
    num = db.Column(db.Integer)
########## End ##########

from sqlalchemy.sql.elements import Cast
from app import db, app
from app.models.order_city_hour import order_city_hour
from flask import render_template, jsonify
########## Begin ##########
@app.route("/order_city_hourdata",methods=['POST'])
def order_city_hourdata():
    order_city_hourdata = order_city_hour.query.order_by(order_city_hour.city,Cast(order_city_hour.hour,db.Integer)).all()
    list_ = []
    for x in order_city_hourdata:
        data={
                "hour":x.hour,
                "city":x.city,
                "num":x.num
            }
        list_.append(data)
    print(list_)
    return jsonify(list_)
@app.route("/order_city_hour",methods=['GET'])
def home6():
    return render_template("order_city_hour.html")
########## End ##########
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>湖南省各个城市各个时间段订单数量</title>
</head>
<body>
<div id="main" style="height: 800px;width:1200px;background:white;margin:20px 0 0;"></div>
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<script type="text/javascript">
    /********** Begin **********/
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            type: "post",
            async: true,
            url: "/order_city_hourdata",
            dataType: "json",
            success: function (result) {
                var citys = [];
                var hours = [];
                var series = [];
                for (var i = 0; i < result.length; i++) {
                    if (hours.indexOf(result[i].hour) === -1) {
                        hours.push(result[i].hour);
                    }
                    if (citys.indexOf(result[i].city) === -1) {
                        var city = result[i].city;
                        citys.push(city);
                        var data = [];
                        for (var y = 0; y < result.length; y++) {
                            if (result[y].city === city) {
                                data.push(result[y].num);
                            }
                        }
                        series.push({"name": result[i].city, "type": "line", "data": data});
                    }
                }
                option = {
                    title: {
                        text: '湖南省各市每小时订单量'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: citys
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: hours
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: series
                };
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    });
    /********** End **********/
</script>
</body>
</html>

第5关用直方图展示全省在各个时间段的订单数量

class Config(object):
    #连接数据库
    ########## Begin ##########
    SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:123123@0.0.0.0:3306/trafficdb"
    SQLALCHEMY_TRACK_MODIFICATIONS = True
    ########## End ##########

from app import  db
########## Begin ##########
class order_quantity_time(db.Model):
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    time = db.Column(db.String(50))
    num = db.Column(db.Integer)
########## End ##########

from sqlalchemy.sql.elements import Cast
from app import db, app
from app.models.order_quantity_time import order_quantity_time
from flask import render_template, jsonify
########## Begin ##########
@app.route("/order_quantity_timedata",methods=['POST'])
def order_quantity_timedata():
    order_quantity_timedata = order_quantity_time.query.order_by(order_quantity_time.time).all()
    list_ = []
    for x in order_quantity_timedata:
        data={
                "time":x.time,
                "num":x.num
            }
        list_.append(data)
    print(list_)
    return jsonify(list_)
@app.route("/order_quantity_time",methods=['GET'])
def home5():
    return render_template("order_quantity_time.html")
########## End ##########
if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>湖南省某天订单详情</title>
</head>
<body>
<center>
<div id="main" style="height: 600px;width:1200px;background:white;margin:20px 0 0;"></div>
</center>
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<script type="text/javascript">
    /********** Begin **********/
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            type: "post",
            async: true,
            url: "/order_quantity_timedata",
            dataType: "json",
            success: function (result) {
                var categoryData = [];
                var valueData = [];
                for (var i = 0; i < result.length; i++) {
                    categoryData.push(result[i].time);
                    valueData.push(result[i].num);
                }
                var option = {
                    title: {
                        text: '湖南省某天订单详情',
                        left: 10
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            saveAsImage: {
                                pixelRatio: 2
                            }
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        bottom: 90
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider'
                    }],
                    xAxis: {
                        data: categoryData,
                        silent: false,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: function (value) {
                                return value.replace(" ","\n");
                            }
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    yAxis: {
                        splitArea: {
                            show: false
                        }
                    },
                    series: [{
                        type: 'bar',
                        data: valueData,
                        // Set `large` for large data amount
                        large: true
                    }]
                };
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        });
    });
    /********** End **********/
</script>
</body>
</html>

Wa_Automata

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
8
评论
网约车大数据综合项目——数据可视化Flask+Echarts

网约车大数据综合项目——数据可视化Flask+Echarts第1关使用饼图展示撤销订单理由最多的前10种理由class Config(object): #连接数据库 ########## Begin ########## SQLALCHEMY_DATABASE_URI = "mysql+pymysql://root:123123@0.0.0.0:3306/trafficdb" SQLALCHEMY_TRACK_MODIFICATIONS = True #####
复制链接

扫一扫