用户画像

dev
wylyl22 3 years ago
parent e8c29aac32
commit d45c9ecc2a

@ -37,7 +37,7 @@
</view>
<view class="content_text">
<view class="total_text">{{item.text}}</view>
<view class="total_num">{{item.num}}</view>
<view class="total_num">{{item.num}}%</view>
</view>
</view>
</view>

@ -1,14 +1,51 @@
var dataList=[
{ value: 1650245, name: '女性' },
{ value: 1650245, name: '女性'},
{ value: 1650245, name: '未知' },
{ value: 3307418, name: '男性' },
]
Component({
data: {
dataList:[
{ value: 1650245, name: '女性' },
{ value: 1650245, name: '未知' },
{ value: 3307418, name: '男性' },
dataList:dataList,
regionList:[
{
district:'广东',
value:10
},
{
district:'河南',
value:10
},
{
district:'江苏',
value:10
},
{
district:'浙江',
value:10
},
{
district:'安徽',
value:10
},
{
district:'安徽',
value:10
},
{
district:'安徽',
value:10
},{
district:'安徽',
value:10
},
{
district:'安徽',
value:10
},{
district:'安徽',
value:10
},
],
showChart: true,
sexOption: {
@ -16,23 +53,23 @@ Component({
trigger: 'item'
},
// 注释字体样式
legend: {
// type: 'scroll',
orient: 'vertical',
top:16,
left:188,
itemWidth: 10,//data图标大小
itemHeight: 10,
itemGap: 50//图标之间间距
},
// legend: {
// orient: 'vertical',
// top:16,
// left:170,
// itemWidth: 10,//data图标大小
// itemHeight: 10,
// itemGap: 50//图标之间间距
// },
// 环形统计图样式
series: [
{
// bottom:68,
right:30,
right:32,
name: 'Access From',
type: 'pie',
radius: ['90', '55'],
radius: ['76', '40'],
avoidLabelOverlap: false,
itemStyle: {
// borderRadius: 10,
@ -42,7 +79,7 @@ Component({
// 点击弹出提示位置
label: {
show: false,
position: 'center'
position: 'center'
},
//点击弹出提示样式
// emphasis: {
@ -65,12 +102,14 @@ Component({
},
onShow() {
this.getTabBar().init();
},
methods: {
priceSel(e){
this.setData({
intervalSel: e.currentTarget.dataset.index
intervalSel: e.currentTarget.dataset.index,
})
}

@ -7,30 +7,56 @@
<view class="annotation">
<c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{sexOption}}" height="100%"></c-echars>
</view>
<view>
<view wx:for="{{dataList}}" wx:key="item" style="display: flex; justify-content:space-between;">
<!-- <view class="box">
<view class="img"></view>
<view class="answer">{{item.value}}</view>
</view> -->
<view class="box">
<view class="topic">数量</view>
<view class="answer">{{item.value}}</view>
</view>
<view class="box">
<view class="topic">占比</view>
<view class="answer">32%</view>
</view>
</view>
</view>
</view>
</view>
<view class="allnumber" wx:for="{{ dataList}}" wx:key="item">
</view>
<view class="brand">
<view class="text">认证</view>
<view class="statistical">
<view class="annotation">
<c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{sexOption}}" height="100%"></c-echars>
</view>
<view>
<view wx:for="{{dataList}}" wx:key="item" style="display: flex; justify-content:space-between;">
<view class="box">
<view class="topic">数量</view>
<view class="answer">{{item.value}}</view>
</view>
<view class="box">
<view class="topic">占比</view>
<view class="answer">{{item.value}}</view>
<view class="answer">32%</view>
</view>
</view>
</view>
</view>
</view>
<view class="brand">
<view class="text">认证</view>
</view>
<view class="brand">
<view class="text">地区</view>
<view class="total">
<view wx:for="{{regionList}}" wx:key="item" class="total_content">
<view class="total_text">{{item.district}}</view>
<view class="total_text">{{item.district}}</view>
<view class="total_num">{{item.value}}</view>
</view>
</view>
</view>

@ -1,6 +1,6 @@
/* 用户画像 */
.brand{
width: 686;
width: 686rpx;
height: 484rpx;
background-color: #fff;
margin: 32rpx;
@ -13,39 +13,67 @@
}
.text{
font-size: 36rpx;
padding: 32rpx;
padding: 32rpx 32rpx 0rpx 32rpx ;
font-weight: 400;
}
/* 统计图样式 */
.statistical{
width: 100%;
height:400;
padding: 36rpx;
height:400rpx;
padding: 16rpx;
display: flex;
}
.annotation{
width: 400rpx;
width:100%;
height: 340rpx;
}
/* 右侧样式 */
.allnumber{
width: 120rpx;
/* display:flex; */
height: 320rpx;
.img{
background-color: aqua;
width: 24rpx;
height: 24rpx;
}
.box{
width:80rpx;
width:40rpx;
height: 80rpx;
padding:26rpx 64rpx 12rpx 32rpx;
}
.topic{
font-size: 20rpx;
color: #999999;
text-align: left;
}
.answer{
font-size: 24rpx;
color: #333333;
padding-top: 16rpx;
padding-top: 8rpx;
}
/* 地区 */
.total{
display: flex;
flex-wrap: wrap;
width: 686rpx;
}
.total_content{
display: flex;
width: 270rpx;
justify-content: space-between;
/* padding: 0 0 0 32rpx;上右下左 */
padding: 0 0 0 32rpx;
height: 72rpx;
}
.total_text {
color: #333333;
font-size: 24rpx;
}
.total_num {
color: #333333;
font-size: 23rpx;
font-weight: 600;
}
Loading…
Cancel
Save