第6章 统计分析

学习目标

完成商品类目销售分析表
掌握echars图表插件的基本用法
使用echars完成商品类目销售统计饼图
青橙项目序列-6：https://github.com/Jonekaka/javaweb-qingcheng-6-81

1. 商品类目销售分析表

如图
交易统计分析

商品统计分析等等

1.1 需求分析

商品类目销售分析是统计一段时间内各商品分类（一级分类）的销售数量与销售额以及所占总额的比重，如下图：
目的是得出某种商品比较火，收益做好，

那么这个表的数据源是谁？如何得到这些需要的数据？

1.2 实现思路

（1）销售分析表数据来自订单表和订单明细表，
对订单表和订单明细表进行统计。
对两个表连接查询，然后再对某个字段聚合，
销售金额有两个字段，money(期望支付，价格*数量) paymoney(实际支付，期望支付-优惠券)
订单明细表中记录了商品的一级分类，我们按照一级分类聚合运算就可以统计出各分类的销售额。

（2）销售金额的统计要按照优惠后的金额（pay_money）进行统计。

（3）订单表和订单明细表数据量庞大，如果实时统计，统计效率将会很低，因此应该错开时差，通常是每天定时统计上一天的数据，将统计结果存储在一张表中。当用户执行管理后台的统计功能时，再对这张表进行统计，给前端返回统计结果。
存储统计结果的表结构如下：不过我认为应该加一个实时统计的按钮，毕竟谁都想知道当前的商品销售如何

既然这里只统计一级分类销售额，为什么表中还要有二级，三级分类？
这是为了顺带的数据统计，其他分析用得到

1.3 代码实现

1.3.1 类目统计SQL语句

按照商品一级分类、二级分类、三级分类聚合统计销售数量和销售金额，查询条件为支付状态为已支付，未删除的数据并且支付日期为某日的。
语句看着很复杂，应该分步写
先将两个表关联起来

从关联的表中，找到已经支付且订单未删除的

要统计昨天的数据，因此应该只保留昨天的，使用mysql时间函数将时间格式变为字符串格式，切除后面的具体时分秒

得到了昨天的所有数据，那么开始根据三个分类和时间进行分组

已经聚合完毕，开始得到表中的数据即可
id1,id2,id3,销售数量和，销售总额
当然，列名太丑了 ，起个别名便于看

SELECT oi.`category_id1`,oi.`category_id2`,oi.`category_id3`,DATE_FORMAT(o.`pay_time`,'%Y-%m-%d') count_date,SUM(oi.`num`) num,SUM(oi.`pay_money`) money
FROM tb_order_item oi,tb_order o
WHERE oi.`order_id`=o.`id` AND o.`pay_status`='1' AND o.`is_delete`='0' AND DATE_FORMAT(o.`pay_time`,'%Y-%m-%d')='2019-04-15'
GROUP BY oi.`category_id1`,oi.`category_id2`,oi.`category_id3`,DATE_FORMAT(o.`pay_time`,'%Y-%m-%d')

DATE_FORMAT是mysql提供的日期转换函数

1.3.2 类目统计代码实现

（1）创建实体类
上述表在数据库中新建一个即可
在代码中添加实体类，
代码自动生成器对于联合主键的表不会自动生成，

@Table(name="tb_category_report")
public class CategoryReport implements Serializable {@Idprivate Integer categoryId1;//1级分类@Idprivate Integer categoryId2;//2级分类@Idprivate Integer categoryId3;//3级分类@Idprivate Date countDate;//统计日期private Integer num;//销售量private Integer money;//销售额public Integer getCategoryId1() {return categoryId1;}public void setCategoryId1(Integer categoryId1) {this.categoryId1 = categoryId1;}public Integer getCategoryId2() {return categoryId2;}public void setCategoryId2(Integer categoryId2) {this.categoryId2 = categoryId2;}public Integer getCategoryId3() {return categoryId3;}public void setCategoryId3(Integer categoryId3) {this.categoryId3 = categoryId3;}
public Date getCountDate() {return countDate;}
public void setCountDate(Date countDate) {this.countDate = countDate;}
public Integer getNum() {return num;}
public void setNum(Integer num) {this.num = num;}
public Integer getMoney() {return money;}
public void setMoney(Integer money) {this.money = money;}}

