宣发日历

project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue

@@ -108,7 +108,6 @@
   import * as echarts from "echarts";
   export default {
     name: 'AppAnnounceStatistics',
-
     label: '协同宣发统计',
     props: {
       instance: Function,
@@ -173,6 +172,7 @@
       }
     },
     created() {
+      this.$initWxOpenData()
       var year = this.calendarDate.getFullYear();
       var month = this.calendarDate.getMonth() + 1;
       var date = this.calendarDate.getDate()
@@ -186,9 +186,6 @@
       this.getEffect()
       this.getDepart()
       this.dict.load("mstSendType")
-    },
-    mounted() {
-
     },
     methods: {
       searchMonthChange() {
@@ -244,6 +241,12 @@
             top: '30px',
             containLabel: true
           },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            type: "plain"
+          },
           color: colorList,
           series: [
             {
@@ -258,31 +261,118 @@
         this.departType = type
         this.getDepart()
       },
-      getDepart() {
-        this.instance.post(`/app/appmasssendingtask/statisticsDepart?type=${this.departType}`).then(res => {
+      getDepart() { // ${this.departType}
+        this.instance.post(`/app/appmasssendingtask/statisticsDepart?type=1`).then(res => {
           if (res.code == 0) {
             // this.dateList = res.data
             // this.getTaskList(this.chooseDay)
+             
+            this.setBarChart()
           } 
         })
-        // 
+
+        // var items = [{type: 'departmentName', id: '10', corpid: 'ww596787bb70f08288'}]
+        // WWOpenData.prefetch({ items }, (err, data) => {
+        //   if (err) {
+        //     console.log(err)
+        //   }
+        //   console.log(data)
+        // })
+        
       },
       setBarChart() {
+        this.departBarChart = echarts.init(document.querySelector(`#departBarChart`))
         var option = {
+          color: ['#2891FF'],
+          grid: {
+            top: '10%',
+            left: '2%',
+            right: '2%',
+            bottom: 90,
+            containLabel: true
+          },
+          toolbox: {
+            feature: {
+              dataZoom: {
+                yAxisIndex: false
+              },
+              saveAsImage: {
+                pixelRatio: 2
+              }
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          dataZoom: [
+            {
+              type: 'inside'
+            },
+            {
+              type: 'slider'
+            }
+          ],
           xAxis: {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            silent: false,
+            splitLine: {
+              show: false
+            },
+            splitArea: {
+              show: false
+            }
           },
           yAxis: {
-            type: 'value'
+            splitArea: {
+              show: false
+            }
           },
           series: [
             {
+              type: 'bar',
               data:[120, 200, 150, 80, 70, 110, 130],
-              type: 'bar'
+              barWidth: 20,
+              barGap: '250%',
+              large: true
             }
           ]
         };
+        
+        // {
+        //   tooltip: {
+        //     trigger: 'axis',
+        //     axisPointer: {
+        //       type: 'shadow'
+        //     }
+        //   },
+        //   grid: {
+        //     top: '10%',
+        //     left: '2%',
+        //     right: '2%',
+        //     bottom: '2%',
+        //     containLabel: true
+        //   },
+        //   color: ['#2891FF'],
+        //   xAxis: {
+        //     type: 'category',
+        //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        //   },
+        //   yAxis: {
+        //     type: 'value'
+        //   },
+        //   series: [
+        //     {
+        //       data: [120, 200, 150, 80, 70, 110, 130],
+        //       type: 'bar',
+        //       barWidth: 20,
+        //       barGap: '250%',
+        //     }
+        //   ]
+        // };
+        this.departBarChart.setOption(option)
       }
 
     }