利用flask构建一个大屏数据看板Demo

最新推荐文章于 2024-05-30 23:32:12 发布

JerryFoo

最新推荐文章于 2024-05-30 23:32:12 发布

阅读量305

点赞数

分类专栏： flask学习文章标签： flask echarts python

本文链接：https://blog.csdn.net/fzcoolbaby/article/details/130660415

版权

flask学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该页面使用了Echarts和jQuery进行数据可视化和处理。在页面加载完成后，通过getData函数获取数据，并展示在页面上。数据展示分别使用了柱状图和表格两种方式。

以下为示例代码：

from flask import Flask, jsonify, render_template

app = Flask(__name__)

# 数据
data = {
    "sales": [
        {"name": "A", "value": 100},
        {"name": "B", "value": 200},
        {"name": "C", "value": 300}
    ],
    "users": [
        {"name": "John", "age": 25},
        {"name": "Mary", "age": 30},
        {"name": "Tom", "age": 40}
    ]
}

# 主页
@app.route("/")
def index():
    return render_template("index.html")

# 获取数据
@app.route("/data")
def get_data():
    return jsonify(data)

if __name__ == "__main__":
    app.run(debug=True)

其中，data为展示的数据，index.html为前端页面，内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>大屏数据展示</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.0/echarts.min.js"></script>
    <script type="text/javascript">
        // 获取数据
        function getData() {
            $.get("/data", function(data){
                // 展示数据
                showSales(data.sales);
                showUsers(data.users);
            });
        }

        // 展示销售额
        function showSales(data) {
            var salesChart = echarts.init(document.getElementById('sales'));
            var option = {
                title: {
                    text: '销售额'
                },
                xAxis: {
                    type: 'category',
                    data: data.map(function(item) {
                        return item.name;
                    })
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data.map(function(item) {
                        return item.value;
                    }),
                    type: 'bar'
                }]
            };
            salesChart.setOption(option);
        }

        // 展示用户信息
        function showUsers(data) {
            var usersTable = document.getElementById('users');
            usersTable.innerHTML = "<tr><th>姓名</th><th>年龄</th></tr>";
            data.forEach(function(item) {
                var row = document.createElement('tr');
                row.innerHTML = "<td>" + item.name + "</td><td>" + item.age + "</td>";
                usersTable.appendChild(row);
            });
        }

        // 页面加载完成后获取数据
        window.onload = function() {
            getData();
        }
    </script>
</head>
<body>
    <div id="sales" style="width: 50%; height: 400px;"></div>
    <table id="users"></table>
</body>
</html>