web实战基础（pycharts篇）：flask+pycharts渲染网页的三种方式

最新推荐文章于 2023-09-26 15:34:07 发布

dhjabc_1

最新推荐文章于 2023-09-26 15:34:07 发布

阅读量9k

点赞数 17

分类专栏： web网站项目实战（python版）文章标签： web python 数据可视化 css js

本文链接：https://blog.csdn.net/dhjabc_1/article/details/105711545

版权

web网站项目实战（python版）专栏收录该内容

12 篇文章 9 订阅

订阅专栏

这是一篇非常非常基础的入门教程，但是也能让你深入了解pycharts的实现机制和带着你深入了解细节的设计，因此非常建议你能看完，相信一定会有所收获！
这一篇讲深入介绍flask+pycharts渲染网页的基础知识。

flask+pycharts渲染网页的三种方式：

1、通过render()函数进行渲染；
2、通过Markup()函数进行渲染；
3、通过dump_options_with_quotes()函数进行渲染。

其中第三种为最通用的方法，下面将一一进行介绍。

一、render()函数

（一）创建一个flask程序。

命名为：first.py

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

@app.route('/', methods=['GET', 'POST'])
def test():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=5000,debug=True)

（二）然后通过pycharts进行异步渲染生成index.html文件

先创建文件夹templates，然后保存成second.py。

from pyecharts.charts import Bar
from pyecharts import options as opts
from pyecharts.globals import ThemeType

bar = (
    Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
    .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
    .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
    .add_yaxis("商家B", [15, 25, 30, 18,65, 70])
    .set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
    # 或者直接使用字典参数
    # .set_global_opts(title_opts={"text": "主标题", "subtext": "副标题"})
)
bar.render('templates\index.html')

（三）运行`python first.py`

在浏览器中访问http://127.0.0.1:5000/
在这里插入图片描述

这种方法的缺点：只能异步操作，先运行second.py生成index.html文件，然后才能在网址中访问，便利性很差。

二、Markup()函数

整合first.py和second.py的代码，形成third.py，具体代码如下：

from flask import Flask,render_template
from pyecharts import options as opts
from pyecharts.globals import ThemeType
from pyecharts.charts import Bar
from jinja2 import Markup

app = Flask(__name__)

def bar_base():
    bar = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
            .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
            .add_yaxis("商家B", [15, 25, 30, 18, 65, 70])
            .set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
    )
    return bar

@app.route('/', methods=['GET', 'POST'])
def index():
    bar = bar_base()
    return Markup(bar.render_embed())

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=5000,debug=True)

核心代码为：

def index():
    bar = bar_base()
    return Markup(bar.render_embed())def index():
    bar = bar_base()
    return Markup(bar.render_embed())

这种方法的优点：相比render明显更便捷，无需异步操作，直接在flask代码中继承了pycharts代码，
缺点为：仍然无法进行前后端分离操作。

三、dump_options_with_quotes()函数

（一）新建flask.py

具体代码实现如下：

from flask import Flask,render_template
from pyecharts import options as opts
from pyecharts.globals import ThemeType
from pyecharts.charts import Bar
from jinja2 import Markup

app = Flask(__name__)

def bar_base():
    bar = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
            .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
            .add_yaxis("商家B", [15, 25, 30, 18, 65, 70])
            .set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
    )
    return bar

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

@app.route("/barChart")
def get_bar_chart():
    c = bar_base()
    return c.dump_options_with_quotes()


if __name__ == '__main__':
    app.run(host="127.0.0.1", port=5000,debug=True)

（二）在templates文件夹中新建index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FLASK和PYCHARTS交互</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
    <div id="bar" style="width:600px; height:400px;"></div>
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('bar'), 'pink', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/barChart",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )
    </script>
</body>
</html>

（三）运行flask.app

然后访问http://127.0.0.1:5000/。
在这里插入图片描述

（四）实现效果

在这里插入图片描述

四、实现定时实时更新数据

（一）重写flask.py

from flask import Flask,render_template
from pyecharts import options as opts
from pyecharts.globals import ThemeType
from pyecharts.charts import Bar
from pyecharts.faker import Faker

app = Flask(__name__)

def bar_base():
    bar = (
        Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
            .add_xaxis(Faker.choose())
            .add_yaxis("商家A", Faker.values())
            .add_yaxis("商家B", Faker.values())
            .set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
    )
    return bar

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

@app.route("/barChart")
def get_bar_chart():
    c = bar_base()
    return c.dump_options_with_quotes()


if __name__ == '__main__':
    app.run(host="127.0.0.1", port=5000,debug=True)

（二）重写index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FLASK和PYCHARTS交互</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
    <div id="bar" style="width:600px; height:400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

        $(
            function () {
                fetchData(chart);
                setInterval(fetchData, 2000);
            }
        );
        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/barChart",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
    </script>
</body>
</html>

（三）运行效果

在这里插入图片描述

OK，关于pycharts部分的内容终于写完了，后续我将会继续介绍新的部分echarts的内容，敬请期待。

感谢你的关注！

参考：https://pyecharts.org/#/zh-cn/intro

dhjabc_1

关注

17
点赞
踩
87

收藏

觉得还不错? 一键收藏
3
评论
web实战基础（pycharts篇）：flask+pycharts渲染网页的三种方式

这是一篇非常非常基础的入门教程，但是也能让你深入了解pycharts的实现机制和带着你深入了解细节的设计，因此非常建议你能看完，相信一定会有所收获！这一篇讲深入介绍flask+pycharts渲染网页的基础知识。flask+pycharts渲染网页的三种方式：1、通过render()函数进行渲染；2、通过Markup()函数进行渲染；3、通过dump_options_with_quot...
复制链接

扫一扫