是我,是你
“人能常清静,天地悉皆归。”——《清静经》
回顾上篇
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,核心代码
<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>© 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”即可获取源码!
文章就分享到这儿,喜欢就点个赞吧!