# 作业

**Repository Path**: luoxuewei/task

## Basic Information

- **Project Name**: 作业
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-28
- **Last Updated**: 2021-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 数据可视化项目

## 项目目的

* 锻炼 jQuery 的使用；
* 锻炼快速查询 echarts 基本配置的能力；
* 锻炼独立完成PC端页面布局的能力（HTML/CSS）；

> 不需要精确，自由发挥也可以，只要美观、不乱即可

## 效果展示

![image-20210605165537394](README.assets/a.gif)

## 功能需求（页面布局）

### 需求

- 合理使用 flex 布局
- 右侧图表区，固定宽度；左侧自适应
- 左侧表单项全部圆角
- 左侧表格圆角，边框 1px ，不得有边框重叠
- 最好使用less
- 无其他要求，美观即可

### 建议

- body背景渐变
  - 可自行吸取颜色或自己设计颜色
  - 渐变方向 100deg
- 表格边框线
  - 最好不要简单的合并边框，否则会因为每个电脑的分辨率而产生双线边框的问题
  - 可设置表格的边框、设置每个单元格的右边框和下边框
  - 去掉最右侧的单元格的右边框
  - 去掉最后一行的单元格的下边框
  - 通过 border-spacing: 去掉 table 和单元格之间的间距
- 表格圆角
  - 不要合并边框，否则不能设置table圆角
  - 设置table的圆角，单独设置四个角的单元格的圆角



## 功能需求（展示数据）

### 需求

- 将所有数据展示到表格中。（这个过程也叫做渲染页面）

### 建议

- 使用一个全局变量，比如 `data` ，存储所有数据；格式如下

  ```js
  let data = [
    { username: '张三', score: 80, salary: 12000 },
    { username: '李四', score: 90, salary: 18000 },
    { username: '王五', score: 70, salary: 15000 },
  ];
  ```


- 封装一个函数，比如 render
- 函数中，遍历数据
- 遍历的过程中，组装（比如拼接字符串的方式）tr
- 遍历结束，将组装的很多 tr 放到 tbody，从而完成数据展示

> 细节，遍历的时候，尽量把数据分割成三个小数组，echarts用的那种数组，因为后面的 echarts 也需要数据，但格式不是这样的

## 功能需求（图表展示）

### 需求

- 展示数据的时候，也要以图表的方式，将数据展示到 echarts 图表中。
- 线形图展示评分，X轴使用姓名
- 柱状图展示薪水，X轴使用姓名
- echarts需求
  - 图形有渐变，自动吸取或设置颜色
  - 刻度对齐轴线
  - X和Y轴的轴线、刻度效果一致
  - 无网格

### 建议

- 前面“展示数据”的时候，具体是forEach的时候，将data这个大数组分割成三个小数组
  - 三个小数组分别存姓名、评分、薪水
- 将生成图表的代码封装进函数，比如 createChart 函数
- **“展示数据”的时候，调用 createChart 函数生成图表，这样就保证了表格和图表一起展示了。**
- 当然，创建图表函数的参数，无非就是图的类型以及使用的数据。

## 功能需求（添加功能）

### 需求

- 输入框输入正确的值后，点击添加按钮
  - 完成数据的新增
  - 新增后，更新渲染表格数据（具体查看下一个需求）
  - 新增后，更新渲染 echarts 图表（具体查看最后一个需求）

### 建议

- 新增的时候，将新的数据放到数组（data）中即可

- 新增数据后，只要重新 forEach遍历data，把数据放到表格中和图表中展示即可。

- 如果你前面封装函数（render）了，这里添加数据后，重新调用render即可

## 交付说明

### 目录

```
 你的名字             # 项目目录
    ├── css          # css样式文件夹
    ├── js           # JS文件
    └── index.html   # 首页
```

### 交付

以自己的名字 命名的文件夹。（文件夹中包括css、js、html）

### 时间

- 5:30 ~ 6:00 交