From 8c233764ab62b1eb84ef211ea405fb6518a2127d Mon Sep 17 00:00:00 2001
From: wylyl22 <2373073266@qq.com>
Date: Wed, 6 Jul 2022 14:30:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=94=BB=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/indexCom/portraitChild/index.js   | 155 +++++++++++++------
 components/indexCom/portraitChild/index.wxml |  78 +++++-----
 components/indexCom/portraitChild/index.wxss |  17 +-
 3 files changed, 162 insertions(+), 88 deletions(-)

diff --git a/components/indexCom/portraitChild/index.js b/components/indexCom/portraitChild/index.js
index 2741c49..fc1b5fd 100644
--- a/components/indexCom/portraitChild/index.js
+++ b/components/indexCom/portraitChild/index.js
@@ -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,
                
diff --git a/components/indexCom/portraitChild/index.wxml b/components/indexCom/portraitChild/index.wxml
index 63e0600..79031ca 100644
--- a/components/indexCom/portraitChild/index.wxml
+++ b/components/indexCom/portraitChild/index.wxml
@@ -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>
\ No newline at end of file
+</scroll-view>
\ No newline at end of file
diff --git a/components/indexCom/portraitChild/index.wxss b/components/indexCom/portraitChild/index.wxss
index 5b25d65..9950060 100644
--- a/components/indexCom/portraitChild/index.wxss
+++ b/components/indexCom/portraitChild/index.wxss
@@ -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;
 }
\ No newline at end of file