数据可视化echarts+mysql+python+flask
本人小白菜鸟，本篇文章的代码也许走了很多弯路请各位大神们喷的轻点0.0
我参考了这篇文章给了我很大的感触，感谢这个大佬：小牛头#Python3+MySql+Flask+Echarts
效果图
| 
echarts调用了数据库里面的数据(数据库里必须先有数据哦)
其中有两个数据表是我在做之前就已存在的（student,phone），然后还有一个表phone2是在python里面直接关联数据库创建的，创建后再添加数据
我在不同的数据表分别调用了不同的数据：student获取了全部数据；phone获取了价格排行前十的数据；phone2也是获取了所有数据
from flask import Flask,render_template,url_for
import json
import pymysql
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
#--------------------------------------------------------------------------------------------------------------------
#关联数据库建表
app.config['SQLALCHEMY_DATABASE_URI']='mysql+pymysql://root:123@127.0.0.1/bigdata'
app.config['SQLALCHEMY_TRACK_MODIFCATIONS']=False
db = SQLAlchemy(app)
#创建表（phone2）的列表格式
class shoper(db.Model):
__tablename__ = 'phone2'
phonename = db.Column(db.VARCHAR(20),primary_key=True)
pnum = db.Column(db.Integer)
#创建表
db.create_all()
#--------------------------------------------------------------------------------------------------------------------
@app.route('/')
def hello_world():
return render_template('index.html')
@app.route('/test',methods=['POST'])
#链接数据库
def my_test():
connection = pymysql.connect(host='localhost',user='root',passwd='123',db='bigdata',port=3306,charset='utf8')
# 为student的数据开启一个游标cur
cur=connection.cursor()
#访问student表中的所有数据
sql = 'SELECT * FROM student'
#为phone的数据开启一个游标cur1
cur1=connection.cursor()
#访问phone表中价格前十的数据
sql1 = 'SELECT * FROM phone order by pnum desc limit 0,10'
# 为phone2的数据开启一个游标cur2
cur2=connection.cursor()
#访问phone2表中的所有数据
sql2 = 'SELECT * FROM phone2'
#执行sql中的语句，即获取student表中的所有数据
cur.execute(sql)
#将获取到的sql数据全部显示出来
see = cur.fetchall()
# 执行sql1中的语句，即获取phone表中的价格前十的数据
cur1.execute(sql1)
# 将获取到的sql1数据全部显示出来
see1 = cur1.fetchall()
# 执行sql2中的语句，即获取phone表中所有的数据
cur2.execute(sql2)
#将获取到的sql2数据全部显示出来
see2 = cur2.fetchall()
#定义需要用上的空数据数组，然后通过遍历数据库的数据将数据附上去
ychinese = []
ymath = []
yenglish = []
xname = []
ynum = []
ynum2=[]
jsonData = {}
#遍历student表中的所有数据,see绑定了sql（也就是student表中的所有数据），所以需要在see中遍历
for data in see :
#legname.append(data[0])
ychinese.append(data[1])#data[1]是指student表中第二列(chinese)的数据
ymath.append(data[2])#data[2]是指student表中第三列(math)的数据
yenglish.append(data[3])#data[3]是指student表中第四列(english)的数据
# 遍历phone表中的所有数据,see1绑定了sql1（也就是phone表中的价格排行前十的数据），所以需要在see1中遍历
for data in see1:
xname.append(data[0])
ynum.append(data[1])
for data in see2:
ynum2.append(data[1])
#将数据转化格式方便在HTML中调用
jsonData['ychinese'] = ychinese
jsonData['ymath'] = ymath
jsonData['yenglish'] = yenglish
jsonData['xname'] = xname
jsonData['ynum'] = ynum
jsonData['ynum2'] = ynum2
j = json.dumps(jsonData)
#依次把三个游标关闭
cur.close()
cur1.close()
cur2.close()
connection.close()
return (j)
if __name__ == '__main__':
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 echarts.js -->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<!-- 引入jquery.js -->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1800px;height: 900px;"></div>
<div id="main2" style="width: 1800px;height: 900px;"></div>
<div id="main3" style="width: 1800px;height: 900px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var myChart1=echarts.init(document.getElementById('main2'));
var myChart2=echarts.init(document.getElementById('main3'));
var app={
//legname1:[],
ychinese1:[],
ymath1:[],
yenglish1:[],
xname1:[],
ynum1:[],
ynum21:[]
};
$(document).ready(function () {
getData();
//console.log(app.legname1);
console.log(app.ychinese1);
console.log(app.ymath1);
console.log(app.yenglish1);
console.log(app.xname1);
console.log(app.ynum1);
console.log(app.ynum21)
});
function getData() {
$.ajax({
url:'/test',
data:{},
type:'POST',
async:false,
dataType:'json',
success:function (data) {
app.ychinese1 = data.ychinese;
app.ymath1 = data.ymath;
app.yenglish1 = data.yenglish;
app.xname1 = data.xname;
app.ynum1 = data.ynum;
app.ynum21 = data.ynum2;
myChart.setOption({
title:{
text:'学生成绩'
},
tooltip:{},
legend:{
data:['语文','数学','英语']
},
xAxis:{
data:[{value:'张三',
textStyle:{
fontSize: 36
}},
{value:'李四',
textStyle:{
fontSize:36
} },
{value:'王五',
textStyle:{
fontSize:36
}}],
TextStyle:{
fontSize:72
}
},
yAxis:{
type:'value'
},
series:[{
name:'语文',
type: 'bar',
data:app.ychinese1
},
{
name:'数学',
type:'bar',
data:app.ymath1
},
{
name:'英语',
type:'bar',
data:app.yenglish1
}]
});
myChart1.setOption({
title:{
text: '手机品牌价格'
},
tooltip: {},
legend: {
data:['手机店一','手机店二']
},
xAxis: {
type: 'category',
boundaryGap: false,
data:app.xname1,
axisLabel: {
interval:0,
rotate:40
}
},
yAxis: {},
series: [{
name:'手机店一',
type:'line',
data:app.ynum1,
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {}//填充
},{
name:'手机店二',
type:'line',
data:app.ynum21,
label:{
normal:{
show:true,
position:'top'
}
},
areaStyle:{}
}]
});
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
//定义一个for循环方便数据在下方引用
var indicator=[];
for(var i = 0;i<app.xname1.length;i++){
indicator.push({
name:app.xname1[i],max:8000
})
}
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
myChart2.setOption({
title:{
text:'手机价格雷达图'
},
tooltip:{},
legend:{
data:['商店一手机价格','商店二手机价格']
},
//雷达图样式设计
radar:{
//标签样式
name:{
textStyle:{
fontSize:36
}
},
//引用定义的for循环引用标签数据xname
indicator:indicator
},
series:[{
name:'商店一手机价格',
type:'radar',
//雷达图数值数据导入
data:[
{
value:app.ynum1,
name:'商店一手机价格'
}
]
},{
name:'商店二手机价格',
type:'radar',
data:[
{
value:app.ynum21,
name:'商店二手机价格'
}
]
}]
})
},
error:function (msg) {
console.log(msg);
alert('系统错误');
}
})
}
</script>
</body>
</html>
.
.
.
.
.
.
.
.
.
.
.
萌新瑟瑟发抖
扫一扫
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
