任务22：创建示例Django项目，展示ECharts图形示例

article/2025/8/7 11:26:05

任务描述

知识点：

  • Django
  • ECharts

重  点：

  • Django
  • ECharts

内  容：

  • 创建Django项目
  • 掌握ECharts绘制图形
  • 通过官网ECharts示例，完成Django项目，并通过配置项进行修改图形

任务指导

1、创建web_test的Django项目

2、了解Echarts基本的图表类型模板，api接口和配置项，请参考官方文档：https://echarts.apache.org/examples/zh/index.html。针对Echarts官网中的示例DEMO，挑选具有代表性的样例进行练习。

3、完成Django项目，并通过配置项进行修改图形。

任务实现

1. 创建web_test的Django项目

先通过pip安装django库，打开anaconda自带的Prompt

输入如下：

pip install django

如果下载速度过慢，推荐使用国内镜像，如下：

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ django

通过cd切换到项目目录文件夹(比如C盘下)，然后新建一个名为web_test的django项目，代码如下：

django-admin startproject web_test

通过PyCharm打开该web_test项目，在项目的结构中可以看到多出了一个test的目录，如下图：

最初的项目结构由五个文件组成:

  • manage.py:使用django-admin命令行工具的快捷方式。用于运行与项目相关的管理命令。使用它来运行开发服务器，运行测试，创建迁移等等。
  • init.py:这个空文件告诉Python这个文件夹是一个Python包。
  • settings.py:这个文件包含了所有的项目配置。
  • urls.py:这个文件负责映射项目中的路由和路径。例如，如果想在访问URLabout/时显示某些内容，则必须先在这里做映射。
  • wsgi.py:该文件是用于部署的简单网关接口。

1）创建虚拟环境

在PyCharm中选择文件，设置，然后选择项目解释器，点击添加解释器，如下：

完成后，可以看到，目录中增加了venv文件夹，即为新创建的虚拟环境。需要继续安装环境所需要的包和模块（Django），在PyCharm中选择文件，设置，然后选择项目解释器，点击添加解释器，如下：

若以上安装相关的库失败，可以换以下方法进行安装，即在PyCharm终端中进行安装相应库，如下：

pip install django

或

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ django

安装完成后，可以到settings中查看是否安装，如下图：

若上述方法仍然失败，或者pip安装时提示已经在环境中有相应的库了，说明该pip安装并未安装在虚拟环境中，可以不用创建该虚拟环境，将生成的venv文件夹删除掉，然后设置PyCharm（文件-设置），将解释器的环境更改为Anaconda的环境，如下图所示：

2）创建应用

创建一个test的应用，同样在PyCharm的终端

执行以下命令：

Django-admin startapp mytest

通过这条命令，在目录中多了一个mytest，并且里面已经有默认的文件和目录了，如下图所示：

每个文件的作用如下：

  • migrations/：在这个文件夹里，Django会存储一些文件以跟踪在modelspy文件中创建的变更，用来保持数据库和models.py的同步。
  • admin.py：这个文件为一个django内置的应用程序Django Admin的配置文件。
  • apps.py：这是应用程序本身的配置文件。
  • models.py：这里是定义Web应用程序数据实例的地方。models会由Django自动转换为数据库表。
  • tests.py：这个文件用来写当前应用程序的单元测试。
  • views.py：这是处理Web应用程序请求(request)/响应(resopnse)周期的文件。
  • db.sqlite3：这是一个默认的数据库。SQLite 是Python 默认安装的数据库，在Django中也可以默认使用。

3）新建目录，添加静态文件。

在web_test项目目录下，新建static和templates目录，分别用来存放静态文件和模板。在static目录中新建data、css、img和js文件目录，分别用来存放相应的静态文件。目录结构如下：

4）网站配置

打开settings.py文件，添加引入os模块：

import os

为了使创建的应用生效，找到INSTALLED_APPS变量，将应用程序taxi添加到INSTALLED_APPS列表，如下图：

为了使模板生效，找到TEMPLATES，在‘DIRS’中添加如下代码：

os.path.join(BASE_DIR,'templates')

为了使静态文件生效，找到STATIC_URL，在下面添加如下代码：

STATIC_ROOT = os.path.join(BASE_DIR, STATIC_URL)
STATICFILES_DIRS = (# os.path.join(BASE_DIR, STATIC_URL),('css',os.path.join(STATIC_ROOT,'css').replace('\\','/') ),('js',os.path.join(STATIC_ROOT,'js').replace('\\','/') ),('img',os.path.join(STATIC_ROOT,'img').replace('\\','/') ),('data',os.path.join(STATIC_ROOT,'data').replace('\\','/') )
)