（2）新建数据访问接口CategoryReportMapper
此处的语句即上面的语句
此处书写sql语句注意每行后面加空格，否则一拼接就是非法的
日期应该是活的#{date}

注意这里一定要有别名，因为对于数据对象来说，需要别名来识别数据，oi.category_id1不会被承认categoryId1
否则数据无法引入就会为空

public interface CategoryReportMapper extends Mapper<CategoryReport> {@Select("SELECT oi.`category_id1` categoryId1,oi.`category_id2` categoryId2,oi.`category_id3` categoryId3,DATE_FORMAT( o.`pay_time`,'%Y-%m-%d') countDate,SUM(oi.`num`) num,SUM(oi.`pay_money`) money " +"FROM tb_order_item oi,tb_order o " +"WHERE oi.`order_id`=o.`id` AND o.`pay_status`='1' AND o.`is_delete`='0'  AND  DATE_FORMAT( o.`pay_time`,'%Y-%m-%d')=#{date} " +"GROUP BY oi.`category_id1`,oi.`category_id2`,oi.`category_id3`,DATE_FORMAT( o.`pay_time`,'%Y-%m-%d')")public List<CategoryReport> categoryReport(@Param("date") LocalDate date);
}

（3）新建业务接口CategoryReportService

/*** 报表服务层接口*/
public interface CategoryReportService {/*** 商品类目按日期统计(订单表关联查询)* @param date* @return*/public List<CategoryReport> categoryReport(LocalDate date);
}

（4）新建业务实现

@Service
public class CategoryReportServiceImpl implements CategoryReportService {@Autowiredprivate CategoryReportMapper categoryReportMapper;@Overridepublic List<CategoryReport> categoryReport(LocalDate date) {return categoryReportMapper.categoryReport(date);}
}

（5）新建Controller
获得昨天日期扔过去

