利用框架绘图

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的使用，这些操作都比较实用，使整个网页的效果都很好。