2023.11.5通过flask从mysql数据库中取出数据并使用echart生成饼图_flask echarts

作者：AllinToyou | 2024-04-21 18:27:18

踩

flask echarts

2023.11.5通过flask从mysql数据库中取出数据并使用echart生成饼图

可以使用以下代码从数据库中获取每个分类所占的数量：

import mysql.connector

# 连接到数据库
cnx = mysql.connector.connect(
    host='<数据库主机地址>',
    user='<用户名>',
    password='<密码>',
    database='<数据库名>'
)

# 创建游标对象
cursor = cnx.cursor()

# 执行查询语句
query = "SELECT category, COUNT(*) FROM books GROUP BY category"
cursor.execute(query)

# 获取结果
result = cursor.fetchall()

# 将结果转换为字典形式
categories = {category: count for category, count in result}

# 关闭游标和数据库连接
cursor.close()
cnx.close()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上述代码中的books是数据库中存储书籍信息的表名，使用GROUP BY对分类进行分组，并计算每个分类的数量。

查询结果通过fetchall()方法获取，返回一个元组列表，其中每个元组包含分类和对应的数量。然后，将结果转换为字典形式，以便后续处理。

data = [{'name': category, 'value': count} for category, count in categories.items()]
1

传值过程略，假设传值后形成的数据如下：

categories = {
    '科幻': 20,
    '悬疑': 15,
    '言情': 10,
    '历史': 5,
}
1
2
3
4
5
6

每个元素都是一个字典，包含name和value两个键，分别表示分类名称和对应的数量。将该列表传递给Echarts即可绘制饼图。

完整的示例代码：

from flask import Flask, render_template
import json

app = Flask(__name__)

@app.route('/')
def index():
    categories = {
        '科幻': 20,
        '悬疑': 15,
        '言情': 10,
        '历史': 5,
    }

    data = [{'name': category, 'value': count} for category, count in categories.items()]

    return render_template('index.html', data=json.dumps(data))

if __name__ == '__main__':
    app.run()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：在传递给前端之前，需要使用json.dumps()将数据转换为JSON格式。

HTML示例：

<!DOCTYPE html>
<html>
<head>
    <title>Echarts Pie Chart</title>
    <script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript">
        // 获取从Flask传递过来的数据
        var data = {{ data }};

        // 使用Echarts绘制饼图
        var myChart = echarts.init(document.getElementById('chart'));
        var option = {
            series: [{
                type: 'pie',
                radius: '50%',
                data: data
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

本处可以直接使用{{ data }}，因为数据已经是JSON格式的字符串。

最后，运行Flask应用程序，并在浏览器中访问对应的地址（通常是http://localhost:5000）即可。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/464494