如何在 Django 中使用 pyecharts

为项目新建一个目录,将其命名为django_pyecharts_demo,
在终端中切换到这个目录,并创建一个虚拟环境。

python -m venv django_pyecharts

激活虚拟环境

django_pyecharts\Scripts\activate

要停止使用虚拟环境,可执行命令

deactivate

创建并激活虚拟环境后,就可安装Django

(django_pyecharts)learning_log$ pip install Django pyecharts

Django仅在虚拟环境处于活动状态时才可用。
查看已安装的python库,pip list。

(django_pyecharts) PS E:\python_work\Django\django_pyecharts> pip list
Package             Version
------------------- -------
asgiref             3.8.1
Django              5.0.3
djangorestframework 3.15.1
Jinja2              3.1.3
MarkupSafe          2.1.5
pip                 22.3
prettytable         3.10.0
pyecharts           2.0.5
setuptools          65.5.0
simplejson          3.19.2
sqlparse            0.4.4
tzdata              2024.1
wcwidth             0.2.13

新建一个项目

django-admin startproject pyecharts_django_demo .

千万别忘了这个句点,否则部署应用程序时将遭遇一些配置问题。如果忘记了这个句点,要删除已创建的文件和文件夹(django_pyecharts除外),再重新运行这个命令。
Django将大部分与项目相关的信息存储在数据库中,因此需要创建一个供Django使用的数据库。

python manage.py migrate

核实Django是否正确地创建了项目。为此,可执行命令runserver。

python manage.py runserver

显示

Starting development server at http://127.0.0.1:8000/

等同

http://localhost:8000/

若要关闭这个服务器,可切换到执行命令runserver 时所在的终端窗口,再按Ctrl + C即可。
如果出现错误消息That port is already in use(指定端口被占用),请执行命令

python manage.py runserver 8001

让Diango使用另一个端口。
在前面打开的终端窗口中应该还运行着runserver。
请再打开一个终端窗口(或标签页),并切换到manage.py所在的目录。激活该虚拟环境,

django_pyecharts\Scripts\activate

再执行命令startapp:

python manage.py startapp demo

在 pyecharts_django_demo/settings.py 中注册应用程序。

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

编辑 demo/urls.py 文件

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

在 pyecharts_django_demo/urls.py 中新增 ‘demo.urls’

from django.contrib import admin
from django.urls import path
from django.urls import include
from django.urls import re_path as urlurlpatterns = [path('admin/', admin.site.urls),url(r'^demo/', include('demo.urls'))

Step 1: 拷贝 pyecharts 模板
先在 demo 文件夹下新建 templates 文件夹,
将 pyecharts 模板,位于 pyecharts.render.templates 拷贝至刚新建的 templates 文件夹,

Step 2: 渲染图表
将下列代码保存到 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())

Step 3: 运行项目

python manage.py runserver

使用浏览器打开 http://127.0.0.1:8000/demo 即可访问服务
在这里插入图片描述
Django 前后端分离
Step 0: 建立文件夹、虚拟环境等,前几步同上。
Step 1: 新建一个 Django 项目

django-admin startproject pyecharts_django_demo .
python manage.py migrate
python manage.py startapp demo

在 pyecharts_django_demo/settings.py 中注册应用程序

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

在 pyecharts_django_demo/urls.py 中新增 ‘demo.urls’

# pyecharts_django_demo/urls.py 
from django.contrib import admin
from django.urls import path
from django.urls import include
from django.urls import re_path as urlurlpatterns = [path('admin/', admin.site.urls),url(r'^demo/', include('demo.urls'))
]

编辑 demo/urls.py 文件(没有就新建一个)

from django.urls import include
from django.urls import re_path as url
from . import viewsurlpatterns = [url(r'^bar/$', views.ChartView.as_view(), name='demo'),url(r'^index/$', views.IndexView.as_view(), name='demo'),
]

Step 2 编写画图 HTML 代码
先在根目录文件夹下新建 templates 文件夹,新建一个 index.html

(django_pyecharts) PS E:\python_work\Django\django_pyecharts_demo> ls目录: E:\python_work\Django\django_pyecharts_demoMode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2024/3/24     14:08                demo
d-----         2024/3/24      9:43                django_pyecharts
d-----         2024/3/24     14:06                pyecharts_django_demo
d-----         2024/3/24      9:53                templates
-a----         2024/3/24      9:45         131072 db.sqlite3
-a----         2024/3/24      9:45            699 manage.py

index.html

