318 lines
7.2 KiB
Vue
318 lines
7.2 KiB
Vue
<template>
|
|
<view class="customer-content" v-show="show">
|
|
<div class="" v-show="!loading && pageEmpty">
|
|
<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'"/>
|
|
</div>
|
|
<div v-show="!loading && !pageEmpty">
|
|
<div class="tab-btn" @tap="tabChange(canvasTab==1?2:1,opt)">{{canvasTab==1 ? '消费能力分析' : '消费人群分析'}}</div>
|
|
<div class="customer-title">{{canvasTab==1? '消费人群': '消费能力'}}占比</div>
|
|
<canvas canvas-id="sexCate" id="sexCate" class="operation-cate-content" @touchend="tap"></canvas>
|
|
<div class="customer-title">年龄层占比</div>
|
|
<canvas canvas-id="stockShare1" id="stockShare1" class="operation-stock-content" v-show="canvasTab==1" @touchend="tap"></canvas>
|
|
<canvas canvas-id="stockShare2" id="stockShare2" class="operation-stock-content" v-show="canvasTab==2" @touchend="tap"></canvas>
|
|
<div class="analysis-text" v-if="proportionList[canvasTab]">
|
|
<span class="key-text">分析</span><span>{{proportionList[canvasTab][1]}}</span>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uCharts from '@/components/u-charts.js';
|
|
let rincanvas = {}
|
|
|
|
export default {
|
|
props: {
|
|
pieId: String,
|
|
barId: String,
|
|
show: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
tab: [
|
|
{id:1,name:'消费人群分析'},
|
|
{id:2,name:'消费能力分析'},
|
|
],
|
|
canvasTab: 1,
|
|
proportionList: {
|
|
1: [],
|
|
2: []
|
|
},
|
|
opt: null,
|
|
pageEmpty: false,
|
|
loading: true
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
refreshData(data) {
|
|
// 刷新数据
|
|
rincanvas['sexCate'].updateData({series:data[0]});
|
|
this.$forceUpdate()
|
|
},
|
|
tabChange(name,opt) {
|
|
this.canvasTab= name
|
|
|
|
if (this.proportionList[name].length == 0) {
|
|
|
|
this.getProportion(name, opt)
|
|
} else {
|
|
|
|
this.refreshData(this.proportionList[name])
|
|
}
|
|
},
|
|
async getProportion(type, params) {
|
|
let _this = this
|
|
_this.opt = params
|
|
const data = await this.$request.$webGet('Customer/GetCustomerRatio', {
|
|
statisticsType: type,
|
|
...params
|
|
})
|
|
_this.loading = false
|
|
if (data.Result_Code === 100 && data.Result_Data.List.length > 0) {
|
|
|
|
const list = data.Result_Data.List
|
|
|
|
let pieSerise = [{
|
|
name: list[0].name,
|
|
data: list[0].data[0],
|
|
formatter: function(arg) {
|
|
|
|
if (typeof arg === 'number') {
|
|
return [list[0].name, (arg * 100).toFixed(2) + '%']
|
|
} else {
|
|
return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
|
|
}
|
|
// return [list[0].name, (arg * 100).toFixed(2) + '%']
|
|
}
|
|
},
|
|
{
|
|
name: list[1].name,
|
|
data: list[1].data[0],
|
|
formatter: function(arg) {
|
|
if (typeof arg === 'number') {
|
|
return [list[1].name, (arg * 100).toFixed(2) + '%']
|
|
} else {
|
|
return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
|
|
}
|
|
|
|
}
|
|
}
|
|
]
|
|
let clounm = [{
|
|
name: list[2].name,
|
|
data: ([]).concat(list[2].data),
|
|
formatter: function(arg) {
|
|
return [ arg + '%']
|
|
}
|
|
}]
|
|
|
|
_this.proportionList[type] = [
|
|
pieSerise, await _this.getAnalysisDesc(type,params)
|
|
]
|
|
|
|
_this.showPie({
|
|
id: 'sexCate',
|
|
data: pieSerise
|
|
})
|
|
_this.showClounm({
|
|
id: 'stockShare'+type,
|
|
data: clounm,
|
|
categories: ['00后', '90后', '80后', '70后'],
|
|
})
|
|
|
|
|
|
this.$forceUpdate()
|
|
|
|
} else {
|
|
this.pageEmpty = true
|
|
}
|
|
},
|
|
async getAnalysisDesc(analysisType, params) {
|
|
let _this = this
|
|
|
|
const data = await this.$request.$webGet('Customer/GetAnalysisDescDetail', {
|
|
statisticsType: analysisType,
|
|
...params
|
|
})
|
|
|
|
return data.Result_Data.Analysis_Content || ''
|
|
},
|
|
tap(e) {
|
|
rincanvas[e.target.id].touchLegend(e);
|
|
rincanvas[e.target.id].showToolTip(e);
|
|
},
|
|
showPie(obj) {
|
|
let data = {
|
|
series: []
|
|
}
|
|
const ctx = uni.createCanvasContext(obj.id, this);
|
|
data.series = data.series.concat(obj.data)
|
|
rincanvas[obj.id] = new uCharts({
|
|
// $this: this,
|
|
// canvasId: obj.id,
|
|
context: ctx,
|
|
color: ['#667ED5', '#F6B760'],
|
|
type: 'ring',
|
|
fontSize: 12,
|
|
// padding: [15, 15, 25, 15],
|
|
legend: {
|
|
show: false,
|
|
padding: 5,
|
|
lineHeight: 11,
|
|
margin: 0,
|
|
},
|
|
background: '#FFFFFF',
|
|
pixelRatio: 1,
|
|
series: obj.data,
|
|
animation: false,
|
|
width: uni.upx2px(666),
|
|
height: uni.upx2px(480),
|
|
dataLabel: true,
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 40,
|
|
labelWidth: 20,
|
|
border: true,
|
|
borderWidth: 1,
|
|
color: '#777',
|
|
borderColor: '#fff'
|
|
}
|
|
},
|
|
});
|
|
|
|
},
|
|
showClounm(obj) {
|
|
|
|
let data = {
|
|
series: []
|
|
}
|
|
const ctx = uni.createCanvasContext(obj.id, this);
|
|
data.series = data.series.concat(obj.data)
|
|
rincanvas[obj.id] = new uCharts({
|
|
// $this: this,
|
|
// canvasId: obj.id,
|
|
context: ctx,
|
|
type: 'column',
|
|
legend: {
|
|
show: false
|
|
},
|
|
color: ['#78BFB4'],
|
|
fontSize: 12,
|
|
background: '#FFFFFF',
|
|
padding: [30, 12, 12, 12],
|
|
animation: true,
|
|
categories: obj.categories,
|
|
series: data.series,
|
|
enableScroll: false, //开启图表拖拽功能
|
|
xAxis: {
|
|
disabled: false,
|
|
disableGrid: true,
|
|
axisLine: false,
|
|
fontColor: '#777777',
|
|
labelCount: 5,
|
|
|
|
},
|
|
yAxis: {
|
|
data: [{
|
|
disabled: false,
|
|
axisLine: false,
|
|
fontColor: '#777777',
|
|
formatter: (val) => {
|
|
return parseInt(val) + '%'
|
|
}
|
|
}],
|
|
|
|
gridType: 'dash',
|
|
gridColor: '#eee',
|
|
dashLength: 2,
|
|
splitNumber: 3,
|
|
},
|
|
dataLabel: true,
|
|
width: uni.upx2px(686),
|
|
height: uni.upx2px(420),
|
|
extra: {
|
|
column: {
|
|
type: 'group',
|
|
width: uni.upx2px(50)
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.customer-content {
|
|
margin: 0 30rpx;
|
|
border-radius: 8rpx;
|
|
box-shadow: 0 2rpx 10rpx 0 rgba(230, 230, 230, 0.49);
|
|
background-color: #fff;
|
|
position: relative;
|
|
margin-bottom: 48rpx;
|
|
padding-bottom: 50rpx;
|
|
}
|
|
|
|
.customer-title {
|
|
padding: 0 20rpx;
|
|
line-height: 80rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.operation-cate-content {
|
|
height: 480rpx;
|
|
width: 690rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.operation-stock-content {
|
|
height: 440rpx;
|
|
width: 690rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.tab-btn {
|
|
position: absolute;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
width: 241rpx;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: url(../../../static/images/revenue/tab-bg.png) no-repeat right;
|
|
background-size: contain;
|
|
}
|
|
.tab-btn::before {
|
|
content: '';
|
|
background: url(../../../static/images/revenue/next.png) no-repeat center;
|
|
background-size: contain;
|
|
width: 40rpx;
|
|
height: 16rpx;
|
|
}
|
|
.analysis-text {
|
|
color: #9498A4;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
font-size: 24rpx;
|
|
margin: 0 30rpx 0 30rpx;
|
|
}
|
|
|
|
.key-text {
|
|
min-width: 50rpx;
|
|
background: #EA7F56;
|
|
font-size: 22rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
background: #ea7f56;
|
|
border-radius: 5rpx;
|
|
margin-right: 16rpx;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
</style>
|