目录
Flask可视化
工具:
Python Flask——后台
html+css——前台页面
js(ajax)——前后台数据通信
mysql——存放数据
echart实现各种图形绘制
一、创建文件
可以参照下面的链接
创建flak
二、写html文件
1.写html的基本代码
2.写盒子div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝可视化</title>
<script src = '../static/js/echats.js'></script>
<script src = '../static/js/jquery-3.6.0.js'></script>
<link href="../static/css/tbcss.css" rel = 'stylesheet'>
</head>
<body>
<div id ='title'>信息可视化</div>
<div id = 'l_top'>123</div>
<div id = 'l_bottom'>123</div>
<div id = 'c_top'>123</div>
<div id = 'c_bottom'>123</div>
<div id = 'r_top'>123</div>
<div id = 'r_bottom'>123</div>
<script src = '../static/js/tbajax.js'></script>
<script src = '../static/js/tbecharts.js'></script>
</body>
</html>
3.css文件
*{
margin: 0;
padding: 0;
}
#title{
position: absolute;
height: 16%;
width: 100%;
color: white;
font-size: 30px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
#l_top{
position: absolute;
width: 30%;
height: 42%;
top: 16%;
background-color: cornflowerblue;
}
#l_bottom{
position: absolute;
width: 30%;
height: 42%;
top: 58%;
background-color: bisque;
}
#c_top{
position: absolute;
width: 40%;
height: 42%;
top: 16%;
left: 30%;
background-color: chartreuse;
}
#c_bottom{
position: absolute;
width: 40%;
height: 42%;
top: 58%;
left: 30%;
background-color: yellow;
}
#r_top{
position: absolute;
width: 40%;
height: 42%;
top: 16%;
left: 70%;
background-color: beige;
}
#r_bottom{
position: absolute;
width: 40%;
height: 42%;
top: 58%;
left: 70%;
background-color: aqua;
}
4.连接数据库并处理数据
import pymysql
def connect():
conn = pymysql.Connect(host='127.0.0.1',port=3306,user='root',password='tz15035895786',db='tb',charset='utf8')
cursor = conn.cursor()
return cursor,conn
def closecn(cursor,conn):
cursor.close
conn.close
def query(sql):
cursor,conn = connect()
cursor.execute(sql)
res = cursor.fetchall()
closecn(cursor,conn)
return res
def get_data1():
sql ='select province,count(province) from tb group by province order by count(province) desc limit 10;'
result = query(sql)
city = []
citycount = []
for i in result:
city.append(i[0])
citycount.append(i[1])
print(city)
print(citycount)
return city,citycount
get_data1()
5.使用python.py文件,让app跑起来
from flask import Flask
from flask import render_template
from flask import jsonify
import util
app = Flask(__name__)
@app.route('/')
def index(): # put application's code here
return render_template('index.html')
@app.route('/data1')
def get_data():
city,citycount = util.get_data1()
return jsonify({'city':city,'citycount':citycount})
@app.route('/data2')
def get_data2():
gendercount = util.get_data2()
return jsonify({'gendercount':gendercount})
@app.route('/data3')
def get_data3():
item_id,item_idcount = util.get_data3()
return jsonify({item_id:'item_id',item_idcount:'item_idcount'})
if __name__ == '__main__':
app.run()
6.使用echarts绘图
var a = echarts.init(document.getElementById('l_top'),'dark')
var b = {
title:{
text:'中国城市各分布数量',
left:'center'
},
xAxis:{
type:'category',
data:[]
} ,
yAxis: {
type: 'value'
},
series:[
{
type:'line',
data: []
}
]
}
a.setOption(b)
7.使用ajax连接前后端并显示
function get_data(){
$.ajax({
'url':'/data1',
'success':function (data1){
b.xAxis.data = data1.city
b.series[0].data = data1.citycount
a.setOption(b)
}
})
}
8.echarts图表
1.折线图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
2.柱形图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
3.饼图
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
4.雷达图
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Allocated Budget', 'Actual Spending']
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Allocated Budget'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Actual Spending'
}
]
}
]
};