5）启动项目

在PyCharm终端，输入

python manage.py runserver

然后打开桌面上的Chrome浏览器，输入：http://127.0.0.1:8000/即可进入项目，如下：


 2. 完成Django项目，绘制ECharts图形

在templates目录下新建一个HTML文档，新建文档后，会自动生成默认的网页最基本的结构，如下：

为 ECharts 准备一个具备大小（宽高）的 DOM，在index.html的<body></body>之间创建一个div，如下：

<div id="main" style="width: 600px;height:400px;"></div>

将资料中的echart.min.js文件放到js目录下，先将资料下载到本地文件，如下：

然后点击环境中右侧的“文件管理”按钮，如下：

将已下载好的资料文件上传到文件管理中，如下：

资料将被传到公共盘Guacamole RDP 上的 Next Terminal Filesystem中，再从该盘中将"资料.zip"剪切到C盘下，如下：

然后进入C盘，右键该文件，打开方式为"7-Zip File Manager"，如下：

点击提取，将文件提取到C盘，如下：

再将资料文件夹中的echart.min.js拷贝到C:\web_test\static\js目录下，然后在该目录下新建一个test.js文件如下：

该js文件用来绘制ECharts图形。

进入ECharts官网示例：https://echarts.apache.org/examples/zh/index.html，选择第一个折线图，如下：

点击进入，查看图形的配置项，将配置项代码复制到test.js文件中，如下：

基于准备好的dom，初始化echarts实例，在index.html中，已经将div容器的id设置为“main”，通过该id，将图形绘制到该容器中。在test.js中，option之前增加如下代码：

var myChart = echarts.init(document.getElementById('main'))

使用刚指定的配置项和数据显示图表，继续在test.js的最后，添加如下代码：

myChart.setOption(option)

保存test.js文件，然后在index.html中引入静态文件及js文件，在<!DOCTYPE html>前加上{% load static %}，用来引入静态文件，这样在后面引入模板、js文件、img等时可以方便的获取static文件路径。

同时引入echarts.min.js和test.js文件，如下图：

打开views.py，创建视图函数，用来登录主页，代码如下：

def login(request):return render(request,'index.html')

打开urls.py，配置主页的路由，先引入视图模块：

from mytest import views

在urlpatterns中添加路由，如下：

path('',views.login),

保存所有文件后，在PyCharm终端输入以下代码：

python manage.py runserver

打开Chrome浏览器，地址栏输入http://127.0.0.1:8000/，页面展示如下：

这样就通过Django项目，结合ECharts示例完成了一个WEB端展示图形的示例

3. 更改ECharts配置项，完成图形的细节配置

1）添加标题

根据ECharts官网的配置项手册，如下：

添加示例的标题，标题为："This is a example"，标题的样式为居中，在test.j文件中添加如下代码：

title:{show:true,text:'This is a example',left:'center',
},

刷新网页页面，展示如下：

2）修改y轴样式

添加y轴线及刻度，颜色为蓝色，y轴标签添加上°C，同时去除掉y轴分割线，根据ECharts配置项，在test.js添加如下代码：

    splitLine:false,axisLabel:{color: 'blue',fontSize: 6,formatter: '{value} °C'},axisLine:{show:true,lineStyle:{color:"blue",width:0.5,},},axisTick:{show:true,},

刷新网页页面，展示如下：

3）添加1个数据系列

在test.js文件中再添加1个序列，同时将第1个序列添加name属性，代码如下：

{name:'data2',data: [100, 200, 204, 208, 105, 107, 200],type: 'line'
},

刷新网页页面，展示如下：

4）添加图例，并修改图例样式

添加图例，图表下方显示，字体颜色为绿色，大小为10，在test.js文件中添加如下代码：

legend: {bottom:'5%',textStyle:{color:"green",fontSize: 10,},
},

刷新网页页面，展示如下：

以上为ECharts修改配置项的一些操作，更多配置项内容请参考https://echarts.apache.org/zh/option.html，需要多加练习，以熟练掌握ECharts的各配置项。


http://www.hkcw.cn/article/xdwVCATqBC.shtml

相关文章

深度学习入门Day1--Python基础

深度学习入门Day1--Python基础

一、基础语法 1.变量 python是“动态类型语言”的编程语言。用户无需明确指出x的类型是int。 x10 #初始化 print(x) #输出x x100 #赋值 print(x) print(type(x))#输出x的类型<class int>2.算术计算 >>>4*5 >20 >>>3**3#**表示乘方&#xff08;3…
阅读更多...
九坤：熵最小化加速LLM收敛

