项目实训：Day 1------项目总览及可视化工具ECharts学习（1）
今天项目实训开始，我的任务是可视化处理。由于基础比较薄弱，打算先学一下可视化的基础。
首先，利用学校的平台把这个项目的介绍看一下
学习ECharts是在B站黑马程序员的平台上学习的，需要安装vscode及一些扩展，这里比较简单，不细讲。
数据可视化主要目的：借助于图像化手段来有效地表达信息
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。在项目中的作用是可以用可视化直观感受模型的好坏对比
为了使页面自适应，使用了flexible.js和cssrem扩展，在vscode 扩展的应用商店里就可以搜到。
之后，我们只需要页面中引用该js文件即可。
需要注意的是，只要元素的样式部分用的单位是rem，即可以自适应；只要不是用rem，即使它本身对应一个rem的单位，也不会随页面而改变自己大小。
我们可以改动1rem的大小：首先对flexible.js的setRemUnit改动；再点击cssrem管理中对应的修改，使得能自动生成对应的rem值（更改后需重启软件）
上面的工作完成后，仿照（https://www.bilibili.com/video/BV1v7411R7mp?p=15）这样就完成了简单的自适应界面 代码如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<header>
<h1>验证码识别--案例</h1>
</header>
<script src="js/flexible.js"></script>
</body>
</html>
index.css
* {
margin: 0;
padding: 0 ;
box-sizing: border-box;
}
body {
background: url(../images/bg.jpg) no-repeat top center;
line-height: 1.16;
}
header {
height: 1.25rem;
background: url(../images/head_bg.png) no-repeat;
background-size: 100% 100%;
}
header h1 {
color: white;
font-size: 0.475rem;
text-align: center;
line-height: 1rem;
}
