微信统计

src/project/saas/AppDataStatistics/components/wechat.vue

@@ -19,6 +19,10 @@
       </div>
     </div>
 
+    <div class="friends_box">
+      <div id="friends"></div>
+    </div>
+
     <div class="head">
       <span>居民群统计</span><span>(统计数据为去重后的数据)</span>
     </div>
@@ -41,10 +45,15 @@
         <div class="item_num">18 <img src="../img/down.png" alt="" class="imgs"></div>
       </div>
     </div>
+
+    <div class="groups_box">
+      <div id="groups"></div>
+    </div>
   </div>
 </template>
 
 <script>
+import echarts from 'echarts';
 export default {
   name: "wechat",
   data() {
@@ -52,8 +61,127 @@ export default {
 
     }
   },
+  mounted() {
+    this.getFriendsEcharts()
+    this.getGroupsEcharts()
+  },
   methods: {
-
+    getFriendsEcharts() {
+      let friendsDom = document.getElementById('friends');
+      let myChart = echarts.init(friendsDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月'],
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        series: [
+          {
+            data: [350, 230, 224, 218, 135],
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    getGroupsEcharts() {
+      let groupsDom = document.getElementById('groups');
+      let myChart = echarts.init(groupsDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月'],
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        series: [
+          {
+            data: [350, 230, 224, 218, 135],
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    }
   },
 }
 </script>
@@ -104,5 +232,19 @@ export default {
       }
     }
   }
+
+  .friends_box,
+  .groups_box {
+    margin-top: 24px;
+    width: 100%;
+    height: 514px;
+    background: #FFF;
+    
+    #friends,
+    #groups {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>