Python flask + Mysql +Echarts ：实现数据可视化（柱状图）

最新推荐文章于 2024-05-08 09:05:07 发布

人间过客o>_<o

最新推荐文章于 2024-05-08 09:05:07 发布

阅读量364

点赞数 3

文章标签：信息可视化 python flask mysql echarts 前端

本文链接：https://blog.csdn.net/weixin_64255870/article/details/135901571

版权

步骤一：建立Myslq数据库连接

import pymysql

class Mysql(object):
    # 创建 Mysql 类的实例时自动调用
    def __init__(self):
        # 建立MySQL数据库连接
        self.conn = pymysql.connect(host='localhost', user='root', password='1234', database='Design', charset="utf8")
        # 创建了一个游标对象cursor，用于执行SQL命令
        self.cursor = self.conn.cursor()

    # 这个方法使得 Mysql 类的实例可以作为上下文管理器使用
    def __enter__(self):
        return self

    # 负责关闭游标和数据库连接
    def __exit__(self, exc_type, exc_val, exc_tb):
        self.cursor.close()
        self.conn.close()


    def Property(self):
        sql = "select * from Property_type limit 7;"
        self.cursor.execute(sql)
        return self.cursor.fetchall()

步骤二：开发Flask应用

from flask import Flask, send_from_directory, jsonify
from flask import render_template

from mysql import Mysql

app = Flask(__name__)

@app.route('/Property')
def getdata():
    db = Mysql()
    item = db.Property()
    return render_template('Property.html', items=item)

if __name__ == '__main__':
    app.run(debug=True)	#debug=True发生错误时会返回发生错误的地方

步骤三：创建前端页面（Property.html ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化</title>
     <script src="/static/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div id="main"></div>
    <script type="text/javascript">
            var myChart=echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '房屋数排名前7的房源类型',
                    left:'center'
                },
                tooltip: {
                    trigger: 'axis',
                },
                calculable: true,
                xAxis: {
                    name:"房源类型",
                    type: 'category',
                    data:[
                    		{% for item in items %}
                            	"{{ item[0]}}",
                        	{% endfor %}
                       ],
                    axisLabel: {
                        rotate: 25, // 旋转x轴标签，避免重叠
                        interval: 0 // 显示所有x轴标签
                    },
                },

                yAxis: {
                    name:"房屋数量",
                    type: 'value',
                    axisLabel : {
                    formatter: '{value} 间'}
                },
                series: [
                        {
                            type: 'bar',	//bar柱形图
                            data:[{% for item in items %}
                            		"{{ item[1]}}",
                        			{% endfor %}],
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            },
                        }
                    ]
                };
            myChart.setOption(option);
     </script>
</body>
</html>