您现在的位置是：首页 >学无止境 >网约车大数据综合项目——数据可视化Flask+Echarts网站首页学无止境
网约车大数据综合项目——数据可视化Flask+Echarts
简介网约车大数据综合项目——数据可视化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
########## 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("
");
}
},
}
],
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 orderline(db.Model):
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
departure = db.Column(db.String(50))
deplongitude = db.Column(db.String(50))
deplatitude = db.Column(db.String(50))
destination = db.Column(db.String(50))
destlongitude = db.Column(db.String(50))
destlatitude = 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.orderline import orderline
from flask import render_template, jsonify
@app.route("/orderlinedata",methods=['POST'])
def orderlinedata():
########## Begin ##########
orderlinedata = orderline.query.order_by(orderline.num.desc()).all()
list_ = []
for x in orderlinedata:
data={
"departure":x.departure,
"deplongitude": x.deplongitude,
"deplatitude": x.deplatitude,
"destination": x.destination,
"destlongitude": x.destlongitude,
"destlatitude": x.destlatitude,
"num":x.num
}
list_.append(data)
print(list_)
return jsonify(list_)
########## End ##########
@app.route("/orderline",methods=['GET'])
def home3():
return render_template("orderline.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">
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
var map = new BMap.Map("allmap");// 创建地图实例
var point = new BMap.Point(113.200000, 27.588888);// 创建点坐标
map.centerAndZoom(point, 9);//设初始化地图。 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别
map.addControl(new BMap.NavigationControl());//缩放平移控件
map.enableScrollWheelZoom();//利用鼠标滚轮控制大小
$.ajax({
type: "post",
async: true,
url: "/orderlinedata",
dataType: "json",
success: function (result) {
var datas = [];
for (var y = 0; y < result.length; y++) {
var data = [];
data.push(result[y].deplongitude);
data.push(result[y].deplatitude);
data.push(result[y].destlongitude);
data.push(result[y].destlatitude);
data.push(result[y].departure);
data.push(result[y].destination);
datas.push(data);
}
//1.初始化路程线
for (var i = 0; i < datas.length; i++) {
var polyline = new BMap.Polyline([
new BMap.Point(datas[i][0], datas[i][1]),
new BMap.Point(datas[i][2], datas[i][3])
], {strokeColor: "red", strokeWeight: 3, strokeOpacity: 0.5});
//2.将线添加到地图上
map.addOverlay(polyline);
//3.调用绘制箭头线函数
// addArrow(polyline,10,Math.PI/7);
//4.设置起始点标注
var marker = new BMap.Marker(new BMap.Point(datas[i][0], datas[i][1]));
console.log(datas[i][0] + "," + datas[i][1]);
var label = new BMap.Label(datas[i][4], {offset: new BMap.Size(20, 0)});
console.log(datas[i][4]);
marker.setLabel(label);
map.addOverlay(marker);
var marker = new BMap.Marker(new BMap.Point(datas[i][2], datas[i][3]));
var label = new BMap.Label(datas[i][5], {offset: new BMap.Size(20, 0)});
marker.setLabel(label);
map.addOverlay(marker);
}
//绘制箭头的函数
function addArrow(polyline, r, angle) {
var linePoint = polyline.getPath();//线的坐标串（里面存的就是起始点的坐标点）
var arrowCount = linePoint.length;
for (var i = 1; i < arrowCount; i++) { //在拐点处绘制箭头
var pixelStart = map.pointToPixel(linePoint[i - 1]);
var pixelEnd = map.pointToPixel(linePoint[i]);
var pixelTemX, pixelTemY;//临时点坐标
var pixelX, pixelY, pixelX1, pixelY1;//定义箭头两个点坐标
var delta = (pixelEnd.y - pixelStart.y) / (pixelEnd.x - pixelStart.x);//主线斜率，垂直时无斜率
var param = Math.sqrt(delta * delta + 1);//代码简洁考虑
if ((pixelEnd.x - pixelStart.x) < 0) { //第二、三象限
pixelTemX = pixelEnd.x + r / param;
pixelTemY = pixelEnd.y + delta * r / param;
} else { //第一、四象限
pixelTemX = pixelEnd.x - r / param;
pixelTemY = pixelEnd.y - delta * r / param;
}
//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
pixelX = pixelTemX + Math.tan(angle) * r * delta / param;
pixelY = pixelTemY - Math.tan(angle) * r / param;
pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param;
pixelY1 = pixelTemY + Math.tan(angle) * r / param;
var pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY));
var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1));
var Arrow = new BMap.Polyline([
pointArrow, linePoint[i], pointArrow1
], {strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5});
map.addOverlay(Arrow);
return Arrow;
}
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
});
});
</script>
第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 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>
第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_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>
第6关 用直方图展示全省在各个时间段的订单数量
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(" ","
");
}
},
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>
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。
站长推荐
- stm32使用HAL库配置串口中断收发数据（保姆级教程）
stm32使用HAL库配置串口中断收发数据（保姆级教程） - SpringSecurity实现前后端分离认证授权
SpringSecurity实现前后端分离认证授权 - U8W/U8W-Mini使用与常见问题解决
U8W/U8W-Mini使用与常见问题解决 - 【社区图书馆】伴我前行的一本书《The C Programming Language》
【社区图书馆】伴我前行的一本书《The C Programming Language》 - 【云原生进阶之容器】第六章容器网络6.6.1--Cilium网络方案概述
【云原生进阶之容器】第六章容器网络6.6.1--Cilium网络方案概述