@RestController
@RequestMapping("/categoryReport")
public class CategoryReportController {@Referenceprivate CategoryReportService categoryReportService;/*** 昨天的数据统计* @return*/@GetMapping("/yesterday")public List<CategoryReport> yesterday(){LocalDate localDate = LocalDate.now().minusDays(1);// 得到昨天的日期return categoryReportService.categoryReport(localDate);}
}

浏览器测试： http://localhost:9101/categoryReport/yesterday.do

1.3.3 定时任务-生成统计数据

创建定时任务，每天凌晨1点统计昨天的数据，插入到tb_category_report中。
（1）CategoryReportService新增方法定义

public void createData();

（2）CategoryReportServiceImpl实现方法
获得的数据不止一条，循环遍历出来

@Transactional
public void createData() {LocalDate localDate = LocalDate.now().minusDays(1);// 得到昨天的日期List<CategoryReport> categoryReports = categoryReportMapper.categoryReport(localDate);for(CategoryReport categoryReport:categoryReports){categoryReportMapper.insert(categoryReport);}}

CategoryReportServiceImpl的service注解添加属性

@Service(interfaceClass = CategoryReportService.class)

（3）OrderTask新增方法
远程注入数据
使用功能cron定时器自动执行
很多大数据的统计与运算都在凌晨进行

@Reference
private CategoryReportService categoryReportService;
@Scheduled(cron = "0 0 1 * * ?")
public void createCategoryReportData(){System.out.println("create Category ReportData 生成类目统计数据");
categoryReportService.createData();
}

1.3.4 按日期统计一级分类数据

此时基于得到的统计数据表再次进行计算，
我们再次对tb_category_report进行聚合运算，得出一个时间段的统计数据
只需要一级分类的数据

SELECT category_id1 categoryId1,SUM(num) num ,SUM(money)
FROM  `tb_category_report`
WHERE count_date >='2019-04-15'  AND count_date <='2019-04-16' GROUP BY category_id1

（1）在CategoryReportMapper新增方法

/*** 按时间段统计一级类目* @param date1* @param date2* @return*/
@Select("SELECT category_id1 categoryId1,SUM(num) num ,SUM(money)FROM `tb_category_report` WHERE count_date>=#{date1} and count_date<=#{date2} GROUP BY category_id1")public List<Map> category1Count(@Param("date1") String date1 ,@Param("date2") String date2 );

（2）CategoryReportService新增方法

/*** 一级类目统计* @param date1* @param date2* @return*/
public List<Map> category1Count(String date1 , String date2 );

（3）CategoryReportServiceImpl实现方法

@Override
public List<Map> category1Count(String date1, String date2) {return categoryReportMapper.category1Count(date1,date2);}

（4）CategoryReportController新增方法

/*** 统计一级类目* @param date1* @param date2* @return*/
@GetMapping("/category1Count")
public List<Map> category1Count(String date1, String date2){return categoryReportService.category1Count(date1,date2);}

数据查询完成

1.3.5 商品类目统计名称显示

当前的统计结果中，只有分类id，没有分类名称。而最终的结果是要显示分类名称的，如
何实现呢？
（1）创建视图
分类名称所在的分类表在商品数据库中，而当前我们连接的是订单数据库，这种情况下
我们需要在订单数据库中创建视图，让其得到一级分类列表的id与名字。
在order订单数据库，如何查询goods商品数据库呢？
库名.表名
然而直接操作其他数据库的数据看起来将会非常麻烦。因此应该为其创建一个视图，这样操作视图就如同操作本数据库的表一样，但是效果却很好
但是表中只需要部分数据，比如一级分类的id和name,取之于蓝而胜于蓝得到新表，虚拟的视图

CREATE VIEW v_category AS
SELECT id,NAME FROM qingcheng_goods.`tb_category` WHERE parent_id=0

（2）改造之前的sql语句
让得到的视图和得到的统计表关联，得到新的数据表

SELECT category_id1 categoryId1,c.name categoryName,SUM(num) num,SUM(money) money
FROM tb_category_report r,v_category c
WHERE r.category_id1=c.id AND count_date>='2019-04-15' AND count_date<='2019-04-17'
GROUP BY category_id1,c.name

（3）修改CategoryReportMapper接口category1Count方法的sql语句

@Select("SELECT category_id1 categoryId1,c.name categoryName,SUM(num)num, SUM(money) money " +"FROM tb_category_report r,v_category1 c " +"WHERE r.category_id1=c.id AND count_date>=#{date1} ANDcount_date<=#{date2} " +"GROUP BY category_id1,c.name")
public List<Map> category1Count( @Param("date1") Stringdate1,@Param("date2") String date2);

此时名称已经绑定，到此销售数据的统计后端已经完成

接下来使用前端，展示分析结果

1.3.6 商品类目统计前端实现

（1）创建report/categoryReport.html页面，引入样式和js

<!‐‐ 引入样式 ‐‐>
<link rel="stylesheet" href="https://unpkg.com/element‐ui/lib/theme‐chalk/index.css">
<link rel="stylesheet" href="../plugins/font‐awesome/css/font‐awesome.min.css">
<link rel="stylesheet" href="../css/style.css">

引入util.js是因为要用到处理日期格式方法

<script src="/js/util.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>

（2）创建表格
从element ui网站上找到表格控件

<div id="app">
<el‐table :data="tableData" border style="width: 100%">
<el‐table‐column prop="categoryName" label="一级分类" width="200">
</el‐table‐column>
<el‐table‐column prop="num" label="数量" width="200"></el‐table‐column>
<el‐table‐column prop="money" label="销售额" width="200"></el‐table‐column>
</el‐table>
</div>

（3）创建日期范围控件
从element ui网站上找到日期选择器
v‐model=“dateRange”
绑定变量

这里添加了一个事件， @change="fetchData()
代表，当日期发生变化的时候就会自动触发下面的脚本

<el-date-pickerv-model="dateRange"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="fetchData()"></el-date-picker>

（4）编写脚本

<script>
new Vue({el: '#app',
data(){return {tableData: [],
dateRange:[]
}
},
methods:{fetchData (){//查询统计分析数据
let date1=this.dateRange[0].Format("yyyy‐MM‐dd");
let date2=this.dateRange[1].Format("yyyy‐MM‐dd");
axios.get(`/categoryReport/category1Count.do?date1=${date1}&date2=${date2}`).then(response => {this.tableData = response.data;
});
}
}
})
</script>

暂时忽略饼形图，日期变化时自动触发
选择日期区间

1.3.7 比例计算

需求：统计表中显示销售数量比例与销售金额比例，销售金额单位转换为元。数据库中保存的是元，/100转化为元
思路：得到报表数据后，通过循环计算总销售数量和总销售额，在表格中通过模板列计算得出比例。
得到一列中所有的数量和，然后除法
得到一列中所有的金额和，然后除法

表格新增
如上图，对于比例不要小数
{{(scope.row.num/totalNum*100).toFixed(0)}}%
销售额保留两位
{{(scope.row.money/100).toFixed(2)}}

 <el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="categoryName"label="分类名称"width="200"></el-table-column><el-table-columnprop="num"label="销售量"width="200"></el-table-column><el-table-columnlabel="数量比例"width="200"><template slot-scope="scope">{{(scope.row.num/totalNum*100).toFixed(0)}}%</template></el-table-column><el-table-columnlabel="销售额"width="200"><template slot-scope="scope">{{(scope.row.money/100).toFixed(2)}}</template></el-table-column><el-table-columnlabel="金额比例"width="200"><template slot-scope="scope">{{(scope.row.money/totalMoney*100).toFixed(0)}}%</template></el-table-column></el-table>

计算脚本哪里
初始化总额为0

data(){return {tableData:[],dateRange:[],totalNum:0,totalMoney:0}},

fetchdata每次调用时都清零，防止日期变化时数值自动累加
累加数量

  //计算总销售数量和总销售金额this.totalNum=0;this.totalMoney=0;for(let i=0;i<this.tableData.length;i++){this.totalNum+=this.tableData[i].num;this.totalMoney+=this.tableData[i].money;}

1.4 小结

分组聚合SQL语句的编写–对于复杂语句书写思路
跨库查询
视图的创建与使用
通用mapper自定义方法
定时任务
日期范围控件（前端）

2. EChars图表插件

已经有了表和比例数据，但是不够直观

2.1 EChars简介

ECharts，百度开源的图表插件。一个使用 JavaScript 实现的开源可视化库，可以流
畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，
Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，
可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形
图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系
图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，
并且支持图与图之间的混搭。
详见EChars官网 https://echarts.baidu.com/
界面非常炫酷
3d地图都有

2.2 快速入门

2.2.1 简单柱状图

echars组件有三种版本，完全，通用，精简，功能随着减少
（1）新建页面，引入js

<script src="/js/echarts.common.min.js"></script>

（2）在页面放置 div用于显示报表

<div id="main" style="width: 600px;height:400px;"></div>

（3）编写js代码
标题，图例（控制图是否显示的小控件），x轴设计，y轴，具体的图表数据，图标类型

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};
// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);

2.2.2 多数据的柱状图

单数据柱状图往往不能满足需求，对于单一x轴坐标可能有多维类型

<!DOCTYPE html>
<html>
<head>
<meta charset="utf‐8">
<title>ECharts</title>
<script src="echarts.common.min.js"></script>
</head>
<body>
<!‐‐ 为 ECharts 准备一个具备大小（宽高）的 DOM ‐‐>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量','销售额']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]},{name: '销售额',type: 'bar',data: [30, 33, 56, 88, 23, 55]}]};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

如果想要看某一类型数据，关闭其他图例即可

2.2.3 简单饼图

如果有疑问看官方文档，每个配置项都有说明
标题，主，副
链接
提示框组件，鼠标悬浮自动点亮，有坐标轴，空等
图例，控制竖直还是水平显示，位置（像素，四大方向，百分比），图例内容
指定数据显示图形形式，图形的位置，名字，部分显示内容，百分比占用
图形的高亮显示，当点击时显示
使用官方案例少量改动即可

<!DOCTYPE html>
<html>
<head>
<meta charset="utf‐8">
<title>ECharts</title>
<script src="echarts.common.min.js"></script>
</head>
<body>
<!‐‐ 为 ECharts 准备一个具备大小（宽高）的 DOM ‐‐>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据option = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series : [{name: '访问来源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};
// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

配置项详解：

1. title 标题组件
   title.text 主标题文本
   title.subtext 副标题文本
   title.x （title.textAlign） 整体（包括 text 和 subtext）的水平对齐 可选
   值： ‘auto’ 、 ‘left’ 、 ‘right’ 、 ‘center’ 。
2. tooltip 提示框组件
   tooltip.trigger 触发类型
   可选：
   ‘item’
   数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
   ‘axis’
   坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
   ‘none’
   什么都不触发。
   tooltip.formatter 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
   模板变量有 {a} , {b} ， {c} ， {d} ，分别表示系列名，数据名，数据值等。 不同图表
   类型下的 {a} ， {b} ， {c} ， {d} 含义不一样。 其中变量 {a} , {b} , {c} , {d} 在不
   同图表类型下代表数据含义为：
   折线（区域）图、柱状（条形）图、K线图 : {a} （系列名称）， {b} （类目
   值）， {c} （数值）, {d} （无）
   散点图（气泡）图 : {a} （系列名称）， {b} （数据名称）， {c} （数值数
   组）, {d} （无）
   地图 : {a} （系列名称）， {b} （区域名称）， {c} （合并数值）, {d} （无）
   饼图、仪表盘、漏斗图: {a} （系列名称）， {b} （数据项名称）， {c} （数
   值）, {d} （百分比）
3. legend 图例组件
   legend.orient 图例列表的布局朝向
   可选：
   ‘horizontal’ 水平布局
   ‘vertical’ 垂直布局
   legend.left 图例组件离容器左侧的距离。
   left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百
   分比，也可以是 ‘left’ , ‘center’ , ‘right’ 。
   如果 left 的值为 ‘left’ , ‘center’ , ‘right’ ，组件会根据相应的位置自动对齐。
   legend.data 图例的数据数组。
4. series 系列列表
   series[i]-pie.radius 饼图的半径。可以为如下类型：
   number ：直接指定外半径值。
   string ：例如， ‘20%’ ，表示外半径为可视区尺寸（容器高宽中较小一项）的 20%
   长度。
   Array. ：数组的第一项是内半径，第二项是外半径。每一项遵从上
   述 number string 的描述。
   series[i]-pie.center 饼图的中心（圆心）坐标
   数组的第一项是横坐标，第二项是纵坐标。
   支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高
   度。
   series[i]-pie.itemStyle 图形的样式
   series[i]-pie.emphasis 高亮的扇区和标签样式。
   series[i]-pie.emphasis.itemStyle.shadowBlur 图形阴影的模糊大小
   series[i]-pie.emphasis.itemStyle.shadowColor 阴影颜色
   series[i]-pie.emphasis.itemStyle.shadowOffsetX 阴影水平方向上的偏移距离

2.2.4 多数据的饼图

道理相似，有时一个饼图不足以显示全部数据，因此需要多个饼图

option = {title : {text: '商品类目销售分析',subtext: '这是个例子',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['水果','蔬菜','家电','数码','服装']},series : [{name: '销售量',type: 'pie',radius : '35%',center: ['30%', '50%'],data:[{value:335, name:'水果'},{value:310, name:'蔬菜'},{value:234, name:'家电'},{value:135, name:'数码'},{value:1548, name:'服装'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},{name: '销售额',type: 'pie',radius : '35%',
center: ['80%', '50%'],data:[{value:2003, name:'水果'},{value:2310, name:'蔬菜'},{value:4434, name:'家电'},{value:1125, name:'数码'},{value:1448, name:'服装'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};

注意：这两个饼图的圆点坐标不要重复。

3. 商品类目销售统计（饼图）

3.1 需求分析

根据商品类目销售分析表生成饼图，
左侧的饼图为销售量统计分析图，右侧的饼图为销售额统计分析图。

3.2 实现思路

（1）EChars有自己的数据格式，我们可以将后端返回的商品类目销售分析表的数据进行整理，得到EChars需要的数据格式。
（2）使用EChars的饼图控件。

3.3 代码实现

（1）页面引入js

<script src="/js/echarts.common.min.js"></script>

（2）在页面放置 div用于显示报表

<div id="main" style="width: 600px;height:400px;"></div>

（3）修改fetchData方法，在回调处添加以下代码
先获得绘制饼图所需的数据组
然后将数据放置在饼图的数据源处即可

  let legendData=[];//图例let numData=[];//销售量数据let moneyData=[];//销售额数据for(let i=0;i<this.tableData.length;i++){legendData.push( this.tableData[i].categoryName  );numData.push( { name:this.tableData[i].categoryName   ,value:this.tableData[i].num  } );moneyData.push( { name:this.tableData[i].categoryName   ,value:this.tableData[i].money  } );}//创建饼图let myChart = echarts.init(document.getElementById('main'));let option = {title : {text: '商品类目销售分析',subtext: '',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: legendData},series : [{name: '销售量',type: 'pie',radius : '35%',center: ['30%', '50%'],data:numData,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},{name: '销售额',type: 'pie',radius : '35%',center: ['80%', '50%'],data:moneyData,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);

4. 流量统计

4.1 相关术语

4.1.1 IP

公网ip,因此私网下的多个人访问被视为同一个人，统计不精准
IP(独立IP),即Internet Protocol,这里是指独立IP数，独立IP是指不同IP地址的计算机
访问网站时被计的总次数。独立IP数是衡量网站流量的一个重要指标。一般一天内
(00:00-24:00)相同IP地址的客户端访问网站页面只会被计为一次. 假设公司很多人在局
域网中同时打开网站，此时只能算一个独立IP。

4.1.2 UV

根据客户端判断人流量，较为精准，但是如果多个人使用同一台设备，也会有误差
UV（独立访客）即Unique Visitor,同一个客户端（PC或移动端）访问网站被计为一
个访客。一天(00:00-24:00)内相同的客户端访问同一个网站只计一次UV。UV一般是以客
户端Cookie等技术作为统计依据的，实际统计会有误差。

4.1.3 PV

页面被点击一次视为一次访问
PV(访问量）即Page View ,中文翻译为页面浏览，即页面浏览量或点击量，不管客户
端是不是不同，也 不管IP是不是不同，用户只要访问网站页面就会被计算PV，一次计一
个PV。

4.2 百度统计

点击量可以不用自己统计，而是交给百度

全球最大的中文网站流量分析平台，登陆系统后按照系统说明完成代码添加，
百度统计便可马上收集数据，为用户提高投资回报率提供决策依据。帮助用户跟踪网站的真实流量，并优化网站的运营决策。
https://tongji.baidu.com/web/welcome/login
点击来源客户端，uv,pv,ip，点击的页面等等

实际生产中，可以通过百度提供的api,将其数据导入自己的网站中展现即可

5. 交易统计

5.1 交易统计表

5.1.1 需求分析

实现交易数据统计，以表格形式展现浏览人数 下单人数 订单数 下单件数 有效订单
数 下单金额 退款金额 付款人数 付款订单数 付款件数 付款金额

5.1.2 实现思路

（1）创建交易统计表，用于存储每天的统计结果（表结构定义）
（2）编写代码，创建定时任务，在凌晨1点执行统计，将统计结果插入到交易统计表
（3）编写代码，实现对交易统计表的聚合运算（按时间段查询）
（4）浏览人数可以通过调用“百度统计”API获取。

5.2 漏斗图

5.2.1 需求分析

根据浏览人数、下单人数和付款人数构建漏斗图。见静态原型

5.2.2 实现思路

（1）使用EChars的漏斗图控件实现此功能，接受的数据是上一步统计出来的浏览人数、
下单人数和付款人数
（2）下单转化率= 下单人数/浏览人数 用户购买欲望如何
（3）付款转化率=付款人数/下单人数 是不是付款流程有问题
（4）成交转化率=付款人数/浏览人数

5.3 折线图

5.3.1 需求分析

根据某一时间段的交易数据，展现折线图。交易数据包括付款金额、退款金额、付款人
数、付款件数、下单转化率、付款转化率、成交转化率

5.3.2 实现思路

使用EChars的折线图可以实现

javaweb-青橙项目-6-81相关推荐

1. 青橙项目之品牌管理前端 day2

   学习掌握目标 1.Element-Ui组件了解与使用 2.ES6与ES5语法 3.品牌管理的前端代码 4.图片上传代码,本地和阿里云存储 5.掌握阿里云oss存储 未完成 1.ElementUI简介 ...

2. 青橙商城项目总结day03-04

   青橙商城项目总结 day03_模板与分类管理 设计模式:SSM;分库分表 技术栈:黑马架构师:vue:Element UI 学习目标: 1)使用"黑马架构师"完成代码生成 \1. ...

3. 青橙商城项目总结day02

   青橙商城项目总结 day02_品牌管理前端与图片上传 技术栈:Element UI:ES6:Spring:OSS 学习目标: 1)ElementUI常用组件:https://element.eleme ...

4. 阿里青橙奖名单公布，23位院士、2位图灵奖得主推荐

   9月9日,2020年阿里巴巴达摩院青橙奖获奖名单公布,梁文华等10位青年科学家获得达摩院的1000万元奖金.这群平均年龄不足32岁的科研后浪收到了中国工程院院士钟南山的鼓励:"你们处在最好的 ...

5. 韦东奕陈杲同获达摩院青橙奖，90后数学新星光彩夺目，却说「没有黄金一代」...

   鱼羊 博雯 发自 凹非寺 量子位 报道 | 公众号 QbitAI 南北两位90后数学新星,刚刚同时获颁百万奖金大奖. 就在今天公布的阿里达摩院青橙奖十人名单中,北大韦东奕和中科大陈杲的名字赫然在列. ...

6. 未来教育python视频百度云-青橙课程 | 人工智能走进课堂，为未来教育高质量发展赋能！...

   原标题:青橙课程 | 人工智能走进课堂,为未来教育高质量发展赋能! 是不是有一种可能性,让真实的问题驱动学习,让认知的逻辑替代学科的轨迹,让思维的训练优先于机械的训练. 随着社会对创新人才的需求日益高 ...

7. 阿里达摩院青橙奖“硬核10人”出炉，钟南山寄语青年科学家

   9月9日,2020年阿里巴巴达摩院青橙奖获奖名单公布,梁文华等10位青年科学家获得达摩院的1000万元奖金.这群平均年龄不足32岁的科研后浪收到了中国工程院院士钟南山的鼓励:"你们处在最好的 ...

8. 北大韦神等十人获奖，均分1000万元，达摩院2021青橙奖出炉

   点击 机器学习算法与Python学习 ,选择加星标 精彩内容不迷路 机器之心报道 这些优秀的国内年轻学者覆盖了人工智能.生物学.数学等多个学科,他们将平分 1000 万元奖金. 今天上午,阿里巴巴达摩 ...

9. “北大数学系扫地僧” 等十人获奖，均分1000万元，达摩院2021青橙奖出炉

   来源:机器之心 这些优秀的国内年轻学者覆盖了人工智能.生物学.数学等多个学科,他们将平分 1000 万元奖金. 昨天,阿里巴巴达摩院青橙奖第四届获奖名单正式揭晓.10 位获奖青年科学家将平分 1000 ...

最新文章

1. NLP专栏｜图解 BERT 预训练模型！
2. MySQL百万级、千万级数据多表关联SQL语句调优
3. WinSocket简单编程实验
4. 查询数据库中的表结构信息
5. boost::fusion::traits::tag_of用法的测试程序
6. hdu 1054 Strategic Game 二分图最小点覆盖
7. linux-shell面试题 之二
8. 多次点击android版本出现棒棒糖,android – 为前棒棒糖设备创建循环显示
9. 大数据项目实战数仓4——总纲
10. C#winform之自定义按钮形状（初级版）
11. LateX各种命令符号
12. 同时虚拟多个3D桌面
13. 项目Beta冲刺（5/7）（追光的人）(2019.5.27)
14. 计算机专业游戏本后悔,毕业了，到底要不要买游戏笔记本电脑？好多人买了都后悔了？...
15. UVA 10881 Piotr‘s Ants
16. 在线计算机能力测试答案,计算机基础知识在线测试答案-20210514014539.doc-原创力文档...
17. hibernate left join fetch 出错的问题
18. Flink scal api 不支持RichAsyncFunction
19. 【数据】【自动化交易】Python编写策略模拟股票交易
20. 常用的遥感植被指数介绍

热门文章

1. 【大局观】 NO.4 “加速时代”中怎样成为一个全球化人才？
2. 远程访问路由器下的电脑
3. 暑期实践阶段性总结 2022-8-5
4. 贫富差距扩大：转型中国不能继续承受之重
5. 解决Mysql中删除重复记录的问题
6. 到底该如何看待5.5G？
7. HBase系列--列族设计及影响
8. java for 下标_Java如何在 Word 中设置上、下标
9. for..in和for..of的区别
10. 网络服务-DCHP原理与配置