居民统计

src/project/saas/AppResidentStatistics/AppResidentStatistics.vue

@@ -40,7 +40,7 @@ export default {
           component: Message
         },
       ],
-      tabIndex: 0,
+      tabIndex: 2,
       areaId: '',
       areaName: '',
     }

src/project/saas/AppResidentStatistics/components/Files.vue

@@ -33,58 +33,113 @@ export default {
         },
         series: [
           {
-            name: 'Access From',
+            name: '特殊人群',
             type: 'pie',
-            radius: ['40%', '70%'],
+            radius: ['30%', '60%'],
+            itemStyle: {
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
             data: [
-              { value: 1048, name: 'Search Engine' },
+              { value: 100, name: '吸毒人员100' },
-              { value: 735, name: 'Direct' },
+              { value: 150, name: '高龄老人150' },
-              { value: 580, name: 'Email' },
+              { value: 80, name: '刑满释放人员80' },
-              { value: 484, name: 'Union Ads' },
+              { value: 84, name: '退伍军人84' },
-              { value: 300, name: 'Video Ads' }
             ],
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
               }
             }
           }
         ]
       };
       this.echartDataSpecial.setOption(option)
-      this.echartDataSex.setOption(option)
 
       var option2 = {
+          grid: {
+            top: '10%',
+            left: '4%',
+            right: '4%',
+            bottom: '10%',
+            containLabel: true
+          },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: ['10岁以下', '10-18岁', '18-65岁', '65-80岁', '80岁以上']
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
+            itemStyle: {
+              normal: {
+                color: ['#0072FF'],
+                label: {
+                  show: true, //开启显示数值
+                  position: 'top', //数值在上方显示
+                  textStyle: {  //数值样式
+                    color: '#919191',   //字体颜色
+                    fontSize: 14  //字体大小
+                  }
+                }
+              }
+            },
             data: [
-              120,
+              136, 195, 162, 138,
               {
-                value: 200,
+                value: 98,
                 itemStyle: {
-                  color: '#a90000'
+                  color: '#F09535'
                 }
               },
-              150,
-              80,
-              70,
-              110,
-              130
             ],
-            type: 'bar'
+            type: 'bar',
+            barWidth : 20,
           }
         ]
       };
       this.echartDataAge.setOption(option2)
+
+      var option3 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '男女比例',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            itemStyle: {
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#2891FF', '#FF8700'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
+            data: [
+              { value: 100, name: '男100' },
+              { value: 100, name: '女100' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              }
+            }
+          }
+        ]
+      };
+      this.echartDataSex.setOption(option3)
     },
   },
   created() {

src/project/saas/AppResidentStatistics/components/Message.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="Message">
     <div class="title">消息回复率</div>
+    <div class="msg-type">
+      <div class="type-list">
+        <div :class="type == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="tabClick(index)">{{ item }}</div>
+      </div>
+      <div class="chart-content" id="chartDay"></div>
+    </div>
     <div class="title">单聊统计</div>
     <div class="tab-content">
       <div class="item" v-for="(item, index) in friendList" :key="index">
@@ -51,8 +57,11 @@ export default {
           value: '255,625'
         },
       ],
+      typeList: ['昨日', '近7天', '近30天'],
+      type: 0,
       echartDataFriend: null,
-      echartDataGroup: null
+      echartDataGroup: null,
+      echartDataDay: null
     }
   },
   computed: { ...mapState(['user']) },
@@ -60,6 +69,7 @@ export default {
     chartInit() {
       this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
       this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
+      this.echartDataDay = echarts.init(document.getElementById('chartDay'))
       var option = {
         grid: {
           left: '5%',
@@ -137,8 +147,55 @@ export default {
         ]
       };
       this.echartDataFriend.setOption(option)
-       this.echartDataGroup.setOption(option)
+      this.echartDataGroup.setOption(option)
+
+      var option2 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['60%', '80%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 20,
+              borderColor: '#fff',
+              borderWidth: 2,
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#1890FF', '#F0F2F5'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+            ]
+          }
+        ]
+      };
+      this.echartDataDay.setOption(option2)
     },
+    tabClick(index) {
+      this.type = index
+    }
   },
   created() {
     this.$nextTick(() => {
@@ -195,5 +252,35 @@ export default {
     background-color: #fff;
     border-radius: 8px;
   }
+  .msg-type {
+    width: 100%;
+    background: #FFF;
+    border-radius: 8px;
+    padding-top: 44px;
+    .type-list {
+      width: 430px;
+      height: 60px;
+      line-height: 60px;
+      background: #E9E9E9;
+      border-radius: 16px;
+      display: flex;
+      margin: 0 auto 48px;
+      .item {
+        flex: 1;
+        text-align: center;
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #666;
+      }
+      .active {
+        font-weight: 500;
+        color: #080808;
+        background: #D8D8D8;
+        box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.23);
+        border-radius: 10px;
+      }
+    }
+  }
 }
 </style>