|
|
@@ -73,19 +73,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="middle adfacjb">
|
|
|
- <div class="box box2 adffc">
|
|
|
- <div class="date adfac">
|
|
|
- <div class="date-pre" :class="{'active':didx==1}" @click="changeDate(1)">本周</div>
|
|
|
- <div class="date-pre" :class="{'active':didx==2}" @click="changeDate(2)">本月</div>
|
|
|
- <el-select v-model="queryDate" placeholder="自定义时间" @change="changeCusDate" style="width: 167px;">
|
|
|
- <el-option label="近10天" value="10"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="box-title">用户概览</div>
|
|
|
- <div class="box-echart">
|
|
|
- <div ref="yhglRef" style="width: 100%; height: 100%;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<div class="box box1 adffc">
|
|
|
<div class="box-title">用户注册渠道</div>
|
|
|
<div class="box-echart adfac">
|
|
|
@@ -103,80 +90,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="middle adfacjb">
|
|
|
- <div class="box box2 adffc">
|
|
|
- <div class="box-title">用户画像</div>
|
|
|
- <div class="box-echart adfacjb">
|
|
|
- <div class="box-echart-half adffc">
|
|
|
- <div class="box-echart-half-title">性别比例</div>
|
|
|
- <div class="box-echart-half-tb">
|
|
|
- <div ref="yhhxRef" style="width: 100%; height: 100%;"></div>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-num adf">
|
|
|
- <div class="box-echart-half-num-pre adfacjc">
|
|
|
- <img src="@/assets/images/agent/user_sex_nan.png" alt="">
|
|
|
- <div class="box-echart-half-num-pre-info">
|
|
|
- <p>男性</p>
|
|
|
- <p class="num"><span>{{ 14589 }}</span>人</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-num-pre adfacjc">
|
|
|
- <img src="@/assets/images/agent/user_sex_nv.png" alt="">
|
|
|
- <div class="box-echart-half-num-pre-info">
|
|
|
- <p>女性</p>
|
|
|
- <p class="num"><span>{{ 10000 }}</span>人</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half">
|
|
|
- <div class="box-echart-half-title">年龄分布</div>
|
|
|
- <div class="box-echart-half-boxs adfacjb">
|
|
|
- <div class="box-echart-half-boxs-box adfacjb">
|
|
|
- <div class="box-echart-half-boxs-box-l">
|
|
|
- <p class="p1">{{ '22-28岁' }}</p>
|
|
|
- <p class="p2">占比</p>
|
|
|
- <p class="p3">{{ 38 }}%</p>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-boxs-box-r">
|
|
|
- <div :ref="'nlfbRef'+1" style="width: 100%; height: 100%;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-boxs-box adfacjb">
|
|
|
- <div class="box-echart-half-boxs-box-l">
|
|
|
- <p class="p1">{{ '28-40岁' }}</p>
|
|
|
- <p class="p2">占比</p>
|
|
|
- <p class="p3">{{ 52 }}%</p>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-boxs-box-r">
|
|
|
- <div :ref="'nlfbRef'+2" style="width: 100%; height: 100%;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-boxs-box adfacjb">
|
|
|
- <div class="box-echart-half-boxs-box-l">
|
|
|
- <p class="p1">{{ '40-50岁' }}</p>
|
|
|
- <p class="p2">占比</p>
|
|
|
- <p class="p3">{{ 7 }}%</p>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-boxs-box-r">
|
|
|
- <div :ref="'nlfbRef'+3" style="width: 100%; height: 100%;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-boxs-box adfacjb">
|
|
|
- <div class="box-echart-half-boxs-box-l">
|
|
|
- <p class="p1">{{ '50-60岁' }}</p>
|
|
|
- <p class="p2">占比</p>
|
|
|
- <p class="p3">{{ 3 }}%</p>
|
|
|
- </div>
|
|
|
- <div class="box-echart-half-boxs-box-r">
|
|
|
- <div :ref="'nlfbRef'+4" style="width: 100%; height: 100%;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<div class="box box1 adffc">
|
|
|
<div class="box-title">行业分布</div>
|
|
|
<div class="box-echart">
|
|
|
@@ -192,6 +105,21 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="middle adfacjb">
|
|
|
+ <div class="box box2 adffc">
|
|
|
+ <div class="date adfac">
|
|
|
+ <div class="date-pre" :class="{'active':didx==1}" @click="changeDate(1)">本周</div>
|
|
|
+ <div class="date-pre" :class="{'active':didx==2}" @click="changeDate(2)">本月</div>
|
|
|
+ <el-select v-model="queryDate" placeholder="自定义时间" @change="changeCusDate" style="width: 167px;">
|
|
|
+ <el-option label="近10天" value="10"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="box-title">用户概览</div>
|
|
|
+ <div class="box-echart">
|
|
|
+ <div ref="yhglRef" style="width: 100%; height: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -391,7 +319,7 @@
|
|
|
title: {
|
|
|
show: true,
|
|
|
text: '{a|'+sum+'}\n{b|注册总数}',
|
|
|
- x: '34%',
|
|
|
+ x: '38%',
|
|
|
y: '46%',
|
|
|
textStyle: {
|
|
|
rich: {
|
|
|
@@ -417,7 +345,7 @@
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
startAngle: 90,
|
|
|
- radius: ['50%', '90%'],
|
|
|
+ radius: ['55%', '90%'],
|
|
|
center: ['50%', '53%'],
|
|
|
hoverAnimation: false,
|
|
|
roseType: 'radius',
|
|
|
@@ -528,10 +456,10 @@
|
|
|
height: 420px;
|
|
|
position: relative;
|
|
|
&.box1{
|
|
|
- width: calc(100% / 5 * 2 - 6px);
|
|
|
+ width: calc(50% - 6px);
|
|
|
}
|
|
|
&.box2{
|
|
|
- width: calc(100% / 5 * 3 - 6px);
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -644,9 +572,8 @@
|
|
|
}
|
|
|
|
|
|
&-qd{
|
|
|
- width: 290px;
|
|
|
+ width: 380px;
|
|
|
height: 100%;
|
|
|
-
|
|
|
}
|
|
|
&-type{
|
|
|
flex: 1;
|