九坤：熵最小化加速LLM收敛

&#x1f4d6;标题&#xff1a;One-shot Entropy Minimization &#x1f310;来源&#xff1a;arXiv, 2505.20282 &#x1f31f;摘要 我们训练了 13,440 个大型语言模型&#xff0c;发现熵最小化只需要一个未标记的数据和 10 步优化&#xff0c;以实现比使用数千个数据获得的…
阅读更多...
微服务面试（分布式事务、注册中心、远程调用、服务保护）

微服务面试（分布式事务、注册中心、远程调用、服务保护）

1.分布式事务 分布式事务&#xff0c;就是指不是在单个服务或单个数据库架构下&#xff0c;产生的事务&#xff0c;例如&#xff1a; 跨数据源的分布式事务跨服务的分布式事务综合情况 我们之前解决分布式事务问题是直接使用Seata框架的AT模式&#xff0c;但是解决分布式事务…
阅读更多...
儿童节快乐，聊聊数字的规律和同余原理

儿童节快乐，聊聊数字的规律和同余原理

某年的6月1日是星期日。那么&#xff0c;同一年的6月30日是星期几&#xff1f; 星期是7天一个循环。所以说&#xff0c;这一天是星期几&#xff0c;7天之后同样也是星期几。而6月30日是在6月1日的29天之后&#xff1a;29 7 4 ... 1用29除以7&#xff0c;可以得出余数为1。而…
阅读更多...
视觉分析明火检测助力山东化工厂火情防控

视觉分析明火检测助力山东化工厂火情防控

视觉分析技术赋能化工厂火情防控&#xff1a;从山东事故看明火与烟雾检测的应用价值 一、背景&#xff1a;山东化工事故中的火情防控痛点 近期&#xff0c;山东高密友道化学有限公司、淄博润兴化工科技有限公司等企业接连发生爆炸事故&#xff0c;暴露出传统火情防控手段的局…
阅读更多...
javaEE-＞多线程：定时器

javaEE-＞多线程：定时器

一. 定时器 约定一个时间&#xff0c;时间到了&#xff0c;执行某个代码逻辑&#xff08;进行网络通信时常见&#xff09; 客户端给服务器发送请求 之后就需要等待 服务器的响应&#xff0c;客户端不可能无限的等&#xff0c;需要一个最大的期限。这里“等待的最大时间”可以用…
阅读更多...
HTML表单

HTML表单

1. 什么是表单 表单常用格式 文本框 密码框 单选按钮 复选框 列表框 按钮 多行文本域 文件域 邮箱 网址 数字 滑块 搜索框 2. 表单的高级应用 隐藏域&#xff08;⭐&#xff09; 隐藏域在网页中会经常被使用&#xff0c;比如我们登录了以后需要持续使用我们的登录信息&#xff…
阅读更多...
STM32F407寄存器操作（ADC非连续扫描模式）

STM32F407寄存器操作（ADC非连续扫描模式）

1.前言 书接上回&#xff0c;在看手册的时候我突然发现手册上还描述了另一种ADC扫描模式&#xff0c;即非连续扫描模式&#xff0c;想着连续扫描模式都已经探索过了&#xff0c;那就顺手把非非连续模式研究一下吧。 2.理论 我们先看看手册&#xff0c;这里我就以规则通道举例…
阅读更多...
老年照护实训室建设方案设计：基础照护与专业护理实训

老年照护实训室建设方案设计：基础照护与专业护理实训

老年照护实训室的建设是提升老年照护人才培养质量的关键环节&#xff0c;其方案设计需精准对接基础照护与专业护理的实训需求&#xff0c;为学习者构建理论与实践深度融合的教学场景。点击获取实训室建设方案 一、建设背景与目标 &#xff08;一&#xff09;建设背景 随着人…
阅读更多...
C语言 — 文件

C语言 — 文件

目录 1.流1.1 流的概念1.2 常见的的流 2.文件的打开和关闭2.1 fopen函数2.2 fclose函数2.3 文件的打开和关闭 3.文件的输入输出函数3.1 fputc函数3.2 fgetc函数3.3 feof函数和ferror函数3.4 fputs函数3.5 fgets函数3.6 fwrite函数3.7 fread函数3.8 fprintf函数3.9 fscanf函数 4…
阅读更多...
13. springCloud AlibabaSeata处理分布式事务

13. springCloud AlibabaSeata处理分布式事务

