Python3+MySQL+Flask+Echarts

最新推荐文章于 2024-05-28 20:37:43 发布

置顶小牛头#

最新推荐文章于 2024-05-28 20:37:43 发布

阅读量1w

点赞数 16

分类专栏：数据可视化大数据

本文链接：https://blog.csdn.net/qq_41562377/article/details/85840830

版权

大数据同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

数据可视化

2 篇文章 0 订阅

订阅专栏

前提是MySQL上已经存在数据，我们使用python连接MySQL获取数据，接着用python的web框架Flask作为后台做，Echarts可视化。
简单演示：MySQL上的数据形如
在这里插入图片描述

连接数据库-使用的库为import pymysql
HTML使用Echarts开源的模板-这里命名my_template.html
使用的Flask库为：
from flask import Flask,render_template,url_for

app = Flask(__name__)
@app.route('/')
def my_tem():
    #在浏览器上渲染my_templaces.html模板
    return render_template('my_template.html')
@app.route('/test',methods=['POST'])
def my_test():
	#创建连接数据库
    connection = pymysql.connect(host='localhost',
                                 user='root',
                                 passwd='root',
                                 db='test',
                                 port=3306,
                                 charset='utf8'
                                 )
    cur=connection.cursor() #游标（指针）cursor的方式操作数据
    sql='SELECT movie,score FROM tbl_movie_score' #sql语句
    cur.execute(sql) #execute(query, args):执行单条sql语句。
    see=cur.fetchall() #使结果全部可看
    #print(sql)
   #print(see)
    #print(cur)
    #创建json数据
    xdays=[]
    jsonData={}
    yvalues=[]

    for data in see:
        xdays.append(data[0])
        yvalues.append(data[1])

    #print(xdays)
    #print(yvalues)

    jsonData['xdays']=xdays
    jsonData['yvalues']=yvalues

    #print(jsonData)
    #将json格式转成str，因为如果直接将dict类型的数据写入json会发生报错，因此将数据写入时需要用到该函数。
    j=json.dumps(jsonData,ensure_ascii=False)
    #print(j)
    cur.close()
    connection.close()
    #渲染html模板
    return (j)

if __name__ == "__main__":
    #运行项目
    #my_test() #测试
    app.run(debug = True) #整个项目的运行

HTML模板需要去官网上下载echarts.min.js，将其放在项目目录之下
my_template.html代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</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>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

		//建立axjx所需的json数据	
        var app={
            xday:[],
            yvalue:[]
        };

        //发送ajax请求
        $(document).ready(function () {
       getData();
       console.log(app.xday);
       console.log(app.yvalue)
    });

	//设计画图
    function getData() {
         $.ajax({
         //渲染的是127.0.0.1/test 下的json数据
            url:'/test',
            data:{},
            type:'POST',
            async:false,
            dataType:'json',
            success:function(data) {
                app.xday = data.xdays;
                app.yvalue = data.yvalues;
                myChart.setOption({
                    title: {
                        text: '电影评分总数'
                    },
                    tooltip: {},
                    legend: {
                        data:['评分']
                    },
                    xAxis: {
                        data: app.xday
                    },
                    yAxis: {},
                    //
                    series: [{
                        name: '评分',
                        type: 'bar',
                        data: app.yvalue
                    }]
                })
            },
             error:function (msg) {
                console.log(msg);
                alert('系统发生错误');
            }
        })
    }
    </script>
</body>
</html>

打开网页http://127.0.0.1:5000/就可以看到效果图了

在这里插入图片描述

小牛头#

关注

16
点赞
踩
133

收藏

觉得还不错? 一键收藏
20
评论
Python3+MySQL+Flask+Echarts

前提是MySQL上已经存在数据，我们使用python连接MySQL获取数据，接着用python的web框架Flask作为后台做，Echarts可视化。简单演示：MySQL上的数据形如连接数据库-使用的库为import pymysqlHTML使用Echarts开源的模板-这里命名my_template.html使用的Flask库为：from flask import Flask,ren...
复制链接

扫一扫