<!DOCTYPE html>
<html>
<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 id="bar" style="width:1000px; height:600px;"></div><script>var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});$(function () {fetchData(chart);});function fetchData() {$.ajax({type: "GET",url: "http://127.0.0.1:8000/demo/bar",dataType: 'json',success: function (result) {chart.setOption(result.data);}});}</script>
</body>
</html>

Step 3: 编写 Django 和 pyecharts 代码渲染图表

注: 目前由于 json 数据类型的问题,无法将 pyecharts 中的 JSCode 类型的数据转换成 json 数据格式返回到前端页面中使用。因此在使用前后端分离的情况下尽量避免使用 JSCode 进行画图。

将下列代码保存到 demo/views.py 中

from django.shortcuts import render# Create your views here.
import json
from random import randrangefrom django.http import HttpResponse
from rest_framework.views import APIViewfrom pyecharts.charts import Bar
from pyecharts import options as opts# Create your views here.
def response_as_json(data):json_str = json.dumps(data)response = HttpResponse(json_str,content_type="application/json",)response["Access-Control-Allow-Origin"] = "*"return responsedef json_response(data, code=200):data = {"code": code,"msg": "success","data": data,}return response_as_json(data)def json_error(error_string="error", code=500, **kwargs):data = {"code": code,"msg": error_string,"data": {}}data.update(kwargs)return response_as_json(data)JsonResponse = json_response
JsonError = json_errordef bar_base() -> Bar:c = (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="我是副标题")).dump_options_with_quotes())return cclass ChartView(APIView):def get(self, request, *args, **kwargs):return JsonResponse(json.loads(bar_base()))class IndexView(APIView):def get(self, request, *args, **kwargs):return HttpResponse(content=open("./templates/index.html").read())

Step 4: 运行项目

python manage.py runserver

使用浏览器打开 http://127.0.0.1:8000/demo/index 即可访问服务。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/767911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【论文精读】MAE:Masked Autoencoders Are Scalable Vision Learners 带掩码的自动编码器是可扩展的视觉学习器

系列文章目录 【论文精读】Transformer&#xff1a;Attention Is All You Need 【论文精读】BERT&#xff1a;Pre-training of Deep Bidirectional Transformers for Language Understanding 【论文精读】VIT&#xff1a;vision transformer论文 文章目录 系列文章目录一、前言…

24. UE5 RPG制作属性面板(二)

在上一篇中&#xff0c;我们创建属性面板的大部分样式&#xff0c;这一篇里面接着制作。 在这一篇里我们需要有以下几个方面&#xff1a; 在界面增加一个属性按钮。属性按钮增加事件&#xff0c;点击时可以打开属性面板&#xff0c;属性面板打开时无法再次点击按钮。点击属性面…

手撕算法-无重复字符的最长子串

描述 分析 滑动窗口&#xff0c;记录窗口中的所有出现的字符&#xff0c;然后窗口左边界固定&#xff0c;右边界右滑&#xff0c;如果&#xff0c;窗口中不存在新的字符&#xff0c;则右滑成功&#xff0c;否则左边界右滑&#xff0c;直到窗口中不存在右边界的值。 描述感觉不…

Centos7 防火墙iptables?

Centos7 防火墙iptables&#xff1f; 文章目录 Centos7 防火墙iptables&#xff1f;1. 介绍2. firewalld 和 iptables区别3. 区域管理概念区域管理有如下几种不同的初始化区域&#xff1a; 4.iptables的配置1.简述2.基本原理3.iptables传输数据包的过程4. iptables规则表和链5.…

结构体类型详细讲解(附带枚举,联合)

前言&#xff1a; 如果你还对结构体不是很了解&#xff0c;那么本篇文章将会从 为什么存在结构体&#xff0c;结构体的优点&#xff0c;结构体的定义&#xff0c;结构体的使用与结构体的大小依次介绍&#xff0c;同样会附带枚举与联合体 目录 为什么存在结构体&#xff1a; 结构…

【Linux 驱动基础】IMX6ULL LED基础驱动

本机使用的是正点原子的IMX6ULL开发板 # 前置知识 IMX6ULL GPIO控制框图&#xff1a; GPIO控制代码大概分为几个流程&#xff1a;开启时钟、设置IO复用、设置IO属性、配置IO方向、设置IO输出电平&#xff0c;下面以IMX6ULL为例&#xff0c; 1. 开启时钟 参考资料&#xff1a…

深入理解 Docker 镜像

