数据可视化echarts+mysql+python+flask

数据可视化echarts+mysql+python+flask

本人小白菜鸟,本篇文章的代码也许走了很多弯路请各位大神们喷的轻点0.0
我参考了这篇文章给了我很大的感触,感谢这个大佬:小牛头#Python3+MySql+Flask+Echarts
效果图
在这里插入图片描述| 在这里插入图片描述在这里插入图片描述
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: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>


.
.
.
.
.
.
.
.
.
.
.
萌新瑟瑟发抖

  • 15
    点赞
  • 98
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值