echarts配置

src/apps/AppResidentFile/AppResidentFile.vue

@@ -14,17 +14,17 @@
             </div>
 
             <div class="items">
-              <span class="items2">{{ counts }}</span>
+              <span class="items2">{{ todayList1.total }}</span>
               <span>群成员总数</span>
             </div>
 
             <div class="items">
-              <span class="items3">{{ todayList.increase }}</span>
+              <span class="items3">{{ todayList1.increase }}</span>
               <span>今日入群</span>
             </div>
 
             <div class="items">
-              <span class="items4">{{ todayList.decrease }}</span>
+              <span class="items4">{{ todayList1.decrease }}</span>
               <span>今日退群</span>
             </div>
           </div>
@@ -39,17 +39,17 @@
         <div class="topcard">
           <div class="cards">
             <div class="items">
-              <span class="items1">{{ nums }}</span>
+              <span class="items1">{{ todayList2.total }}</span>
               <span>居民总数</span>
             </div>
 
             <div class="items">
-              <span class="items3">0</span>
+              <span class="items3">{{ todayList2.increase }}</span>
               <span>今日新增</span>
             </div>
 
             <div class="items">
-              <span class="items4">0</span>
+              <span class="items4">{{ todayList2.decrease }}</span>
               <span>今日流失</span>
             </div>
           </div>
@@ -162,10 +162,10 @@ export default {
       currentTabs: 0,
       tabList: [
         {
-          name: '居民群管理',
+          name: '居民群统计',
         },
         {
-          name: '居民管理',
+          name: '居民统计',
         },
       ],
       Echarts1: null,
@@ -188,9 +188,10 @@ export default {
       list: [],
       weekList: [],
       groupSum: '',
-      todayList: [],
-      nums: '',
-      counts: '',
+      todayList1: [],
+      todayList2: [],
+      counts1: '',
+      counts2: '',
     }
   },
   computed: {
@@ -261,31 +262,33 @@ export default {
     getEchart1() {
       this.$http.post(`/app/wxcp/wxgroup/groupStatistic`).then((res) => {
         if (res.code === 0) {
-          this.initEcharts1(res.data.list)
           this.weekList = res.data.list
+          this.initEcharts1(this.weekList)
           this.groupSum = res.data.groupSum
-          this.todayList = res.data.today
-          this.counts = Object.values(this.weekList)
-            .filter((item) => item.total)
-            .reduce((v, item) => (v += item.total * 1), 0)
+          this.todayList1 = res.data.today
         }
       })
     },
 
     // 居民统计
     getEchart2() {
-      this.$http.post(`/app/appresident/queryCustInfoByAreaId?areaId=${this.user.areaId}`).then((res) => {
+      this.$http.post(`/app/wxcp/wxcustomerlog/customerStatistic?areaId=${this.user.areaId}`).then((res) => {
         if (res.code === 0) {
-          this.initEcharts2(res.data['年龄层次'])
-          this.$nextTick(() => {
-            this.nums = res.data['总人数']
-          })
+          this.initEcharts2(res.data.list)
+          this.todayList2 = res.data.today
         }
       })
     },
 
     initEcharts1(data) {
       var option = {
+        legend: {
+          borderColor: 'pink',
+          data: ['群成员总数', '入群人数', '退群人数'],
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
         grid: {
           top: '9%',
           left: '6%',
@@ -327,10 +330,46 @@ export default {
         },
         series: [
           {
-            color: '#0072FF',
-            barWidth: 30,
-            data: Object.values(data).map((e) => e.total),
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#4A86FD',
+                },
+              },
+            },
+            color: '#4A86FD',
+            name: '群成员总数',
             type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.total),
+          },
+          {
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#32C5FF',
+                },
+              },
+            },
+            color: '#32C5FF',
+            name: '入群人数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.increase),
+          },
+          {
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#FFAA44',
+                },
+              },
+            },
+            color: '#FFAA44',
+            name: '退群人数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.decrease),
           },
         ],
       }
@@ -340,6 +379,12 @@ export default {
 
     initEcharts2(data) {
       var options = {
+        legend: {
+          data: ['居民总数', '新增居民数', '流失居民数'],
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
         grid: {
           top: '9%',
           left: '6%',
@@ -349,7 +394,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: data.map((v) => v.v1),
+          data: Object.keys(data).map((e) => e.substring(e.length - 5, e.length)),
           axisLine: {
             lineStyle: { color: '#157EFF' },
           },
@@ -381,10 +426,46 @@ export default {
         },
         series: [
           {
-            color: '#0072FF',
-            barWidth: 30,
-            data: data.map((v) => v.v2),
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#4A86FD',
+                },
+              },
+            },
+            color: '#4A86FD',
+            name: '居民总数',
             type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.total),
+          },
+          {
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#32C5FF',
+                },
+              },
+            },
+            color: '#32C5FF',
+            name: '新增居民数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.increase),
+          },
+          {
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#FFAA44',
+                },
+              },
+            },
+            color: '#FFAA44',
+            name: '流失居民数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.decrease),
           },
         ],
       }