<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
<!-- 本框架基本脚本和样式 -->
|
<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">
|
|
<body class="gray-bg">
|
|
<div class="ibox-content">
|
<!-- 搜索框部分start -->
|
<form class="form-inline" id="serchform">
|
<div class="row mb-10">
|
<div class="col-sm-8">
|
<button id="serach" type="button" class="btn btn-info btn-sm"><i
|
class="fa fa-search"></i> 搜索
|
</button>
|
<button onclick="myGrid.resetForm()" type="button" class="btn btn-info btn-sm"><i
|
class="fa fa-refresh "></i> 重置
|
</button>
|
</div>
|
</div>
|
<div class="form-group mr-20 mt-20" id="timeBox">
|
|
<label>统计范围</label>
|
|
<input name="beginTime" type="text" autocomplete="off"
|
class="form-control datetimepicker" id="beginTime">-<input
|
name="endTime" type="text" class="form-control datetimepicker" autocomplete="off"
|
id="endTime">
|
</div>
|
<div class="form-group mr-20 mt-20 ">
|
<label>统计单位</label>
|
<select name="statisticsUnit" class=" form-control " id="unitSelect"
|
style="width: 80px">
|
<option value="时">时</option>
|
<option selected="selected" value="日">日</option>
|
<option value="月">月</option>
|
<option value="年">年</option>
|
</select>
|
</div>
|
</form>
|
|
|
<!-- 搜索框部分en -->
|
|
<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.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>
|
|
|
MTools.autoFullSelect();
|
$(".select2").select2();
|
|
|
// 基于准备好的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() {
|
return {
|
title: {
|
text: "",
|
padding: 20
|
},
|
legend: {},
|
toolbox: {
|
show: true,
|
feature: {
|
mark: {show: true},
|
dataView: {show: true, readOnly: false},
|
magicType: {show: true, type: ['line', 'bar']},
|
restore: {show: true},
|
saveAsImage: {show: true}
|
}
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
axisLabel: {
|
rotate: 30
|
},
|
splitLine: {
|
show: false,
|
},
|
data: []
|
},
|
yAxis: {
|
type: 'value'
|
},
|
dataZoom: [
|
{
|
id: 'dataZoomX',
|
type: 'slider',
|
xAxisIndex: [0],
|
filterMode: 'filter'
|
}
|
],
|
animation: true,
|
animationDuration: 500,
|
animationDurationUpdate: 500,
|
animationEasing: 'linear',
|
animationEasingUpdate: 'linear',
|
}
|
|
}
|
;
|
|
|
//加载数据
|
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/customerEnterCountCompare",
|
function (loj) {
|
var map = loj.getValue("mapInfo");
|
var option = getption("门店人次对比");
|
option.series = map.series;
|
option.legend.data = map.legendData;
|
option.xAxis.data = map.xAxis;
|
// 使用刚指定的配置项和数据显示图表。
|
myChart2.setOption(option);
|
myChart2.hideLoading();
|
|
});
|
}
|
|
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>
|
|
</body>
|
|
</html>
|
