Skip to content

C
chinafrica
提交 c2594372 authored 作者: 吴德鹏's avatar 吴德鹏
浏览文件
操作

完成首页注册量统计

上级 6629b251
显示空白字符变更
内嵌 并排
正在显示 包含 806 行增加 和 1136 行删除
platform-admin/src/main/java/com/platform/controller/TbCfUserInfoController.java
浏览文件 @ c2594372
......@@ -5,6 +5,8 @@ import com.platform.service.TbCfUserInfoService;
import com.platform.utils.PageUtils;
import com.platform.utils.Query;
import com.platform.utils.R;
import com.platform.vo.StatisticalVo;
import org.apache.ibatis.annotations.Param;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
......@@ -108,4 +110,50 @@ public class TbCfUserInfoController {
String userId = tbCfUserInfoService.queryById(account);
return R.ok().put("userId", userId);
}
/**
* 统计分析：
* 1）统计每天的注册量，2）统计今天的注册量，3）统计本周注册量，4）统计本月注册量，5）统计今年的注册量
*/
@ResponseBody
@GetMapping("/getDailyRegistered")
public R getDailyRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getDailyRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getDayRegistered")
public R getDayRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getDayRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getWeekRegistered")
public R getWeekRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getWeekRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getMonthRegistered")
public R getMonthRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getMonthRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getYearRegistered")
public R getYearRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getYearRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getRegisteredByDate")
public R getRegisteredByDate(String start, String end) {
List<StatisticalVo> userList = tbCfUserInfoService.getRegisteredByDate(start, end);
return R.ok().put("list", userList);
}
}
platform-admin/src/main/java/com/platform/dao/TbCfUserInfoDao.java
浏览文件 @ c2594372
package com.platform.dao;
import com.platform.entity.TbCfUserInfoEntity;
import com.platform.vo.StatisticalVo;
import org.apache.ibatis.annotations.Param;
import java.util.List;
......@@ -20,4 +22,16 @@ public interface TbCfUserInfoDao extends BaseDao<TbCfUserInfoEntity> {
List<String> getUserIdsByNick(String nick);
List<String> getUserIds(String name);
List<StatisticalVo> getDailyRegistered();
List<StatisticalVo> getDayRegistered();
List<StatisticalVo> getWeekRegistered();
List<StatisticalVo> getMonthRegistered();
List<StatisticalVo> getYearRegistered();
List<StatisticalVo> getRegisteredByDate(@Param("start") String start, @Param("end") String end);
}
platform-admin/src/main/java/com/platform/service/TbCfUserInfoService.java
浏览文件 @ c2594372
package com.platform.service;
import com.platform.entity.TbCfUserInfoEntity;
import com.platform.vo.StatisticalVo;
import org.apache.ibatis.annotations.Param;
import java.util.List;
import java.util.Map;
......@@ -74,4 +76,16 @@ public interface TbCfUserInfoService {
long queryUserTotal();
String queryByAccount(String account);
List<StatisticalVo> getDailyRegistered();
List<StatisticalVo> getDayRegistered();
List<StatisticalVo> getWeekRegistered();
List<StatisticalVo> getMonthRegistered();
List<StatisticalVo> getYearRegistered();
List<StatisticalVo> getRegisteredByDate(String start, String end);
}
platform-admin/src/main/java/com/platform/service/impl/TbCfUserInfoServiceImpl.java
浏览文件 @ c2594372
......@@ -4,6 +4,7 @@ import com.platform.dao.TbCfUserInfoDao;
import com.platform.entity.TbCfUserInfoEntity;
import com.platform.service.TbCfUserInfoService;
import com.platform.utils.IdUtil;
import com.platform.vo.StatisticalVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
......@@ -70,6 +71,42 @@ public class TbCfUserInfoServiceImpl implements TbCfUserInfoService {
@Override
public String queryByAccount(String account) {
return tbCfUserInfoDao.queryById(account) ;
return tbCfUserInfoDao.queryById(account);
}
@Override
public List<StatisticalVo> getDailyRegistered() {
return tbCfUserInfoDao.getDailyRegistered();
}
@Override
public List<StatisticalVo> getDayRegistered() {
return tbCfUserInfoDao.getDayRegistered();
}
@Override
public List<StatisticalVo> getWeekRegistered() {
return tbCfUserInfoDao.getWeekRegistered();
}
@Override
public List<StatisticalVo> getMonthRegistered() {
return tbCfUserInfoDao.getMonthRegistered();
}
@Override
public List<StatisticalVo> getYearRegistered() {
return tbCfUserInfoDao.getYearRegistered();
}
@Override
public List<StatisticalVo> getRegisteredByDate(String start, String end) {
return tbCfUserInfoDao.getRegisteredByDate(start, end);
}
}
platform-admin/src/main/java/com/platform/vo/StatisticalVo.java 0 → 100644
浏览文件 @ c2594372
package com.platform.vo;
/**
* @Auther: wudepeng
* @Date: 2020/07/14
* @Description:数据统计实体类
*/
public class StatisticalVo {
//日期
private String date;
//数量
private Integer num;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public Integer getNum() {
return num;
}
public void setNum(Integer num) {
this.num = num;
}
}
platform-admin/src/main/resources/com/platform/dao/TbCfUserInfoDao.xml
浏览文件 @ c2594372
......@@ -53,6 +53,75 @@
from tb_cf_user_info
where user_id = #{id}
</select>
<!--查询每日注册量-->
<select id="getDailyRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
GROUP BY
date
</select>
<!--查询当天注册量-->
<select id="getDayRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
DATE_FORMAT( create_time, '%Y-%m-%d' ) = curdate( )
</select>
<!--查询本周注册量-->
<select id="getWeekRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
YEARWEEK( date_format( create_time, '%Y-%m-%d' ) ) = YEARWEEK( now( ) )
GROUP BY
date
</select>
<!--查询本月注册量-->
<select id="getMonthRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
date_format( create_time, '%Y%m' ) = date_format( curdate( ), '%Y%m' )
GROUP BY
date
</select>
<!--查询今年注册量-->
<select id="getYearRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
date_format( create_time, '%Y' ) = date_format( curdate( ), '%Y' )
GROUP BY
date
</select>
<select id="getRegisteredByDate" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
date_format( create_time, '%Y-%m-%d' ) > #{start}
AND date_format( create_time, '%Y-%m-%d' ) &lt; #{end}
GROUP BY
date
</select>
<select id="queryList" resultType="com.platform.entity.TbCfUserInfoEntityExtends">
SELECT
u.*,
......
platform-admin/src/main/webapp/WEB-INF/page/sys/main.html
浏览文件 @ c2594372
......@@ -8,7 +8,7 @@
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> -->
#parse("sys/header.html")
<style>
/* common_css */
:root{
......@@ -393,7 +393,7 @@
</div>
</div>
<div class="m-card-bottom">
<span>日均销售额 <i>$1000</i></span>
<span>日均销售额 <i>$29330.32</i></span>
</div>
</div>
<!-- 访问量 -->
......@@ -411,7 +411,7 @@
<div class="m-card-functionzone" id='echartsPV'>
</div>
<div class="m-card-bottom">
<span>日访问量 <i>1000</i></span>
<span>日访问量 <i>127230</i></span>
</div>
</div>
<!-- 支付笔数 -->
......@@ -428,7 +428,7 @@
<p class="m-card-main-text">{{animatedNumberFrequencyOfPayment}}</p>
<div class="m-card-functionzone" id='echartsPayTheAmount'></div>
<div class="m-card-bottom">
<span>转换率 <i>60%</i></span>
<span>转换率 <i>11.3%</i></span>
</div>
</div>
<!-- 新增用户 -->
......@@ -442,7 +442,7 @@
title="今日当前注册用户数量"
>
</p>
<p class="m-card-main-text">213243</p>
<p class="m-card-main-text">13243</p>
<div class="m-card-functionzone flex-mill-center" id="echartsNewUsers">
<div class="pillar">
<div title="今日新增比例" class="TodaySchedule" style="width:20px;"></div>
......@@ -482,10 +482,10 @@
</div>
</div>
<div class="right-functionzone ">
<span >今日</span>
<span>本周</span>
<span>本月</span>
<span>全年</span>
<span @click="getDayRegistered">今日</span>
<span @click="getWeekRegistered">本周</span>
<span @click="getMonthRegistered">本月</span>
<span @click="getYearRegistered">全年</span>
<Date-picker
@on-change='changeDate($event)'
type="daterange"
......@@ -648,572 +648,8 @@
<script src="${rc.contextPath}/js/plugins/iview.js"></script>
<script src="${rc.contextPath}/js/plugins/echarts.min.js"></script>
<script src="${rc.contextPath}/js/plugins/TweenMax.min.js"></script>
<script>
let app= new Vue({
el:'#app',
data(){
return{
ForturnoverNumber:0,
PVNumber:0,
FrequencyOfPaymentNumber:0,
datePicker:{
shortcuts: [
{
text: '最近一周',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: '最近一个月',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
return [start, end];
}
},
{
text: '最近三十天',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: '最近一年',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
return [start, end];
}
}
]
},
middleOption:[
{
isActive:true,
title:'注册量'
},
{
isActive:false,
title:'访问量'
},
{
isActive:false,
title:'订单量'
},
{
isActive:false,
title:'成交量'
}
],
bottomOption:[
{
isActive:true,
title:'热门搜索'
},
{
isActive:false,
title:'热门商品'
},
],
initEchartsPVData:[ //柱状图数据
{
type: 'line',
smooth:0.5,
symbol: 'none',
lineStyle: {
color: '#975FE4',
width: 0
},
areaStyle: {
normal: {
color: '#975FE4' //改变区域颜色
}
},
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 650],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsPayTheAmountData:[ //柱状图数据
{
name: '支付笔数',
type: 'bar',
barWidth: '60%',
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 650],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsMiddleData:[ //中间柱状图数据
{
name: '支付笔数',
type: 'bar',
barWidth: '60%',
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 550],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsMiddlebottomUserSearchSumData:[ //用户搜索数据
{
type: 'line',
smooth:0.5,
symbol: 'none',
lineStyle: {
color: '#32ABFB',
width: 2
},
areaStyle: {
normal: {
color: '#CCEAFE' //改变区域颜色
}
},
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 650],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsMiddlebottomUserSearchPerCapitaData:[ //用户搜索人均数据
{
type: 'line',
smooth:0.5,
symbol: 'none',
lineStyle: {
color: '#95E1E9',
width: 2
},
areaStyle: {
normal: {
color: '#DFF6F8' //改变区域颜色
}
},
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 650],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsCategoryData:[
{
name: '分类',
type: 'pie',
center:['30%','50%'],
radius: ['65%', '90%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '18',
fontWeight: 'bold'
}
},
itemStyle:{
borderWidth:4,
borderColor:'white'
},
labelLine: {
show: false
},
data: [
{value: 335, name: 'MEN',price:123,itemStyle:{color: '#3AA0FF'}},
{value: 310, name: 'WOMEN',price:123,itemStyle:{color: '#975FE4'}},
{value: 234, name: 'Afri Home',price:123,itemStyle:{color: '#F2637B'}},
{value: 135, name: 'Hair',price:123,itemStyle:{color: '#4DCB73'}},
{value: 1548, name: 'Sport',price:123,itemStyle:{color: '#36CBCB'}}
]
}
]
}
},
computed:{
animatedNumberForturnover(){
return this.ForturnoverNumber.toFixed(0);
},
animatedNumberPV(){
return this.PVNumber.toFixed(0);
},
animatedNumberFrequencyOfPayment(){
return this.FrequencyOfPaymentNumber.toFixed(0);
}
},
methods:{
/* 访问量 */
initEchartsPV(){
var app = echarts.init(document.getElementById('echartsPV'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:10,
borderWidth:1
},
series: [...this.initEchartsPVData]
};
app.setOption(option);
},
/* 支付笔数 */
initEchartsPayTheAmount(){
var app = echarts.init(document.getElementById('echartsPayTheAmount'));
option = {
color: ['#3BA1FF'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
show:false
},
],
yAxis: [
{
type: 'value',
show:false
}
],
grid:{
x:0,
y:0,
x2:0,
y2:10,
borderWidth:1
},
series: [...this.initEchartsPayTheAmountData]
};
app.setOption(option);
},
initEchartsMiddle(){
var app = echarts.init(document.getElementById('middleEcharts-in'));
option = {
color: ['#3BA1FF'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
show:true
},
],
yAxis: [
{
type: 'value',
show:true,
axisTick: {
show: true,
},
splitLine :{ //网格线
lineStyle:{
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
},
}
],
grid:{
x:40,
y:40,
x2:40,
y2:40,
borderWidth:1
},
series: [...this.initEchartsMiddleData]
};
app.setOption(option);
},
/* 搜索用户数 */
initEchartsMiddlebottomUserSearchSum(){
var app = echarts.init(document.getElementById('bottom-echats-user-search-sum'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
},
series: [...this.initEchartsMiddlebottomUserSearchSumData]
};
app.setOption(option);
},
/* 人均搜索次数 */
initEchartsMiddlebottomUserSearchPerCapita(){
var app = echarts.init(document.getElementById('bottom-echats-user-search-per-capita'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
},
series: [...this.initEchartsMiddlebottomUserSearchPerCapitaData]
};
app.setOption(option);
},
initEchartsCategory(){
var app = echarts.init(document.getElementById('category-echarts'));
let _this = this;
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'right',
top:'center',
icon:"circle",
data: ['MEN', 'WOMEN', 'Afri Home', 'Hair', 'Sport'],
align:'left',
textStyle:{
rich:{
a:{
width:60,
fontSize:14,
color:"rgba(0, 0, 0, 0.647058823529412)",
padding:10,
},
b:{
width:40,
<script src="${rc.contextPath}/js/sys/main.js?_${date.systemTime}"></script>
fontSize:14,
color:"rgba(0, 0, 0, 0.3)"
},
c:{
width:40,
fontSize:14,
color:"#333"
}
}
},
formatter:function(name){
var data = _this.initEchartsCategoryData[0].data;
var total = 0;
var tarValue;
var price;
for (var i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
price = data[i].price;
}
var p = Math.round(((tarValue / total) * 100)).toFixed(2);
let arr=["{a|"+name.slice(0,4)+"..}{b|"+p+"%} {c|￥"+price+"}"]
return arr;
},
// show:false
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
},
series: [...this.initEchartsCategoryData]
};
app.setOption(option);
},
changeMiddelActive(element,index){
this.middleOption.forEach(item=>{
item.isActive = false;
})
this.middleOption[index].isActive = true;
this.$refs.middleEachrtsTitle.innerText = element.title+'趋势';
this.initEchartsMiddleData[0].data.push(['2019-10-1'+Math.round(Math.random()*100), Math.round(Math.random()*1000)])
this.initEchartsMiddle();
},
changeBottomSelect(element,index){
this.bottomOption.forEach(item=>{
item.isActive = false;
})
this.bottomOption[index].isActive = true;
if(element.title==='热门搜索'){
this.$refs.userSearchSum.innerText='搜索用户数'
this.$refs.userSearchPerCapita.innerText='人均搜索次数'
}else{
this.$refs.userSearchSum.innerText='下单用户数'
this.$refs.userSearchPerCapita.innerText='人均流量次数'
}
},
/* 中间模块日期 */
changeDate(e){
console.log(e)
}
},
created(){
},
mounted(){
this.initEchartsPV();
this.initEchartsPayTheAmount();
this.initEchartsMiddle();
this.initEchartsMiddlebottomUserSearchSum();
this.initEchartsMiddlebottomUserSearchPerCapita();
this.initEchartsCategory();
TweenLite.to(this.$data, 1, { ForturnoverNumber: 1445 });
TweenLite.to(this.$data, 1, { PVNumber: 2340 });
TweenLite.to(this.$data, 1, { FrequencyOfPaymentNumber: 2344 });
}
})
</script>
</html>
\ No newline at end of file
platform-admin/src/main/webapp/js/sys/main.js
浏览文件 @ c2594372
let app= new Vue({
el:'#app',
data(){
return{
ForturnoverNumber:0,
PVNumber:0,
FrequencyOfPaymentNumber:0,
datePicker:{
let app = new Vue({
el: '#app',
data() {
return {
ForturnoverNumber: 0,
PVNumber: 0,
FrequencyOfPaymentNumber: 0,
datePicker: {
shortcuts: [
{
text: '最近一周',
value () {
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
......@@ -20,7 +18,7 @@ let app= new Vue({
},
{
text: '最近一个月',
value () {
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
......@@ -29,7 +27,7 @@ let app= new Vue({
},
{
text: '最近三十天',
value () {
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
......@@ -38,7 +36,7 @@ let app= new Vue({
},
{
text: '最近一年',
value () {
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
......@@ -47,38 +45,38 @@ let app= new Vue({
}
]
},
middleOption:[
middleOption: [
{
isActive:true,
title:'注册量'
isActive: true,
title: '注册量'
},
{
isActive:false,
title:'访问量'
isActive: false,
title: '访问量'
},
{
isActive:false,
title:'订单量'
isActive: false,
title: '订单量'
},
{
isActive:false,
title:'成交量'
isActive: false,
title: '成交量'
}
],
bottomOption:[
bottomOption: [
{
isActive:true,
title:'热门搜索'
isActive: true,
title: '热门搜索'
},
{
isActive:false,
title:'热门商品'
isActive: false,
title: '热门商品'
},
],
initEchartsPVData:[ //柱状图数据
initEchartsPVData: [ //柱状图数据
{
type: 'line',
smooth:0.5,
smooth: 0.5,
symbol: 'none',
lineStyle: {
color: '#975FE4',
......@@ -107,7 +105,7 @@ let app= new Vue({
]
}
],
initEchartsPayTheAmountData:[ //柱状图数据
initEchartsPayTheAmountData: [ //柱状图数据
{
name: '支付笔数',
type: 'bar',
......@@ -130,33 +128,18 @@ let app= new Vue({
]
}
],
initEchartsMiddleData:[ //中间柱状图数据
initEchartsMiddleData: [ //中间柱状图数据
{
name: '支付笔数',
name: '注册量',
type: 'bar',
barWidth: '60%',
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 550],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
data: []
}
],
initEchartsMiddlebottomUserSearchSumData:[ //用户搜索数据
initEchartsMiddlebottomUserSearchSumData: [ //用户搜索数据
{
type: 'line',
smooth:0.5,
smooth: 0.5,
symbol: 'none',
lineStyle: {
color: '#32ABFB',
......@@ -185,10 +168,10 @@ let app= new Vue({
]
}
],
initEchartsMiddlebottomUserSearchPerCapitaData:[ //用户搜索人均数据
initEchartsMiddlebottomUserSearchPerCapitaData: [ //用户搜索人均数据
{
type: 'line',
smooth:0.5,
smooth: 0.5,
symbol: 'none',
lineStyle: {
color: '#95E1E9',
......@@ -217,11 +200,11 @@ let app= new Vue({
]
}
],
initEchartsCategoryData:[
initEchartsCategoryData: [
{
name: '分类',
type: 'pie',
center:['30%','50%'],
center: ['30%', '50%'],
radius: ['65%', '90%'],
avoidLabelOverlap: false,
label: {
......@@ -235,50 +218,76 @@ let app= new Vue({
fontWeight: 'bold'
}
},
itemStyle:{
borderWidth:4,
borderColor:'white'
itemStyle: {
borderWidth: 4,
borderColor: 'white'
},
labelLine: {
show: false
},
data: [
{value: 335, name: 'MEN',price:123,itemStyle:{color: '#3AA0FF'}},
{value: 310, name: 'WOMEN',price:123,itemStyle:{color: '#975FE4'}},
{value: 234, name: 'Afri Home',price:123,itemStyle:{color: '#F2637B'}},
{value: 135, name: 'Hair',price:123,itemStyle:{color: '#4DCB73'}},
{value: 1548, name: 'Sport',price:123,itemStyle:{color: '#36CBCB'}}
{value: 335, name: 'MEN', price: 123, itemStyle: {color: '#3AA0FF'}},
{value: 310, name: 'WOMEN', price: 123, itemStyle: {color: '#975FE4'}},
{value: 234, name: 'Afri Home', price: 123, itemStyle: {color: '#F2637B'}},
{value: 135, name: 'Hair', price: 123, itemStyle: {color: '#4DCB73'}},
{value: 1548, name: 'Sport', price: 123, itemStyle: {color: '#36CBCB'}}
]
}
]
}
},
computed:{
animatedNumberForturnover(){
computed: {
animatedNumberForturnover() {
return this.ForturnoverNumber.toFixed(0);
},
animatedNumberPV(){
animatedNumberPV() {
return this.PVNumber.toFixed(0);
},
animatedNumberFrequencyOfPayment(){
animatedNumberFrequencyOfPayment() {
return this.FrequencyOfPaymentNumber.toFixed(0);
}
},
methods:{
methods: {
templateMethod(url) {
$.get(url, res => {
this.initEchartsMiddleData[0].data = []
let objList = JSON.parse(res).list
objList.map(res => {
this.initEchartsMiddleData[0].data.push([res.date, res.num])
})
this.initEchartsMiddle();
})
},
getDayRegistered() {
let url = '../tbcfuserinfo/getDayRegistered'
this.templateMethod(url);
},
getWeekRegistered() {
let url = '../tbcfuserinfo/getWeekRegistered'
this.templateMethod(url);
},
getMonthRegistered() {
let url = '../tbcfuserinfo/getMonthRegistered'
this.templateMethod(url);
},
getYearRegistered() {
let url = '../tbcfuserinfo/getYearRegistered'
this.templateMethod(url);
},
/* 访问量 */
initEchartsPV(){
initEchartsPV() {
var app = echarts.init(document.getElementById('echartsPV'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
show: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
splitLine: {show: false},
show: false
},
tooltip: {
trigger: 'axis',
......@@ -286,19 +295,19 @@ let app= new Vue({
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:10,
borderWidth:1
grid: {
x: 0,
y: 0,
x2: 0,
y2: 10,
borderWidth: 1
},
series: [...this.initEchartsPVData]
};
app.setOption(option);
},
/* 支付笔数 */
initEchartsPayTheAmount(){
initEchartsPayTheAmount() {
var app = echarts.init(document.getElementById('echartsPayTheAmount'));
option = {
color: ['#3BA1FF'],
......@@ -320,27 +329,27 @@ let app= new Vue({
axisTick: {
alignWithLabel: true
},
show:false
show: false
},
],
yAxis: [
{
type: 'value',
show:false
show: false
}
],
grid:{
x:0,
y:0,
x2:0,
y2:10,
borderWidth:1
grid: {
x: 0,
y: 0,
x2: 0,
y2: 10,
borderWidth: 1
},
series: [...this.initEchartsPayTheAmountData]
};
app.setOption(option);
},
initEchartsMiddle(){
initEchartsMiddle() {
var app = echarts.init(document.getElementById('middleEcharts-in'));
option = {
color: ['#3BA1FF'],
......@@ -363,49 +372,49 @@ let app= new Vue({
alignWithLabel: true
},
show:true
show: true
},
],
yAxis: [
{
type: 'value',
show:true,
show: true,
axisTick: {
show: true,
},
splitLine :{ //网格线
lineStyle:{
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
show: true //隐藏或显示
},
}
],
grid:{
x:40,
y:40,
x2:40,
y2:40,
borderWidth:1
grid: {
x: 40,
y: 40,
x2: 40,
y2: 40,
borderWidth: 1
},
series: [...this.initEchartsMiddleData]
};
app.setOption(option);
},
/* 搜索用户数 */
initEchartsMiddlebottomUserSearchSum(){
initEchartsMiddlebottomUserSearchSum() {
var app = echarts.init(document.getElementById('bottom-echats-user-search-sum'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
show: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
splitLine: {show: false},
show: false
},
tooltip: {
trigger: 'axis',
......@@ -413,31 +422,31 @@ let app= new Vue({
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0,
borderWidth: 1
},
series: [...this.initEchartsMiddlebottomUserSearchSumData]
};
app.setOption(option);
},
/* 人均搜索次数 */
initEchartsMiddlebottomUserSearchPerCapita(){
initEchartsMiddlebottomUserSearchPerCapita() {
var app = echarts.init(document.getElementById('bottom-echats-user-search-per-capita'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
show: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
splitLine: {show: false},
show: false
},
tooltip: {
trigger: 'axis',
......@@ -445,18 +454,18 @@ let app= new Vue({
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0,
borderWidth: 1
},
series: [...this.initEchartsMiddlebottomUserSearchPerCapitaData]
};
app.setOption(option);
},
initEchartsCategory(){
initEchartsCategory() {
var app = echarts.init(document.getElementById('category-echarts'));
let _this = this;
option = {
......@@ -468,33 +477,33 @@ let app= new Vue({
legend: {
orient: 'vertical',
left: 'right',
top:'center',
icon:"circle",
top: 'center',
icon: "circle",
data: ['MEN', 'WOMEN', 'Afri Home', 'Hair', 'Sport'],
align:'left',
textStyle:{
rich:{
a:{
width:60,
fontSize:14,
color:"rgba(0, 0, 0, 0.647058823529412)",
padding:10,
align: 'left',
textStyle: {
rich: {
a: {
width: 60,
fontSize: 14,
color: "rgba(0, 0, 0, 0.647058823529412)",
padding: 10,
},
b:{
width:40,
b: {
width: 40,
fontSize:14,
color:"rgba(0, 0, 0, 0.3)"
fontSize: 14,
color: "rgba(0, 0, 0, 0.3)"
},
c:{
width:40,
fontSize:14,
color:"#333"
c: {
width: 40,
fontSize: 14,
color: "#333"
}
}
},
formatter:function(name){
formatter: function (name) {
var data = _this.initEchartsCategoryData[0].data;
var total = 0;
var tarValue;
......@@ -507,61 +516,75 @@ let app= new Vue({
price = data[i].price;
}
var p = Math.round(((tarValue / total) * 100)).toFixed(2);
let arr=["{a|"+name.slice(0,4)+"..}{b|"+p+"%} {c|￥"+price+"}"]
let arr = ["{a|" + name.slice(0, 4) + "..}{b|" + p + "%} {c|￥" + price + "}"]
return arr;
},
// show:false
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0,
borderWidth: 1
},
series: [...this.initEchartsCategoryData]
};
app.setOption(option);
},
changeMiddelActive(element,index){
this.middleOption.forEach(item=>{
changeMiddelActive(element, index) {
this.middleOption.forEach(item => {
item.isActive = false;
})
this.middleOption[index].isActive = true;
this.$refs.middleEachrtsTitle.innerText = element.title+'趋势';
this.initEchartsMiddleData[0].data.push(['2019-10-1'+Math.round(Math.random()*100), Math.round(Math.random()*1000)])
this.$refs.middleEachrtsTitle.innerText = element.title + '趋势';
// this.initEchartsMiddleData[0].data.push(['2019-10-1'+Math.round(Math.random()*100), Math.round(Math.random()*1000)])
$.get('../tbcfuserinfo/getDailyRegistered', res => {
this.initEchartsMiddleData.data = []
let objList = JSON.parse(res).list
objList.map(res => {
this.initEchartsMiddleData[0].data.push([res.date, res.num])
})
this.initEchartsMiddle();
})
},
changeBottomSelect(element,index){
this.bottomOption.forEach(item=>{
changeBottomSelect(element, index) {
this.bottomOption.forEach(item => {
item.isActive = false;
})
this.bottomOption[index].isActive = true;
if(element.title==='热门搜索'){
this.$refs.userSearchSum.innerText='搜索用户数'
this.$refs.userSearchPerCapita.innerText='人均搜索次数'
}else{
this.$refs.userSearchSum.innerText='下单用户数'
this.$refs.userSearchPerCapita.innerText='人均流量次数'
if (element.title === '热门搜索') {
this.$refs.userSearchSum.innerText = '搜索用户数'
this.$refs.userSearchPerCapita.innerText = '人均搜索次数'
} else {
this.$refs.userSearchSum.innerText = '下单用户数'
this.$refs.userSearchPerCapita.innerText = '人均流量次数'
}
},
/* 中间模块日期 */
changeDate(e){
console.log(e)
changeDate(e) {
if (this.middleOption[0].isActive) {
let url = '../tbcfuserinfo/getRegisteredByDate?start=' + e[0] + '&end=' + e[1];
this.templateMethod(url);
}
}
},
created(){
created() {
},
mounted(){
mounted() {
this.initEchartsPV();
this.initEchartsPayTheAmount();
this.initEchartsMiddle();
this.initEchartsMiddlebottomUserSearchSum();
this.initEchartsMiddlebottomUserSearchPerCapita();
this.initEchartsCategory();
TweenLite.to(this.$data, 1, { ForturnoverNumber: 1445 });
TweenLite.to(this.$data, 1, { PVNumber: 2340 });
TweenLite.to(this.$data, 1, { FrequencyOfPaymentNumber: 2344 });
TweenLite.to(this.$data, 1, {ForturnoverNumber: 2649});
TweenLite.to(this.$data, 1, {PVNumber: 23404232});
TweenLite.to(this.$data, 1, {FrequencyOfPaymentNumber: 23440});
this.changeMiddelActive({
isActive: true,
title: '注册量'
}, 0);
}
})
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论