用户画像

components/indexCom/portraitChild/index.js

@@ -1,10 +1,15 @@
-const datas=[
+var dataList=[
     { value: 1650245, name: '女性' },
     { value: 1650245, name: '未知' },
-  { value: 3307418, name: '男性' },
+    { value: 3307418, name: '男性' },
 ]
 Component({
     data: {
+        dataList:[
+            { value: 1650245, name: '女性' },
+            { value: 1650245, name: '未知' },
+            { value: 3307418, name: '男性' },
+        ],
         showChart: true,
         sexOption: {
             tooltip: {
@@ -14,21 +19,20 @@ Component({
             legend: {
                 // type: 'scroll',
                 orient: 'vertical',
-                right: 140,
-                // top:'center',
-                 bottom: '100',
+                top:16,
+                left:188,
                 itemWidth: 10,//data图标大小
                 itemHeight: 10,
-                itemGap: 45//图标之间间距
+                itemGap: 50//图标之间间距
             },
             // 环形统计图样式
             series: [
               {
                 // bottom:68,
-                // right:200,
+                 right:30,
                 name: 'Access From',
                 type: 'pie',
-                radius: ['90%', '55%'],
+                radius: ['90', '55'],
                 avoidLabelOverlap: false,
                 itemStyle: {
                 //   borderRadius: 10,
@@ -41,18 +45,18 @@ Component({
                   position: 'center'
                 },
                 //点击弹出提示样式
-                emphasis: {
-                  label: {
-                    show: true,
-                    fontSize: '40',
-                    fontWeight: 'bold'
-                  }
-                },
+                // emphasis: {
+                //   label: {
+                //     show: true,
+                //     fontSize: '40',
+                //     fontWeight: 'bold'
+                //   }
+                // },
                 labelLine: {
                   show: false
                 },
                 // 环形数据
-                data: datas
+                data: dataList
               }
             ]
           }

components/indexCom/portraitChild/index.wxml

@@ -2,26 +2,35 @@
     <!-- 时间组件 -->
     <time-component></time-component>
     <view class="brand">
-        <c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{sexOption}}" height="100%"></c-echars>
         <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>123</view>
-        </view>
 
-    </view>
-    <view class="brand">
-        <view class="text">认证</view>
+            <view class="allnumber" wx:for="{{ dataList}}" wx:key="item">
 
+                <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>
+            </view>
+        </view>
     </view>
-    <view class="brand">
-        <view class="text">地区</view>
+
+</view>
+<view class="brand">
+    <view class="text">认证</view>
+
+
+</view>
+<view class="brand">
+    <view class="text">地区</view>
 
 
-    </view>
 </view>

components/indexCom/portraitChild/index.wxss

@@ -19,11 +19,33 @@
 /* 统计图样式 */
 .statistical{
    width: 100%;
-   height:368;
+   height:400;
    padding: 36rpx;
    display: flex;
 }
 .annotation{
-    width: 380;
-    height: 310;
-}
+    width: 400rpx;
+    height: 340rpx;
+}
+
+/* 右侧样式 */
+.allnumber{
+    width: 120rpx;
+   /* display:flex; */
+    height: 320rpx;
+}
+.box{
+    width:80rpx;
+    height: 80rpx;
+   
+}
+.topic{
+    font-size: 20rpx;
+    color: #999999;
+    text-align: left;
+}
+.answer{
+    font-size: 24rpx;
+    color: #333333;
+    padding-top: 16rpx;
+}