1. 实验准备
- 熟悉界面设计的原则；
- 学习前端的作图工具，比如eCharts https://ecomfe.github.io/echarts-doc/public/en/index.html
- 熟悉javascript的语法和编程；
- 电商婴儿用户数据集描述
-
https://tianchi.aliyun.com/dataset/dataDetail?dataId=45
商品表格字段：
user_id:用户身份信息
auction_id:购买行为编号
cat_id:商品种类序列号
cat:商品序列号
property:商品属性
buy_mount:购买数量
day:购买时间
婴儿信息表格字段：
birthday:出生日期
gender:性别（0 female；1 male）
2. 实验内容
- 对数据进行预处理、聚集的该操作；做成方便显示的输入格式；
- 给定数据集，通过echarts绘制图片，对该数据集进行描述和趋势分析；
3.实验环境
- JetBrains WebStorm 2018.3.5 x64 ： html+css
- Excel
4.具体过程
1、Excel对数据集进行处理
- 几个Excel常用操作
工具.png
Excel最常用的就是排序、筛选、删除重复，还有一个分列；
这几个工具都在数据栏里面；
这里详细介绍一下分列这个操作：
1、选定要进行分列的数据，然后点击“数据”工具栏，选择“分列”，宽度一致的话，可以选择固定宽度，可以根据自己的数据格式选择；
分列第一步.png
2、建立分列线
分列第二步.png
3、选择数据格式，以及生成数据的目标区域；
分列第三步.png
- 几个Excel常用的函数
像 SUM、AVERAGE 这些函数都是比较常见且常用的，使用也就是在单元格输入=sum(:)或者=average(:)，括号里面是所要求得数据。
在这，介绍一个这一次实验非常好用的一个函数COUNTIF
COUNTIF：在指定区域中按指定条件对单元格进行计数（单条件计数）；
语法格式 ：=countif（range，criteria）
参数range 表示条件区域——对单元格进行计数的区域；
参数criteria 表示条件——条件的形式可以是数字、表达式或文本，甚至可以使用通配符。
countif.png
- 数据处理的注意事项
1、首先检查数据，判断有没有无用数据，删掉无用数据，留下有效数据；
（无用数据：在输入、输出或存储方面不正确的、无意义的或不需要的信息。）
2、对数据格式处理，保持数据格式一致;
3、处理数据时，小心操作，不要改动数据。
2、利用Echarts制作图表
在这里，介绍三种最基本、最常用的图表：折线图、柱状图、饼图；
1、折线图
折线图示例.png
2、柱状图
柱状图示例.png
3、饼图
饼图示例.png
还有很多图表，可以在Echarts官网查看：
echarts官网实例.png
3、在网页上制作
主要还是使用HTML+CSS，格式具体的，就是参考上一次实验：CSS编程排版练习
整个网页制作的效果：
实验结果.png
5、总结
这一次实验比较综合，运用了之前所学的HTML+CSS，同时学了一些Excel处理数据的方法，还有Echarts的使用，这些操作都比较实用，使整个网页的效果都很好。