目录 一、分布式事务面试题 1.多个数据库之间如何处理分布式事务&#xff1f; 2.若拿出如下场景&#xff0c;阁下将如何应对? 3.阿里巴巴的Seata-AT模式如何做到对业务的无侵入? 4.对于分布式事务问题&#xff0c;你知道的解决方案有哪些?请你谈谈? 二、分布式事务问题…
阅读更多...
java多线程与JUC

java多线程与JUC

进程线程 进程&#xff1a;进程是操作系统分配资源的基本单位。在电脑中&#xff0c;一个软件就是一个进程 线程&#xff1a;线程是CPU调度的基本单位&#xff0c;是进程内的执行单元。相当于一个软件中的不同功能 多线程程序的特点&#xff1a;程序可以同时去做多件事&#…
阅读更多...
GCC 下载安装

GCC 下载安装

下载 官网&#xff1a;GCC, the GNU Compiler Collection- GNU Project Cygwin linux 环境 MinGW 在 Windows 上提供 GNU 开发工具比 Cygwin 更轻量&#xff08;不模拟完整的 POSIX 环境&#xff09;选择&#xff1a;binaries选择mingw-w64
阅读更多...
GpuGeek如何成为AI基础设施市场的中坚力量

GpuGeek如何成为AI基础设施市场的中坚力量

AI时代&#xff0c;算力基础设施已成为支撑技术创新和产业升级的关键要素。作为国内专注服务算法工程师群体的智算平台&#xff0c;GpuGeek通过持续创新的服务模式、精准的市场定位和系统化的生态建设&#xff0c;正快速成长为AI基础设施领域的中坚力量。本文将深入分析GpuGeek…
阅读更多...
DAY 35 超大力王爱学Python

DAY 35 超大力王爱学Python

知识点回顾&#xff1a; 三种不同的模型可视化方法&#xff1a;推荐torchinfo打印summary权重分布可视化进度条功能&#xff1a;手动和自动写法&#xff0c;让打印结果更加美观推理的写法&#xff1a;评估模式 作业&#xff1a;调整模型定义时的超参数&#xff0c;对比下效果。…
阅读更多...
MYOJ_4149:(洛谷P1002)[NOIP 2002 普及组] 过河卒(坐标型DP)

MYOJ_4149:(洛谷P1002)[NOIP 2002 普及组] 过河卒(坐标型DP)

题目描述 棋盘上 A 点有一个过河卒&#xff0c;需要走到目标 B 点。卒行走的规则&#xff1a;可以向下、或者向右。同时在棋盘上 C 点有一个对方的马&#xff0c;该马所在的点和所有跳跃一步可达的点称为对方马的控制点。因此称之为“马拦过河卒”。 棋盘用坐标表示&#xff0…
阅读更多...
Java高效处理大文件：避免OOM的深度实践

Java高效处理大文件：避免OOM的深度实践

​关键痛点​&#xff1a;当加载10GB的CSV文件时&#xff0c;Files.readAllLines()抛出OutOfMemoryError&#xff0c;该如何解决&#xff1f; 在Java中处理大文件是开发中的高频场景&#xff0c;尤其在大数据、日志分析等领域。本文将深入探讨几种高效处理大文件的方案&#x…
阅读更多...
Word双栏英文论文排版攻略

Word双栏英文论文排版攻略

word写双栏英文论文的注意事项 排版首先改字体添加连字符还没完呢有时候设置了两端对齐会出现这样的情况&#xff1a; 公式文献 等我下学期有时间了&#xff0c;一定要学习Latex啊&#xff0c;word写英文论文&#xff0c;不论是排版还是公式都很麻烦的&#xff0c;而Latex一键就…
阅读更多...
esp-idf ubuntu环境配置

esp-idf ubuntu环境配置

常用命令 source ~/esp/esp-idf/export.shidf.py --list-targets idf.py set-target 将清除 build 目录&#xff0c;并重新生成 sdkconfig 文件&#xff0c;原来的 sdkconfig 文件保存为 sdkconfig.old。 idf.py build idf.py flashNo module named pip wget https://bootst…
阅读更多...
BFS入门刷题

BFS入门刷题

目录 P1746 离开中山路 P1443 马的遍历 P1747 好奇怪的游戏 P2385 [USACO07FEB] Bronze Lilypad Pond B P1746 离开中山路 #include <iostream> #include <queue> #include <cstring> using namespace std; int n; int startx, starty; int endx, endy; …
阅读更多...
推荐文章

Copyright @ 2022~2023