使用Ajax填充的请参考:展示PyEcharts图表到Django框架前端页面教程(逐步教程)
文章目录
首先需要明确,pyechart是通过python来生成HTML(echart)的工具,在django中,我们通过Pyechart生成HTML后,对HTML的图片部分内容提取出来,然后填充到前端中
在流程中前三部分都是为了项目准备:
- django老手直接到第3步
- 新手则从头开始搭建一个django,并完成基本配置
PyEcharts + Django 流程
1. 安装依赖&创建项目
安装必要的依赖:
pip install django
pip install pyecharts
pip install bs4
版本:
python 3.7.13
Django 3.2.13
pyecharts 1.9.1
然后创建django项目
django-admin startproject pyecharts_django_demo
cd pyecharts_django_demo/
python manage.py startapp demo
2. 调整项目结构
- 然后在
pyecharts_django_demo/settings.py
文件中,修改INSTALLED_APPS
的配置,在文件中把刚才创建的demo
添加配置项,最后的结果如下:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
"demo",
]
- 然后在这个配置
INSTALLED_APPS
的上面添加下面的代码,方便后续操作:
import os
SETTINGS_PATH = os.path.dirname(os.path.dirname(__file__))
- 最后修改配置项
TEMPLATES
的DIRS
,之前"DIRS"那里是个空列表,咱们要填一下,这是固定写法:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(SETTINGS_PATH, 'templates')], # 说明你的HTML文件放在哪里,后面会添加这个文件夹,这里先配置上
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
3. 配置pyechart的图片路由(熟悉Django的直接到这里)
-
在
demo/
文件夹下新建一个urls.py
文件,然后在新建的文件中写入:from django.urls import path from . import views urlpatterns = [ path(r'^index/$', views.IndexView.as_view(), name='demo'), ]
这里咱们先把路径都配好,调通了之后再串逻辑
-
定位到项目根目录的
url.py
文件(在pyecharts_django_demo/urls.py
即为项目根目录的urls文件):- 导包
from django.urls import include
- 添加主目录到
demo
的路由
- 导包
最后修改完后的效果如下:
"""pyecharts_django_demo URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path(r'demo/', include('demo.urls'))
]
4. 准备呈现图像
在项目根目录下,与manage.py
同一个目录下,创建一个templates
文件夹(名字不要错,固定写法),之后的文件结构是:
- 在
templates
文件夹下创建一个index.html
文件:
<!DOCTYPE html>
<html lang="en">
<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>
{% autoescape off %}
{{ my_pic }}
{% endautoescape %}
</div>
</body>
</html>
知识点:
{% xxxx %}
与{{ xxxx }}
是django填充前端模版的写法{% xxxx %}
通常是一些逻辑或配置项,比如这里的autoescape off
就是允许后端填充前端标签过去,而不会被django默认转译为字符串{{ xxxx }}
通常是填充值,这个pic_div
就是后端一会穿过来的图片
- 在
demo/view.py
中写入:
import json
from random import randrange
from rest_framework.views import APIView
from pyecharts.charts import Bar
from pyecharts import options as opts
from django.shortcuts import render
from django.views.generic import View
from bs4 import BeautifulSoup
# 这是显示页面的写法
class IndexView(View):
def get(self, request):
my_pic = (
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="我是副标题"))
)
html_embed = my_pic.render_embed()
soup = BeautifulSoup(html_embed, 'lxml')
my_pic = "\n".join([str(i).strip() for i in soup.body.contents]) # soup.body.contents是一个列表,把列表转为字符串
return render(request, 'index.html', {
"my_pic": my_pic,
})
5. 查看效果
访问:http://127.0.0.1:8000/demo/
6. 逻辑梳理
熟悉django的话,逻辑还是很简单的,主要是在View
中,
my_pic = (
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="我是副标题"))
)
之后使用
html_embed = my_pic.render_embed()
可以得到HTML的页面,我们发现HTML中主要内容都在body中,带了div和script标签,所以我们通过BeautifulSoup
把HTML的body内容抽取出来,并剔除掉<body></body>
这个自身的标签,最后整理一下:
soup = BeautifulSoup(html_embed, 'lxml')
my_pic = "\n".join([str(i).strip() for i in soup.body.contents]) # soup.body.contents是一个列表,把列表转为字符串
将这个整体交给前端,并使用:
<div>
{% autoescape off %}
{{ my_pic }}
{% endautoescape %}
</div>
这样就允许我们把my_pic
解析为HTML标签,而不是被默认加个引号变成字符串