标签：category javaweb 青橙 类目 81 数据 public 统计 name
文章目录
第6章 统计分析
学习目标
完成商品类目销售分析表
掌握echars图表插件的基本用法
使用echars完成商品类目销售统计饼图
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 {
@Id
private Integer categoryId1;//1级分类
@Id
private Integer categoryId2;//2级分类
@Id
private Integer categoryId3;//3级分类
@Id
private 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 {
@Autowired
private CategoryReportMapper categoryReportMapper;
@Override
public List<CategoryReport> categoryReport(LocalDate date) {
return categoryReportMapper.categoryReport(date);
}
}
（5）新建Controller
获得昨天日期扔过去
@RestController
@RequestMapping("/categoryReport")
public class CategoryReportController {
@Reference
private 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} AND
count_date<=#{date2} " +
"GROUP BY category_id1,c.name")
public List<Map> category1Count( @Param("date1") String
date1,@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-picker
v-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"
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
label="数量比例"
width="200">
<template slot-scope="scope">
{{(scope.row.num/totalNum*100).toFixed(0)}}%
</template>
</el-table-column>
<el-table-column
label="销售额"
width="200">
<template slot-scope="scope">
{{(scope.row.money/100).toFixed(2)}}
</template>
</el-table-column>
<el-table-column
label="金额比例"
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>
配置项详解：
- title 标题组件
title.text 主标题文本
title.subtext 副标题文本
title.x （title.textAlign） 整体（包括 text 和 subtext）的水平对齐 可选
值： ‘auto’ 、 ‘left’ 、 ‘right’ 、 ‘center’ 。 - 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} （百分比） - legend 图例组件
legend.orient 图例列表的布局朝向
可选：
‘horizontal’ 水平布局
‘vertical’ 垂直布局
legend.left 图例组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百
分比，也可以是 ‘left’ , ‘center’ , ‘right’ 。
如果 left 的值为 ‘left’ , ‘center’ , ‘right’ ，组件会根据相应的位置自动对齐。
legend.data 图例的数据数组。 - 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的折线图可以实现
标签：category,javaweb,青橙,类目,81,数据,public,统计,name 来源： https://blog.csdn.net/lidashent/article/details/116081404
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。