消息回复率

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

@@ -4,7 +4,11 @@
       <span>消息回复率</span>
     </div>
 
-    
+    <div class="echarts_list">
+      <div id="echarts1"></div>
+      <div id="echarts2"></div>
+      <div id="echarts3"></div>
+    </div>
 
     <div class="head">
       <span>单聊统计</span>
@@ -61,10 +65,157 @@ export default {
     }
   },
   mounted() {
+    this.getEcharts1()
+    this.getEcharts2()
+    this.getEcharts3()
     this.getPrivateChat()
     this.getGroupChat()
   },
   methods: {
+    getEcharts1() {
+      let echarts1 = document.getElementById('echarts1');
+      let myChart = echarts.init(echarts1);
+      let option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        title: {
+          zlevel: 0,
+          text: ['{name|昨日}\n{value|12}'],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#F0F2F5'], 
+        series: [
+          {
+            name: '昨天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 580, name: '男' },
+              { value: 484, name: '女' },
+            ]
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    getEcharts2() {
+      let echarts2 = document.getElementById('echarts2');
+      let myChart = echarts.init(echarts2);
+      let option = {
+        tooltip: {
+          trigger: "item",
+        },
+        title: {
+          zlevel: 0,
+          text: ['{name|近7天}\n{value|12}'],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#F0F2F5'], 
+        series: [
+          {
+            name: '近7天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 580, name: '男' },
+              { value: 484, name: '女' },
+            ]
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    getEcharts3() {
+      let echarts3 = document.getElementById('echarts3');
+      let myChart = echarts.init(echarts3);
+      let option = {
+        tooltip: {
+          trigger: "item",
+        },
+        title: {
+          zlevel: 0,
+          text: ['{name|近30天}\n{value|12}'],
+          top: 'center',
+          left: '46%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+              value: {
+                color: '#333333',
+                fontSize: 13,
+                lineHeight: 16
+              }
+            },
+          },
+        },
+        color: ['#3975C6','#F0F2F5'], 
+        series: [
+          {
+            name: '近30天',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 580, name: '男' },
+              { value: 484, name: '女' },
+            ]
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
     getPrivateChat() {
       let privateDom = document.getElementById('privateChat');
       let myChart = echarts.init(privateDom);
@@ -241,5 +392,22 @@ export default {
       height: 100%;
     }
   }
+
+  .echarts_list {
+    width: 100%;
+    height: 256px;
+    background: #FFF;
+    border-radius: 8px;
+    margin-top: 24px;
+    display: flex;
+
+    #echarts1,
+    #echarts2,
+    #echarts3 {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>