当前位置:   article > 正文

django前后端结合_简单4步用FLASK/Django部署你的Pyecharts项目

django 前后端集成 项目介绍

文章首发公众号:早起python

前言

为什么将pyecharts与web框架结合使用?因为如果只是单纯的使用pyecharts,我们展示的时候只能将我们的图表生成为静态文件,虽然也在也可以使用iframe等语句嵌入前端页面但是并不方便前后端数据交互。

如果我们在Flask/Django/Tornado/Sanic中使用pyecharts就结合通过这些web框架来实现前后端分离或使用动态更新数据,增量更新数据(比如前端主动向后端进行数据刷新等)等功能。进一步可以购买一个服务器去将项目部署在服务器上,这样就能随时随地展示你的数据分析可视化结果而这一切并不困难。例如我们之前做过疫情可视化网站就是Django+pyecharts实现

ca7ce4130cce5b1f1952e08e65557c9f.png

本文主要介绍如何在本地结合Flask/Django使用pyecharts。

在Flask中使用

step1

新建一个flask项目

Flask的安装可以使用pip install flask首先我们建立一个文件夹pyecharts-flask-demo然后进入这个这个文件夹中再建一个新的文件夹templates这样我们就为我们接下来的flask项目创建了一个目录。

22e8f74ae38830895f039fb4279092fe.png

step2

拷贝pyecharts模版

将 pyecharts 模板,位于官方GitHub中的 pyecharts.render.templates 全部文件拷贝至刚新建的 templates 文件夹。

8c759d3a94506403cb372a49df219e46.png

step3

渲染模版

在这一步我们只要在文件夹pyecharts-flask-demo也就是主目录下创建创建一个python脚本命名为server.py并填入以下代码,当然中间的绘图部分代码可以替换为自己的绘图部分代码

  1. from flask import Flask
  2. from jinja2 import Markup, Environment, FileSystemLoader
  3. from pyecharts.globals import CurrentConfig
  4. # 关于 CurrentConfig,可参考 [基本使用-全局变量]
  5. CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./templates"))
  6. from pyecharts import options as opts
  7. from pyecharts.charts import Bar
  8. app = Flask(__name__, static_folder="templates")
  9. #########################以下代码可以替换!!!
  10. def bar_base() -> Bar:
  11. c = (
  12. Bar()
  13. .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
  14. .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
  15. .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
  16. .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
  17. )
  18. return c
  19. ##########################################
  20. @app.route("/")
  21. def index():
  22. c = bar_base()
  23. return Markup(c.render_embed())
  24. if __name__ == "__main__":
  25. app.run()

此时你的目录应该是这样

c4ed8351a40b3696ad741298948a3aff.png

step4

启动项目

最后一步就是启动项目,从命令行进入pyecharts-flask-demo文件夹并执行

python server.py

使用浏览器打开 http://127.0.0.1:5000 即可访问服务

0af8abd9ec6d304383e8e2f203571b11.png

此时我们就成功在Flask中使用pyecharts,不过以上操作仅将这个项目部署在本地,当然在服务器中的配置与启动方法完全一样。接下来我们可以利用Flask实现前后端分离或使用动态更新数据,增量更新数据(定时刷新的核心在于 HTML 的setInterval方法)等功能。而这些就交给大家自己探索或关注以后的文章。

在Django中使用

在Django中配置与使用比Flask稍微复杂一点,但是也并不困难!

step1

新建一个Django项目

Django的安装可以使用pip install Django

打开命令行执行下面代码创建一个Django项目目录

django-admin startproject pyecharts_django_demo

然后执行下面代码创建一个app

python manage.py startapp demo

此时我们的目录应该是这样

384d7c342dd58fdb86d268adacdc9246.png

打开pyecharts_django_demo/settings.py修改下面部分代码来注册应用程序

  1. # pyecharts_django_demo/settings.py
  2. INSTALLED_APPS = [
  3. 'django.contrib.admin',
  4. 'django.contrib.auth',
  5. 'django.contrib.contenttypes',
  6. 'django.contrib.sessions',
  7. 'django.contrib.messages',
  8. 'django.contrib.staticfiles',
  9. 'demo' # <---
  10. ]

再编辑demo/urls.py 文件(新建一个文件)

  1. # demo/urls.py
  2. from django.conf.urls import url
  3. from . import views
  4. urlpatterns = [
  5. url(r'^$', views.index, name='index'),
  6. ]

再修改pyecharts_django_demo/urls.py

  1. #pyecharts_django_demo/urls.py
  2. from django.conf.urls import include, url
  3. from django.contrib import admin
  4. urlpatterns = [
  5. url(r'^admin/', admin.site.urls),
  6. url(r'demo/', include('demo.urls')) # <---
  7. ]

step2

拷贝pyecharts模版

先在 demo 文件夹下新建 templates 文件夹,然后将 pyecharts 模板,位于 pyecharts.render.templates 拷贝至刚新建的 templates 文件夹。此时我们的目录是这样

0300e9329eca0013acfba2abfa15828b.png

step3

渲染图表

将下列代码保存到 demo/views.py 中,其中绘图部分可以替换为你的相关代码

  1. from jinja2 import Environment, FileSystemLoader
  2. from pyecharts.globals import CurrentConfig
  3. from django.http import HttpResponse
  4. CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./demo/templates"))
  5. from pyecharts import options as opts
  6. from pyecharts.charts import Bar
  7. def index(request):
  8. c = (
  9. Bar()
  10. .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
  11. .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
  12. .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
  13. .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
  14. )
  15. return HttpResponse(c.render_embed())

step4

启动Django项目

在命令行进入主目录执行即可

python manage.py runserver

现在进入http://127.0.0.1:8000/demo

即可访问服务

48cec8bb8666bac2dff899ab7359f320.png

接下来就可以结合Django实现前后端分离从而实现定时全量、增量更新图表比如前端主动向后端进行数据刷新等相关功能。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/165011?site
推荐阅读
相关标签
  

闽ICP备14008679号