1. Docker 镜像的底层原理 1.1 分层的镜像 以我们的pull 命令为例&#xff0c;在下载的过程中我们可以看到docker的镜像好像是一层一层的在下载。 1.2 UnionFS(联合文件系统) 联合文件系统是一种分层、轻量级并且高性能的文件系统&#xff0c;它支持对文件系统的修改作为一次…

MPI4.1文档翻译(持续更新)

本博客参考官方文档进行介绍&#xff0c;全网仅此一家进行中文翻译&#xff0c;走过路过不要错过。 官方网址&#xff1a;https://www.mpi-forum.org/ 参考文档&#xff1a;https://www.mpi-forum.org/docs/mpi-4.1/mpi41-report.pdf 引用官方4.1文档方法&#xff1a; manu…

linux下使用迅雷的完美办法(网络版免费),其他下载工具

迅雷有自家服务器的支持&#xff0c;因此&#xff0c;其他下载器&#xff0c;可能难以匹敌 &#xff1f; linux下使用迅雷的完美办法&#xff08;免费&#xff09; https://blog.csdn.net/lqrensn/article/details/8853949 网络版 Linux下安装并使用迅雷 https://www.lxlin…

牛客题霸-SQL进阶篇(刷题记录一)

本文基于前段时间学习总结的 MySQL 相关的查询语法&#xff0c;在牛客网找了相应的 MySQL 题目进行练习&#xff0c;以便加强对于 MySQL 查询语法的理解和应用。 由于涉及到的数据库表较多&#xff0c;因此本文不再展示&#xff0c;只提供 MySQL 代码与示例输出。 部分题目因…

化工企业能源在线监测管理系统,智能节能助力生产

化工企业能源消耗量极大&#xff0c;其节能的空间也相对较大&#xff0c;所以需要控制能耗强度&#xff0c;保持更高的能源利用率。 化工企业能源消耗现状 1、能源管理方面 计量能源消耗时&#xff0c;计量器具存在问题&#xff0c;未能对能耗情况实施完全计量&#xff0c;有…

P - Beat

题目分析 1.看数据范围&#xff0c;大概知道dfs能做 2.自0问题开始查找&#xff0c;确保之后每次查找到的问题的困难度均大于上一次 3.遍历所有情况再记录cnt即可 代码 #include <iostream> #include <algorithm> #include <cstdio> #include <cstring&…

蓝桥集训之矩形牛棚

蓝桥集训之矩形牛棚 核心思想&#xff1a;单调队列 模板&#xff1a;Acwing.131.直方图矩形面积首先遍历所有下界 然后确定以该下界为底的直方图 求最大矩形 #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N 30…

【13】vue2和vue3对比

vite: https://github.com/vitejs/vite 面试题:谈谈你对 vite 的理解,最好对比 webpack 说明 webpack 原理图 vite 原理图 面试题答案: webpack 会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。 而 vite 是直接启动开发服务器,请求哪个模块再对该模块进行实…

Linux的一些基本指令

​​​​​​​ 目录 前言&#xff1a; 1.以指令的形式登录 2.ls指令 语法&#xff1a; 功能&#xff1a; 常用选项&#xff1a; 3.pwd指令 4.cd指令 4.1 绝对路径与相对路径 4.2 cd .与cd ..&#xff08;注意cd后先空格&#xff0c;然后两个点是连一起的&#xff0…

XUbuntu22.04之安装Plantuml(二百二十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

电脑不能读取移动硬盘,但是可以读取U盘解决方法

找到此电脑 右键设备管理器&#xff0c;找到其中的通用串行总线控制器。 注意&#xff0c;凡是插入到电脑当中不能读取的U盘或者移动硬盘&#xff0c;都会在通用串行总线控制器当中显示为USB大容量存储设备 鼠标选中“USB大容量存储设备”&#xff0c;右键卸载它。此时&#x…

地图定点热力图GeoJson

1.首先需要拿到地图&#xff0c;可以从不同的站点寻找&#xff0c;我这里是从hcharts里面找的 //国外地图数据地址&#xff1a; https://img.hcharts.cn/mapdata/ //国内地图数据地址&#xff1a; https://datav.aliyun.com/portal/school/atlas/area_selector2.在项目中引入e…

医院挂号系统设计与实现|jsp+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;…

路由器里如何设置端口映射?

在互联网时代&#xff0c;我们经常需要将内部网络的服务暴露到公网以便其他人访问。直接将内部网络暴露在公网上存在一定的安全风险。为了解决这个问题&#xff0c;我们可以利用路由器里设置端口映射来实现将特定端口的访问请求转发到内部网络的特定设备上。 端口映射的原理 端…