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

文章首发公众号：早起python

前言

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

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

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

在Flask中使用

step1

新建一个flask项目

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

step2

拷贝pyecharts模版

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

step3

渲染模版

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

from flask import Flask
from jinja2 import Markup, Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig# 关于 CurrentConfig，可参考 [基本使用-全局变量]
CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./templates"))from pyecharts import options as opts
from pyecharts.charts import Barapp = 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()

此时你的目录应该是这样

step4

启动项目

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

python server.py

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

此时我们就成功在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

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

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

# pyecharts_django_demo/settings.py
INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','demo'  # <---
]

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

# demo/urls.py
from django.conf.urls import urlfrom . import viewsurlpatterns = [url(r'^$', views.index, name='index'),
]

再修改pyecharts_django_demo/urls.py

#pyecharts_django_demo/urls.py
from django.conf.urls import include, url
from django.contrib import adminurlpatterns = [url(r'^admin/', admin.site.urls),url(r'demo/', include('demo.urls')) # <---
]

step2

拷贝pyecharts模版

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

step3

渲染图表

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

from jinja2 import Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig
from django.http import HttpResponseCurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./demo/templates"))from pyecharts import options as opts
from pyecharts.charts import Bardef index(request):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 HttpResponse(c.render_embed())

step4

启动Django项目

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

python manage.py runserver

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

即可访问服务

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