用户画像

dev
wylyl22 3 years ago
parent 42af666487
commit 8c233764ab

@ -1,52 +1,52 @@
var dataList=[
{ value: 1650245, name: '女性'},
{ value: 1650245, name: '未知' },
{ value: 3307418, name: '男性' },
{ value: 1650245, name: "女性",color:'#333'},
{ value: 1650245, name: "未知" ,color:'#333'},
{ value: 3307418, name: "男性" ,color:'#333'},
]
Component({
data: {
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
},
],
// 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: {
tooltip: {
@ -66,11 +66,12 @@ Component({
series: [
{
// bottom:68,
right:32,
right:24,
name: 'Access From',
type: 'pie',
radius: ['76', '40'],
avoidLabelOverlap: false,
itemStyle: {
// borderRadius: 10,
borderColor: '#fff',
@ -96,17 +97,75 @@ Component({
data: dataList
}
]
}
},
regionOption:{
tooltip: {
},
xAxis: {
show:false,
type:'value'
},
yAxis:
{
data: ['四川', '广东', '浙江', '北京','江西',],
inverse: true,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
margin: 10,
color: '#333333',
fontSize: 12
}
},
grid: {
// top: 'center',
bottom:20,
height:186,
width:48,
left: 40,
},
series: [
{
itemStyle:{
normal:{
color:'#0084FF',
barBorderRadius:12
},
},
// current data
type: 'bar',
barWidth:10,
data:[30, 40, 66, 10,30],
label: {
show: true,
formatter: function (params) {
return ((params.value / 100) * 100).toFixed(1) + ' %';
},
// position: 'right',
// offset: [20, 0],
color: '#333333',
fontSize: 12,
position:[60,-4]
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
markLine: {
symbol: 'none',
},
},
]
},
},
onShow() {
this.getTabBar().init();
},
methods: {
priceSel(e){
this.setData({
intervalSel: e.currentTarget.dataset.index,

@ -1,19 +1,41 @@
<view>
<!-- 时间组件 -->
<time-component></time-component>
<scroll-view>
<view>
<!-- 时间组件 -->
<time-component></time-component>
<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="name" style="display: flex; justify-content:space-between;">
<view class="box">
<view class="img" style="background-color:{{item.color}};"></view>
<view class="answer">女性</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>
<view class="brand">
<view class="text">性别</view>
<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="img"></view>
<view class="answer">{{item.value}}</view>
</view> -->
<view class="box">
<view class="topic">数量</view>
<view class="answer">{{item.value}}</view>
@ -26,37 +48,17 @@
</view>
</view>
</view>
</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">32%</view>
</view>
<view class="brand">
<view class="text">地区</view>
<view class="echars">
<view class="echars_view">
<c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{regionOption}}" height="100%"></c-echars>
</view>
<view class="echars_view">
<c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{regionOption}}" height="100%"></c-echars>
</view>
</view>
</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>
</scroll-view>

@ -31,14 +31,14 @@
/* 右侧样式 */
.img{
background-color: aqua;
/* background-color: aqua; */
width: 24rpx;
height: 24rpx;
}
.box{
width:40rpx;
height: 80rpx;
padding:26rpx 64rpx 12rpx 32rpx;
padding:26rpx 64rpx 12rpx 12rpx;/* 上右下左 */
}
.topic{
@ -51,6 +51,7 @@
font-size: 24rpx;
color: #333333;
padding-top: 8rpx;
}
/* 地区 */
@ -76,4 +77,16 @@
font-size: 23rpx;
font-weight: 600;
}
.echars{
display: flex;
width: 686rpx;
height: 410rpx;
padding: 32rpx 0 0 32rpx;
/* justify-content: space-between; */
}
.echars_view{
width: 308rpx;
height: 410rpx;
}
Loading…
Cancel
Save