fe / yohobuy-shop-fe2 · Commits

Go to a project

Authored by dongjunjie
Commit fcb8da9e3e535fd41d00a63b0edae9f1bcc6066d 1 parent 20c40386

报表会员画像

Inline Side-by-side
Showing 5 changed files with 107 additions and 115 deletions
<template>
<com-pageheader :title="'报表管理'" :sub-title="'会员画像'"></com-pageheader>
<uc-area></uc-area>
<uc-person></uc-person>
</template>
<script>
import pageheader from '../../../../components/pageheader/index';
import areaCharts from './areaCharts.vue';
import personCharts from './personCharts.vue';
export default {
components:{
comPageheader: pageheader,
ucArea: areaCharts,
ucPerson:personCharts
}
... ...
... ... @@ -7,7 +7,7 @@
</div>
<div class="row">
<div class="col-sm-6">
<div id="areaTop" style="width: 500px;height:400px"></div>
<div id="yohoTop" style="width: 500px;height:400px"></div>
</div>
<div class="col-sm-6">
<div id="shopTop" style="width: 500px;height:400px"></div>
... ... @@ -17,34 +17,37 @@
<script type="text/javascript">
var echarts = require('echarts');
import util from 'util';
module.exports = {
data:function() {
return {
name:"6666"
}
return {}
},
ready:function(){
var areaTop = echarts.init(document.getElementById('areaTop'));
var shopTop = echarts.init(document.getElementById('shopTop'));
var option = this.getXOption();
// 使用刚指定的配置项和数据显示图表。
areaTop.setOption(option);
shopTop.setOption(option);
var a = [{"agreementEndTime":1476979200,"brandId":1749,"brandName":"请勿动此品牌","brandNameCn":"请勿动此品牌","brandStatus":1,"id":626,"isFreeze":"N","method":"","status":1,"supplierId":1496,"supplierName":"请勿动此供应商","supplierStatus":300}]
var b = [{"agreementEndTime":1467216000,"brandId":1740,"brandName":"卡文","brandNameCn":"卡文","brandStatus":1,"id":611,"isFreeze":"N","method":"","status":1,"supplierId":1492,"supplierName":"卡文的供应商3：第二个JIT","supplierStatus":300}]
this.getData();
},
methods:{
getXOption(){
getData(){
this.$http.post("/chart/getShopTopArea", {
dateId: util.dateFormat(new Date(),"YYYYMMdd")
}).then(function (response) {
var data = response.data.data;
//全站销售地域
var yohoTop = echarts.init(document.getElementById('yohoTop'));
var yohoOption = this.getXOption(data.yoho.x, data.yoho.y, "全站销售地域top10：");
yohoTop.setOption(yohoOption);
//店铺销售地域
var shopTop = echarts.init(document.getElementById('shopTop'));
var shopOption = this.getXOption(data.shop.x, data.shop.y, "店铺销售地域top10：");
shopTop.setOption(shopOption);
});
},
getXOption(provinces, data, title){
var option = {
color:["#ff0000"],
title : {
show: true,
text: '全站销售地域 top10：',
subtext: 'From ExcelHome'
text: title
},
xAxis : [
{
... ... @@ -55,7 +58,7 @@
yAxis : [
{
type:'category',
data:['福建','澳门','香港','重庆','天津','北京','浙江','江苏','上海','广东'],
data:provinces,
axisLine:{
show:false
},
... ... @@ -71,16 +74,19 @@
{
name:'销量',
type:'bar',
data:[0.5, 1.5, 2.3, 3.4, 4.2, 6.7, 8.2, 14.6, 16.2, 18.7],
data:data,
itemStyle: {
normal: {
color: '#ccc',
color: '#999999',
label : {
show: true,
position: 'right',
textStyle:{
color:"#585858",
align:"right"
},
formatter:function (params) {
return params.value + '%';
}
}
}
... ... @@ -105,7 +111,7 @@
width: 100%;
padding: 0 20px;
height: 40px;
background-color: #ddd;
background-color: #ccc;
}
._chartTitle h3{
float: left;
... ...
... ... @@ -17,42 +17,53 @@
<script type="text/javascript">
var echarts = require('echarts');
import util from 'util';
module.exports = {
data:function() {
return {
name:"6666"
}
return {}
},
ready:function(){
//消费水平
var consumptionLevel = echarts.init(document.getElementById('consumptionLevel'));
var vipDistribute = echarts.init(document.getElementById('vipDistribute'));
var option = this.getYOption();
this.getData("/chart/getConsumeAna", "消费水平", "金额\n(元)", consumptionLevel);
// 使用刚指定的配置项和数据显示图表。
consumptionLevel.setOption(option);
vipDistribute.setOption(option);
//会员分布
var vipDistribute = echarts.init(document.getElementById('vipDistribute'));
this.getData("/chart/getUserAna", "会员分布", "", vipDistribute);
},
methods:{
getYOption(){
getData(url, title, xName, dom){
this.$http.post(url, {
dateId: util.dateFormat(new Date(),"YYYYMMdd")
}).then(function (response) {
var data = response.data.data;
var option = this.getYOption(data.yoho.x, data.yoho.y, data.shop.y, title, xName);
dom.setOption(option);
});
},
getYOption(xData, yYohoData, yShopData, title, xName){
var option = {
title : {
text: '消费水平',
subtext: '123'
show: true,
text: title
},
tooltip : {
trigger: 'axis'
show: true,
trigger: 'axis',
formatter: function (params){
return params.valueOf() + '%';
}
},
legend: {
data:['Vans旗舰店','YOHO！'],
data:['当前店铺','YOHO！'],
show:true
},
xAxis : [
{
type : 'category',
data : ['1000以上','600~1000','300~600','100~300','0~100'],
name:'金额\n(元)',
data : xData,
name: xName,
nameLocation:'start',
axisTick:{
show:false
... ... @@ -71,14 +82,19 @@
},
axisTick:{
show:false
},
axisLabel:{
formatter:function (params) {
return params + '%';
}
}
}
],
series : [
{
name:'Vans旗舰店',
name:'当前店铺',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6],
data:yShopData,
barGap:'0',
itemStyle: {
normal: {
... ... @@ -99,10 +115,10 @@
{
name:'YOHO！',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7],
data:yYohoData,
itemStyle: {
normal: {
color: '#999',
color: '#999999',
label : {
show: false,
position: 'top',
... ... @@ -118,76 +134,8 @@
}
]
};
var option1 = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
return option1;
console.log(option);
return option;
}
}
}
... ...
... ... @@ -41,5 +41,10 @@ module.exports=function(app) {
/*************************************会员画像*************************************/
app.vue("/report/charts", "report.Charts");
app.post("/chart/getShopTopArea", "report_getShopTopArea"); //地域分布
app.post("/chart/getConsumeAna", "report_getConsumeAna"); //消费水平
app.post("/chart/getUserAna", "report_getUserAna"); //会员分布
}
\ No newline at end of file
... ...
... ... @@ -122,8 +122,38 @@ module.exports={
middleSortId:{type: Number},
smallSortId:{type: Number}
}
}
},
/*************************************会员画像*************************************/
getShopTopArea:{
title:"地域分布",
domain:"{{bigdata}}",
url:"/chart/getShopTopArea",
params:{
shopId:{type: Number},
dateId:{type: Number}
}
},
getConsumeAna:{
title:"消费水平",
domain:"{{bigdata}}",
url:"/chart/getConsumeAna",
params:{
shopId:{type: Number},
dateId:{type: Number}
}
},
getUserAna:{
title:"会员分布",
domain:"{{bigdata}}",
url:"/chart/getUserAna",
params:{
shopId:{type: Number},
dateId:{type: Number}
}
}
}
}
\ No newline at end of file
... ...