通过jinja2模板语法实现Flask+echarts数据可视化项目中前后端数据传递

最新推荐文章于 2024-05-20 08:46:10 发布

db_yc_3181

最新推荐文章于 2024-05-20 08:46:10 发布

阅读量897

点赞数 5

文章标签： flask echarts python

本文链接：https://blog.csdn.net/Youngyyyyyy/article/details/130923429

版权

本文的学习需要读者有一定的Flask和echarts的知识基础，初学者请先自学完成Flask简易项目搭建以及静态数据的echarts数据可视化。

一般地，Flask项目在主函数（app.py）里的视图函数（@route修饰的函数）的返回值中通过render_template函数对模板（html）进行渲染，并允许在render_template函数传入需要传递给模板（html）的变量。

下面是一个简单的例子：

【app.py】主函数部分：

from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello():
    data = '这是一个后端数据'
    return render_template('page.html',data=data)

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

【page.html】模板部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts画图</title>
    <script type="text/javascript" src=""></script>
</head>
<body>
    <h1>{{data}}</h1>
</body>
</html>

渲染效果：

可以看到主函数中render_template('page.html',data=data)的data参数实现了数据从后端到前端的传递，并最后将数据通过 jinja2 的模板语法 {{data}} 传递到了模板（html）中的标题标签<h1>{{data}}</h1>中。

进一步地，当我们想要使用后端的时候在模板（html）中引入echarts图形时，同样可以将后端数据data通过模板语法 {{data}} 传递给js中的option配置项：

【app.py】主函数部分：

from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello():
    data = {
        'x':[1,2,3],
        'y':[1,2,3],
    }
    return render_template('page.html',data=data)

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

【page.html】模板部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>echarts画图</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <h1>x轴数据：{{data.x}}</h1>
    <h1>y轴数据：{{data.y}}</h1>
    <div id="chart" style="width: 1200px;height: 600px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById("chart"));
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: {{data.x}}
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: {{data.y}},
                    type: 'line'
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

渲染效果：

最后，如果无法渲染图形，可以考虑将 {{ 变量 }} 修改为：

{{ 变量|tojson }}

其中 tojson 被称为【过滤器】，是一系列关于字符串的预处理方法，这里需要将data数据转换为json数据才能在html中进行渲染。

db_yc_3181

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
通过jinja2模板语法实现Flask+echarts数据可视化项目中前后端数据传递

一般地，Flask项目在主函数（app.py）里的视图函数（@route修饰的函数）的返回值中通过render_template函数对模板（html）进行渲染，并允许在render_template函数传入需要传递给模板（html）的变量。本文的学习需要读者有一定的Flask和echarts的知识基础，初学者请先自学完成Flask简易项目搭建以及静态数据的echarts数据可视化。被称为【过滤器】，是一系列关于字符串的预处理方法，这里需要将data数据转换为json数据才能在html中进行渲染。
复制链接

扫一扫