From b64a9e500484cfe6d443c7ddd7d7896f306dfbd1 Mon Sep 17 00:00:00 2001
From: Helius <wangdoubleone@gmail.com>
Date: Wed, 09 Dec 2020 10:24:17 +0800
Subject: [PATCH] Merge branch 'master' of https://gitee.com/jyyforjava/zq-erp
---
zq-erp/src/main/resources/templates/views/admin/hive-erp/analysis/customerFlow.html | 178 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 138 insertions(+), 40 deletions(-)
diff --git a/zq-erp/src/main/resources/templates/views/admin/hive-erp/analysis/customerFlow.html b/zq-erp/src/main/resources/templates/views/admin/hive-erp/analysis/customerFlow.html
index f18170b..2cbe29c 100644
--- a/zq-erp/src/main/resources/templates/views/admin/hive-erp/analysis/customerFlow.html
+++ b/zq-erp/src/main/resources/templates/views/admin/hive-erp/analysis/customerFlow.html
@@ -11,8 +11,14 @@
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
+ <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
<script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script>
+ <style>
+ .echarts {
+ height: 400px
+ }
+ </style>
</head>
<body class=" container-fluid">
@@ -31,7 +37,8 @@
</button>
</div>
</div>
- <div class="form-group mr-20" id="timeBox">
+ <div class="form-group mr-20 mt-20" id="timeBox">
+
<label>统计范围</label>
<input name="beginTime" type="text" autocomplete="off"
@@ -39,7 +46,7 @@
name="endTime" type="text" class="form-control datetimepicker" autocomplete="off"
id="endTime">
</div>
- <div class="form-group mr-20">
+ <div class="form-group mr-20 mt-20 ">
<label>统计单位</label>
<select name="statisticsUnit" class=" form-control " id="unitSelect"
style="width: 80px">
@@ -50,22 +57,78 @@
</select>
</div>
</form>
+
+
<!-- 搜索框部分en -->
- <div class="row chartsBox">
- <div class=" col-md-12">
- <div class="echarts" id="echarts-line-chart2"></div>
+ <div class="row chartsBox " style="margin-top: 40px">
+
+ <div class=" col-md-6">
+ <div class="panel panel-info">
+ <div class="panel-heading">门店人次对比分析</div>
+ <div class="panel-body">
+ <div class="echarts" id="echarts-line-chart2"></div>
+ </div>
+ </div>
+ </div>
+ <div class=" col-md-6">
+ <div class="panel panel-info">
+ <div class="panel-heading">门店人头对比分析</div>
+ <div class="panel-body">
+ <div class="echarts" id="echarts-line-chart1"></div>
+ </div>
+ </div>
</div>
</div>
+
+ <div class="row chartsBox " style="margin-top: 40px">
+ <div class=" col-md-6">
+ <div class="panel panel-info">
+ <div class="panel-heading">门店到店率对比分析</div>
+ <div class="panel-body">
+ <div class="echarts" id="echarts-line-chart3"></div>
+ </div>
+ </div>
+ </div>
+ <div class=" col-md-6">
+ <div class="panel panel-warning">
+ <div class="panel-heading">数据统计说明</div>
+ <div class="panel-body ">
+ <div class="echarts">
+ <ul>
+ <li>
+ <h3>会员人头数</h3>
+ <p>一段时间内某个门店所有进店客户的总人数，同一个人无论进店几次都视为一个人头数</p>
+ </li>
+ <li>
+ <h3>会员人次</h3>
+ <p>一段时间内某个门店一个会员有3天来过门店则人次为3以此类推</p>
+ </li>
+ <li>
+ <h3>到店率</h3>
+ <p>一段时间内某个门店所有客户人次数除以人头数即为到店率</p>
+ </li>
+ </ul>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
</div>
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
-<script type="text/javascript" th:src="@{/plugin/echarts/echarts.all.js}"></script>
+<script type="text/javascript" th:src="@{/plugin/echarts/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/plugin/echarts/macarons.js}"></script>
<script type="text/javascript" th:src="@{/plugin/dateformat.js}"></script>
<script type="text/javascript" th:src="@{/plugin/StringUtil.js}"></script>
<script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script>
<script type="text/javascript" th:src="@{/js/systools/ChartsUtils.js}"></script>
+<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>
+<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>
<script>
@@ -75,14 +138,20 @@
// 基于准备好的dom，初始化echarts实例
+ var myChart1 = echarts.init(document.getElementById('echarts-line-chart1'), 'macarons');
var myChart2 = echarts.init(document.getElementById('echarts-line-chart2'), 'macarons');
-
-
+ var myChart3 = echarts.init(document.getElementById('echarts-line-chart3'), 'macarons');
+ /*
+ 点击事件
+ myChart1.on('click', function (params) {
+ console.log(params);
+ });
+ */
// 指定图表的配置项和数据
- function getption(title) {
+ function getption() {
return {
title: {
- text: title,
+ text: "",
padding: 20
},
legend: {},
@@ -97,7 +166,10 @@
}
},
tooltip: {
- trigger: 'axis'
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
},
xAxis: {
type: 'category',
@@ -121,26 +193,9 @@
filterMode: 'filter'
}
],
- series: [{
- name: '客流量',
- type: 'line',
- smooth: true,
- data: [],
- markLine: {
- data: [
- {type: 'average', name: '平均值'}
- ]
- },
- markPoint: {
- data: [
- {type: 'max', name: '最大值'},
- {type: 'min', name: '最小值'}
- ]
- },
- }],
animation: true,
- animationDuration: 1000,
- animationDurationUpdate: 1000,
+ animationDuration: 500,
+ animationDurationUpdate: 500,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
}
@@ -151,36 +206,79 @@
//加载数据
function loadData() {
+ //加载门店客流对比
+ myChart1.showLoading();
+ $.AjaxProxy({
+ p: MForm.toJson("#serchform"),
+ c: false,
+ }).invoke(basePath+"/admin/analysis/customerHeadCompare",
+ function (loj) {
+ var map = loj.getValue("mapInfo");
+ console.log(map);
+ var option = getption("门店人头数对比");
+ option.series = map.series;
+ console.log("option.series",option.series);
+ option.legend.data = map.legendData;
+ option.xAxis.data = map.xAxis;
+ console.log(option);
+ // 使用刚指定的配置项和数据显示图表。
+ myChart1.setOption(option);
+ myChart1.hideLoading();
+ });
+ }
+ var chartsUtils1 = new ChartsUtils(loadData);
+ chartsUtils1.setDataPackTimeValue();
+ chartsUtils1.loadChartData();
+ //加载数据2
+ function loadData2() {
//加载门店客流对比
myChart2.showLoading();
$.AjaxProxy({
p: MForm.toJson("#serchform"),
c: false,
- }).invoke(basePath+"/admin/analysis/vipVisitTendency",
+ }).invoke(basePath+"/admin/analysis/customerEnterCountCompare",
function (loj) {
var map = loj.getValue("mapInfo");
- var option = getption("门店客流趋势对比");
+ var option = getption("门店人次对比");
option.series = map.series;
option.legend.data = map.legendData;
option.xAxis.data = map.xAxis;
- console.log(option);
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option);
myChart2.hideLoading();
-
-
});
-
-
}
- var ChartsUtils = new ChartsUtils(loadData);
- ChartsUtils.setDataPackTimeValue();
- ChartsUtils.loadChartData();
+ var chartsUtils2 = new ChartsUtils(loadData2);
+ chartsUtils2.loadChartData();
+
+ //加载数据3
+ function loadData3() {
+ //加载门店到店率
+ myChart3.showLoading();
+ $.AjaxProxy({
+ p: MForm.toJson("#serchform"),
+ c: false,
+ }).invoke(basePath+"/admin/analysis/customerEnterRateCompare",
+ function (loj) {
+ var map = loj.getValue("mapInfo");
+ var option = getption("门店到店率对比");
+ option.series = map.series;
+ option.legend.data = map.legendData;
+ option.xAxis.data = map.xAxis;
+ // 使用刚指定的配置项和数据显示图表。
+ myChart3.setOption(option);
+ myChart3.hideLoading();
+
+ });
+ }
+
+ var chartsUtils3 = new ChartsUtils(loadData3);
+ chartsUtils3.loadChartData();
</script>
--
Gitblit v1.9.1