数据可视化echarts+mysql+python+flask |
您所在的位置：网站首页 › echarts与数据库交互 › 数据可视化echarts+mysql+python+flask |
数据可视化echarts+mysql+python+flask
|
数据可视化echarts+mysql+python+flask
本人小白菜鸟，本篇文章的代码也许走了很多弯路请各位大神们喷的轻点0.0 我参考了这篇文章给了我很大的感触，感谢这个大佬：小牛头#Python3+MySql+Flask+Echarts 效果图
其中有两个数据表是我在做之前就已存在的（student,phone），然后还有一个表phone2是在python里面直接关联数据库创建的，创建后再添加数据 我在不同的数据表分别调用了不同的数据：student获取了全部数据；phone获取了价格排行前十的数据；phone2也是获取了所有数据 app.py 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:[email protected]/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 Title 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 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('系统错误'); } }) }. . . . . . . . . . . 萌新瑟瑟发抖 |
| 
echarts调用了数据库里面的数据(数据库里必须先有数据哦) 
【本文地址】