• django填充pyechart的图到前端模版中（不使用Ajax，而是直接贴一个div）

    使用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

    • 1
    • 2
    • 3

    版本：

    python		          3.7.13
Django                3.2.13
pyecharts             1.9.1

    • 1
    • 2
    • 3

    然后创建django项目

    django-admin startproject pyecharts_django_demo
cd pyecharts_django_demo/
python manage.py startapp demo

    • 1
    • 2
    • 3

    2. 调整项目结构

    1. 然后在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",
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    1. 然后在这个配置INSTALLED_APPS的上面添加下面的代码，方便后续操作：
    import os

SETTINGS_PATH = os.path.dirname(os.path.dirname(__file__))

    • 1
    • 2
    • 3
    1. 最后修改配置项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',
            ],
        },
    },
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    3. 配置pyechart的图片路由（熟悉Django的直接到这里）

    1. 在demo/文件夹下新建一个urls.py文件，然后在新建的文件中写入：

      from django.urls import path
from . import views

urlpatterns = [
    path(r'^index/$', views.IndexView.as_view(), name='demo'),
]

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

      这里咱们先把路径都配好，调通了之后再串逻辑

    2. 定位到项目根目录的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'))
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    4. 准备呈现图像

    在项目根目录下，与manage.py同一个目录下，创建一个templates文件夹（名字不要错，固定写法），之后的文件结构是：
    在这里插入图片描述

    1. 在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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    知识点：

    • {% xxxx %}与{{ xxxx }}是django填充前端模版的写法
    • {% xxxx %}通常是一些逻辑或配置项，比如这里的autoescape off就是允许后端填充前端标签过去，而不会被django默认转译为字符串
    • {{ xxxx }}通常是填充值，这个pic_div就是后端一会穿过来的图片
    1. 在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,
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    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="我是副标题"))
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    之后使用

    html_embed = my_pic.render_embed()

    • 1

    可以得到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是一个列表，把列表转为字符串   

    • 1
    • 2

    将这个整体交给前端，并使用：

    <div>
    {% autoescape off %}
        {{ my_pic }}
    {% endautoescape %}
</div>

    • 1
    • 2
    • 3
    • 4
    • 5

    这样就允许我们把my_pic解析为HTML标签，而不是被默认加个引号变成字符串

  • 相关阅读:
    4.Autofac依赖注入初使用
    Web信息收集，互联网上的裸奔者
    salesforce从sandbox部署到生产环境的自定义字段权限没有成功上载
    线性代数基础1向量
    初步体验通过 Semantic Kernel 与自己部署的通义千问开源大模型进行对话
    【MySQL基本功系列】第一篇 先熟悉MySQL的运行逻辑
    [ACTF2020 新生赛]Exec1
    使用funcgraph-retval和bpftrace/kprobe快速定位并解决cpu控制器无法使能的问题
    Python绘图入门：使用Matplotlib绘制柱状图
    基于Python的(拍照签到+网课在线检测)深度学习的人脸识别系统
  • 原文地址：https://blog.csdn.net/weixin_35757704/article/details/125413351