日历 柱状图 折线图

src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue

@@ -1,10 +1,20 @@
 <template>
   <div class="AppPropagandaStatistics">
     <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>
+
+    <!-- 折线图 -->
+    <div class="brokenEcharts">
+      <div id="brokenEcharts"></div>
+    </div>
+    <div class="columnarEcharts">
+      <div id="columnarEcharts"></div>
+    </div>
   </div>
 </template>
 
 <script>
+import { uniCalendar } from "@dcloudio/uni-ui"
+import echarts from 'echarts';
 export default {
   name: 'AppPropagandaStatistics',
   appName: '宣发统计',
@@ -12,18 +22,97 @@ export default {
     return {
       date: '',
       selected: [{date: '2022-07-08',}],
+      brokenEcharts: null,
+      columnarEcharts: null,
     }
   },
+  components: {
+    uniCalendar
+  },
   onShow() {
     document.title = '宣发统计'
+    
+  },
+  mounted() {
+    this.getBrokenEcharts()
+    this.getColumnarEcharts()
   },
   methods: {
     change(val) {
       this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
+    },
+    getBrokenEcharts() {
+      this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
+      this.brokenEcharts.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['触达人次', '宣发次数', '宣发任务数']
+        },
+        grid: {
+          left: '2%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2022.02', '2202.03', '2202.04', '2202.05', '2202.06', '2202.07']
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name: '触达人次',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230]
+          },
+          {
+            name: '宣发次数',
+            type: 'line',
+            stack: 'Total',
+            data: [220, 182, 191, 234, 290, 330]
+          },
+          {
+            name: '宣发任务数',
+            type: 'line',
+            stack: 'Total',
+            data: [800, 232, 201, 154, 190, 330]
+          },
+        ]
+      })
+    },
+    getColumnarEcharts() {
+      this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts'))
+      this.columnarEcharts.setOption({
+        title: {
+          text: '宣发明细'
+        },
+        xAxis: {
+          type: 'category',
+          data: ['卫健委', '法院', '团委', '扶贫办', '警察局']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            itemStyle:{
+              normal:{
+                  color:'#5087ec'
+              }
+            },
+            type: 'bar'
+          }
+        ]
+      })
     }
   }
-
-
 }
 </script>
 
@@ -40,6 +129,21 @@ export default {
   ::v-deep .uni-calendar__backtoday {
     display: none
   }
+
+  .brokenEcharts {
+    margin: 32px 0,
+  }
+
+  .brokenEcharts,
+  .columnarEcharts {
+    background: #FFF;
+
+    #brokenEcharts,
+    #columnarEcharts {
+      width: 100%;
+      height: 400px;
+    }
+  }
 }
 
 </style>