文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

pyecharts结合flask框架的使用

2024-04-02 19:55

关注

介绍

本文主要介绍如何在Flask框架中使用pyecharts,关于Flask框架使用这里不做具体说明~

Flask模板渲染

首先需要创建一个flask项目,flask项目对目录结构要求不高,但是如果是前后端混合项目的话,模板文件必须存放在templates文件夹下,否则视图函数返回模板文件时会提示找不到对应的文件。下面是flask项目的简单目录结构:

.
├── server.py
└── templates

下述代码是server.py中的示例的代码:

from flask import Flask
from jinja2 import Markup, Environment, FileSystemLoader​
from pyecharts import options as opts
from pyecharts.charts import Bar​
app = Flask(__name__, static_folder="templates")​
def bar_base() -> Bar:
    c = (
        Bar()
        .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
        .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    )
    return c​
@app.route("/")
def index():
    c = bar_base()
    return Markup(c.render_embed())​
if __name__ == "__main__":
    app.run()

运行上述代码,使用浏览器打开http://127.0.0.1:5000 即可访问服务,具体效果如下图所示:

Flask前后端分离

创建flask项目和上述文件目录保持一致,前后端分离的情况下,就需要后端将pyecharts生成的图表返回给前端,方法就是可以将图表生成到一个html文件中,然后返回给前端即可。

需要新建 HTML 文件保存位于项目根目录的 templates 文件夹,这里以如下 index.html 为例. 主要用到了 jquerypyecharts 管理的 echarts.min.js 依赖。

下述是index.html中的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</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:1000px; height:600px;"></div>
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('bar'), 'white', {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服务以及pyecharts生成图表,目录结构和模板渲染一致,这里需要注意一个问题,目前由于 json 数据类型的问题,无法将 pyecharts 中的 JSCode 类型的数据转换成 json 数据格式返回到前端页面中使用。因此在使用前后端分离的情况下尽量避免使用 JSCode 进行画图。

下面是server.py中的后端代码:

from random import randrange​
from flask import Flask, render_template​
from pyecharts import options as opts
from pyecharts.charts import Bar​​
app = Flask(__name__, static_folder="templates")​
def bar_base() -> Bar:
    c = (
        Bar()
        .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
        .add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    )
    return c​
@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()

同样运行该项目,使用浏览器打开 http://127.0.0.1:5000 即可访问服务。

总结

两篇文章只是介绍了pyecharts模块的一些简单使用,在官方文档中还有很多进阶使用,经常进行图表分析的开发人员们可以参考官方文档进行学习。

到此这篇关于pyecharts结合flask框架的使用的文章就介绍到这了,更多相关pyecharts flask框架内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