Flask+pyecharts结合,html统计图呈现在前端页面-优化前端加导航栏显示

文摘   科技   2023-07-14 18:34   广东  


是我,是你


“人能常清静,天地悉皆归。”——《清静经》




回顾上篇



Flask+pyecharts结合,html统计图呈现在前端页面

ISEE小栈,公众号:ISEE小栈Flask+pyecharts结合,html统计图呈现在前端页面


开始本篇


上篇通过Flask服务,简单的将Pyecharts生成的交互式图表:柱状图、折线图、饼图呈现在前端页面上。

本次在前端页面上加个导航栏,优化一下显示。



环境:

Pycharm

Python 3.9.16



安装:

pip install Flask==2.3.1

pip install pyecharts==2.0.3



继上次的Flask项目,往下进行操作:

首先在tempates文件夹下,新建pages文件夹,后面会用到存放子页面


新增base模板

tempates文件夹下,新建base.html,核心代码

<!DOCTYPE html><html lang="zh-CN">  <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <link rel="stylesheet" href="/static/css/bootstrap.css">        <link rel="stylesheet" href="/static/css/bootstrap.min.css">        <link href="/static/css/main.css" rel="stylesheet">        <script src="/static/js/jquery.min.js"></script>        <script src="/static/js/jquery.js"></script>        <script src="/static/js/jquery-2.1.4.min.js"></script>        <script src="/static/js/bootstrap.js"></script>        <script src="/static/js/bootstrap.min.js"></script>        <title>小栈统计</title>        <link href="/static/css/theme.css" rel="stylesheet">  </head>  <body role="document">    <!-- 导航栏 -->        <nav class="navbar navbar-inverse navbar-fixed-top">          <div class="container">            <div class="navbar-header">            </div>            <div id="navbar" class="collapse navbar-collapse">              <ul class="nav navbar-nav">                <li><a href="/"><span style="font-size: large; ">首页</span></a></li>              </ul>                <ul class="nav navbar-nav">                <li><a href="/bar"><span style="font-size: large; ">柱状图</span></a></li>              </ul>                <ul class="nav navbar-nav">                <li><a href="/line"><span style="font-size: large; ">折线图</span></a></li>              </ul>                <ul class="nav navbar-nav">                <li><a href="/pie"><span style="font-size: large; ">饼图</span></a></li>              </ul>            </div>          </div>        </nav>  {% block content %}  {% endblock %}    <div class="text-center " role="main">        <div class="page-header"></div>        <footer class="footer">          <p>&copy; 2023 ,******</p>        </footer>    </div>  </body></html>


以上重点部分就是——导航栏

将柱状图、折线图、饼图可以在一个页面上自由切换


首页

tempates文件夹下,将原来的index.html内的代码,修改以下代码:

{% extends "base.html" %}{% block content %}    <div class="container theme-showcase" role="main">      <div style="border:1px beige solid;width:930px;height:500px;margin: 5% auto 0;background: aliceblue;">        <div style="border:1px bisque solid;background: skyblue;"><h4 >简介</h4></div>            <div class="container">            <br><br><br><br>                本次分标签显示不同类型的统计图            </div>        </div>    </div>{% endblock %}


其中{% extends "base.html" %}就是引用的base.html模板页面

再将原app.py应用下的hello_world应用修改为:

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

运行Flask应用

python app.py


打开浏览器,输入http://127.0.0.1:5000,默认首页内容



柱状图

tempates下pages目录下,新建bar.html,核心代码

{% extends "base.html" %}{% block content %}    <div class="container theme-showcase" role="main">      <div style="border:1px beige solid;width:930px;height:500px;margin: 5% auto 0;background: aliceblue;">          <div style="border:1px bisque solid;background: skyblue;"><h4 >*柱状图</h4></div>            <div class="container">            {{ chart_html|safe }}            </div>        </div>    </div>{% endblock %}


将原app.py应用下的bar_page应用返回渲染页面修改为:

return render_template('pages/bar.html', chart_html=chart_html)

运行Flask应用

python app.py


打开浏览器,输入http://127.0.0.1:5000,点击【柱状图】



折线图

tempates下pages目录下,新建line.html,核心代码

{% extends "base.html" %}{% block content %}    <div class="container theme-showcase" role="main">      <div style="border:1px beige solid;width:930px;height:500px;margin: 5% auto 0;background: aliceblue;">          <div style="border:1px bisque solid;background: skyblue;"><h4 >*折线图</h4></div>            <div class="container">            {{ chart_html|safe }}            </div>        </div>    </div>{% endblock %}


将原app.py应用下的line_page应用返回渲染页面修改为:

return render_template('pages/line.html', chart_html=chart_html)


运行Flask应用

python app.py


打开浏览器,输入http://127.0.0.1:5000,点击【折线图】



饼图

tempates下pages目录下,新建pie.html,核心代码

{% extends "base.html" %}{% block content %}    <div class="container theme-showcase" role="main">      <div style="border:1px beige solid;width:930px;height:500px;margin: 5% auto 0;background: aliceblue;">          <div style="border:1px bisque solid;background: skyblue;"><h4 >*饼图</h4></div>            <div class="container">            {{ chart_html|safe }}            </div>        </div>    </div>{% endblock %}

将原app.py应用下的pie_page应用返回渲染页面修改为:

return render_template('pages/pie.html', chart_html=chart_html)


运行Flask应用

python app.py


打开浏览器,输入http://127.0.0.1:5000,点击【饼图】



总结

本次是纯粹看到上次显示太过简单,后面想起什么就加什么吧

项目结构:

test_app_flask:项目名称

static:用于存放静态文件,例如CSS、JavaScript和图像文件等

templates:用于存放模板文件,就是html文件

base.html:模板

pages:包括其他子页面文件

index.html:首页面

app.py:用于存放Flask应用程序的主要代码逻辑

requirments.txt:需要安装的包及版本



有需求的朋友点个“”和“在看”,谢谢支持~!

后台回复“pyecharts_flask”即可获取源码!


     

文章就分享到这儿,喜欢就点个吧!



推荐阅读  点击标题可跳转


ISEE小栈
没有花里胡哨,简单才是王道。
 最新文章