任务22：创建示例Django项目，展示ECharts图形示例
任务描述
知识点：
- 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的各配置项。