创建web目录
- 创建django自带的python系统默认工程文件；
django-admin startproject www
自行创建static文件夹，放置web所需的js、css、图片等资料；
自行创建templates文件夹，放置.html网页文件；
目录文件说明
www: 项目的容器。
manage.py: 一个实用的命令行工具，可让你以各种方式与该 Django 项目进行交互。
www/init.py: 一个空文件，告诉 Python 该目录是一个 Python 包。
www/asgi.py: 一个 ASGI 兼容的 Web 服务器的入口，以便运行你的项目。
www/settings.py: 该 Django 项目的设置/配置。
www/urls.py: 该 Django 项目的 URL 声明; 一份由 Django 驱动的网站"目录"。
www/wsgi.py: 一个 WSGI 兼容的 Web 服务器的入口，以便运行你的项目。
部署Echarts基础环境
- jquery.2.14.js，echarts.min.js静态封装库文件，置于static/目录下；
- 图表渲染HTML文件index.html，置于templates/目录下；
- index.html代码
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>{{name}}</title> <!--引入静态文件--> <script type="text/javascript" src="static/jquery.2.14.js"></script> <script type="text/javascript" src="static/echarts.min.js"></script> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript"> <!--实例化--> var myChart = echarts.init(document.getElementById("container")); var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] }; <!--自适应浏览器--> if (option && typeof option === 'object') { myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } </script> </body> </html>
django模版配置
视图文件views.py
from django.shortcuts import render '''调用HTML模版''' def index(request): title = "漏刻有时数据可视化-主线图" return render(request, 'index.html', {"name": title})
路径映射urls.py
'''导入视图''' from django.urls import path from . import views '''配置url规则''' urlpatterns = [ path('', views.index), ]
路径映射urls.py
- 模版文件路径配置
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], # 修改目录位置 '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', ], }, }, ]
- 静态文件路径配置
# 配置静态文件路径； STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
运行服务器
python manage.py runserver
lockdatav Done !
