宣发统计

packages/wxwork/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue

@@ -103,6 +103,18 @@
           </div>
         </div>
       </div>
+      <div class="bottom">
+        <ai-card title="宣发分类数" style="flex: 1; margin-right: 20px;">
+          <template #content>
+            <div id="chart1" style="width: 100%; height: 300px;"></div>
+          </template>
+        </ai-card>
+        <ai-card title="宣发分类占比" style="width: 600px">
+          <template #content>
+            <div id="chart2" style="width: 100%; height: 300px;"></div>
+          </template>
+        </ai-card>
+      </div>
       <div class="statistics-content">
         <div class="flex-between mar-b16">
           <ai-title title="宣发明细"></ai-title>
@@ -163,6 +175,14 @@
         isDepartData: true,
         departBarData: [],
         type: '',
+        date: '',
+        search: {
+          current: 1,
+          size: 10,
+          type: '0'
+        },
+        chart1: null,
+        chart2: null
       }
     },
     computed: {
@@ -217,6 +237,14 @@
       this.getDepart()
       this.dict.load('mstSendType')
     },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.chart1 = echarts.init(document.querySelector('#chart1'))
+        this.chart2 = echarts.init(document.querySelector('#chart2'))
+        window.addEventListener('resize', this.onResize)
+      })
+    },
     methods: {
       ...mapActions(['initOpenData', 'transCanvas']),
       onUserChange (e) {
@@ -290,6 +318,8 @@
             this.setLineChart(xData, createData, 'createChart', ['#2891FF'])
             this.setLineChart(xData, executeData, 'executeChart', ['#FFB865'])
             this.setLineChart(xData, receiveData, 'receiveChart', ['#26D52B'])
+            this.initChart1(res.data.tagTrend)
+            this.initChart2(res.data.tagDistribution)
           }
         })
       },
@@ -456,8 +486,137 @@
         //   ]
         // };
         this.departBarChart.setOption(option)
-      }
+      },
 
+      initChart1 (data) {
+        const x = Object.keys(data)
+        const tags = data[x[0]].map(v => v.tag)
+        let option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            type: "plain"
+          },
+          grid: {
+            left: '10px',
+            right: '28px',
+            bottom: '14px',
+            top: '30px',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'inside',
+              start: 0,
+              end: 7,
+              minValueSpan: 7
+            },
+            {
+              start: 0,
+              end: 7
+            }
+          ],
+          color: ['#2266FF', '#22AA99', '#F8B425', '#29ABF7', '#49DFCB'],
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              align: 'center',
+              padding: [2, 0, 0, 0],
+              interval: 0,
+              fontSize: 14,
+              color: '#666666'
+            },
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: '#E1E5EF'
+              }
+            },
+            data: x
+          },
+          yAxis: {
+            axisTick: {
+              length: 0,
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#E1E5EF'],
+                width: 1,
+                type: 'solid'
+              }
+            },
+            nameTextStyle: {
+              color: '#666666',
+              align: 'left'
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              color: '#666666'
+            },
+            type: 'value'
+          },
+          series: tags.map(v => {
+            return {
+              name: v,
+              type: 'line',
+              data: x.map(e => data[e]).filter(z => {
+                return z.filter(y => y.tag === v)[0].c
+              })
+            }
+          })
+        }
+        this.chart1.setOption(option)
+      },
+
+      initChart2 (data) {
+        let option = {
+          grid: {
+            left: '1%',
+            right: '0%',
+            bottom: '2%',
+            top: '0px',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'item',
+            axisPointer: {
+            }
+          },
+          legend: {
+            left: 'center',
+            top: '0px',
+            textStyle: {
+            }
+          },
+          color: ['#2266FF', '#22AA99', '#F8B425', '#29ABF7', '#49DFCB'],
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              data: data.map(v => {
+                return {
+                  value: v.c,
+                  name: v.tag
+                }
+              }),
+              label: {
+                normal: {
+                  textStyle: {
+                    fontSize: '12'
+                  },
+                  formatter: '{b}: {@2012} ({d}%)'
+                }
+              }
+            }
+          ]
+        }
+        this.chart2.setOption(option)
+      }
     }
   }
 </script>
@@ -469,6 +628,10 @@
       display: flex;
       justify-content: space-between;
     }
+
+    .bottom {
+      display: flex;
+    }
     .mar-b16{
       margin-bottom: 16px;
     }