用户画像

dev
wylyl22 3 years ago
parent 42af666487
commit 8c233764ab

@ -1,52 +1,52 @@
var dataList=[ var dataList=[
{ value: 1650245, name: '女性'}, { value: 1650245, name: "女性",color:'#333'},
{ value: 1650245, name: '未知' }, { value: 1650245, name: "未知" ,color:'#333'},
{ value: 3307418, name: '男性' }, { value: 3307418, name: "男性" ,color:'#333'},
] ]
Component({ Component({
data: { data: {
dataList:dataList, dataList:dataList,
regionList:[ // regionList:[
{ // {
district:'广东', // district:'广东',
value:10 // value:10
}, // },
{ // {
district:'河南', // district:'河南',
value:10 // value:10
}, // },
{ // {
district:'江苏', // district:'江苏',
value:10 // value:10
}, // },
{ // {
district:'浙江', // district:'浙江',
value:10 // value:10
}, // },
{ // {
district:'安徽', // district:'安徽',
value:10 // value:10
}, // },
{ // {
district:'安徽', // district:'安徽',
value:10 // value:10
}, // },
{ // {
district:'安徽', // district:'安徽',
value:10 // value:10
},{ // },{
district:'安徽', // district:'安徽',
value:10 // value:10
}, // },
{ // {
district:'安徽', // district:'安徽',
value:10 // value:10
},{ // },{
district:'安徽', // district:'安徽',
value:10 // value:10
}, // },
], // ],
showChart: true, showChart: true,
sexOption: { sexOption: {
tooltip: { tooltip: {
@ -66,11 +66,12 @@ Component({
series: [ series: [
{ {
// bottom:68, // bottom:68,
right:32, right:24,
name: 'Access From', name: 'Access From',
type: 'pie', type: 'pie',
radius: ['76', '40'], radius: ['76', '40'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
// borderRadius: 10, // borderRadius: 10,
borderColor: '#fff', borderColor: '#fff',
@ -96,9 +97,66 @@ Component({
data: dataList 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() { onShow() {
this.getTabBar().init(); this.getTabBar().init();
@ -107,6 +165,7 @@ Component({
methods: { methods: {
priceSel(e){ priceSel(e){
this.setData({ this.setData({
intervalSel: e.currentTarget.dataset.index, intervalSel: e.currentTarget.dataset.index,

@ -1,4 +1,5 @@
<view> <scroll-view>
<view>
<!-- 时间组件 --> <!-- 时间组件 -->
<time-component></time-component> <time-component></time-component>
<view class="brand"> <view class="brand">
@ -8,12 +9,11 @@
<c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{sexOption}}" height="100%"></c-echars> <c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{sexOption}}" height="100%"></c-echars>
</view> </view>
<view> <view>
<view wx:for="{{dataList}}" wx:key="item" style="display: flex; justify-content:space-between;"> <view wx:for="{{dataList}}" wx:key="name" style="display: flex; justify-content:space-between;">
<view class="box">
<!-- <view class="box"> <view class="img" style="background-color:{{item.color}};"></view>
<view class="img"></view> <view class="answer">女性</view>
<view class="answer">{{item.value}}</view> </view>
</view> -->
<view class="box"> <view class="box">
<view class="topic">数量</view> <view class="topic">数量</view>
<view class="answer">{{item.value}}</view> <view class="answer">{{item.value}}</view>
@ -27,8 +27,8 @@
</view> </view>
</view> </view>
</view> </view>
<view class="brand"> <view class="brand">
<view class="text">认证</view> <view class="text">认证</view>
<view class="statistical"> <view class="statistical">
<view class="annotation"> <view class="annotation">
@ -47,16 +47,18 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="brand"> <view class="brand">
<view class="text">地区</view> <view class="text">地区</view>
<view class="total"> <view class="echars">
<view wx:for="{{regionList}}" wx:key="item" class="total_content"> <view class="echars_view">
<view class="total_text">{{item.district}}</view> <c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{regionOption}}" height="100%"></c-echars>
<view class="total_text">{{item.district}}</view> </view>
<view class="total_num">{{item.value}}</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>
</view> </scroll-view>

@ -31,14 +31,14 @@
/* 右侧样式 */ /* 右侧样式 */
.img{ .img{
background-color: aqua; /* background-color: aqua; */
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
} }
.box{ .box{
width:40rpx; width:40rpx;
height: 80rpx; height: 80rpx;
padding:26rpx 64rpx 12rpx 32rpx; padding:26rpx 64rpx 12rpx 12rpx;/* 上右下左 */
} }
.topic{ .topic{
@ -51,6 +51,7 @@
font-size: 24rpx; font-size: 24rpx;
color: #333333; color: #333333;
padding-top: 8rpx; padding-top: 8rpx;
} }
/* 地区 */ /* 地区 */
@ -77,3 +78,15 @@
font-weight: 600; 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