创建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 !
