饼状图

src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="AppPropagandaStatistics">
+    
     <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>
 
     <!-- 折线图 -->
@@ -9,6 +10,9 @@
     <div class="columnarEcharts">
       <div id="columnarEcharts"></div>
     </div>
+    <div class="pieEcharts">
+      <div id="pieEcharts"></div>
+    </div>
   </div>
 </template>
 
@@ -24,6 +28,7 @@ export default {
       selected: [{date: '2022-07-08',}],
       brokenEcharts: null,
       columnarEcharts: null,
+      pieEcharts: null,
     }
   },
   components: {
@@ -36,11 +41,13 @@ export default {
   mounted() {
     this.getBrokenEcharts()
     this.getColumnarEcharts()
+    this.getPieEcharts()
   },
   methods: {
     change(val) {
       this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
     },
+    // 折线图
     getBrokenEcharts() {
       this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
       this.brokenEcharts.setOption({
@@ -86,6 +93,7 @@ export default {
         ]
       })
     },
+    // 柱状图
     getColumnarEcharts() {
       this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts'))
       this.columnarEcharts.setOption({
@@ -111,6 +119,45 @@ export default {
           }
         ]
       })
+    },
+    // 带百分比饼图
+    getPieEcharts() {
+      this.pieEcharts = echarts.init(document.getElementById('pieEcharts'))
+      this.pieEcharts.setOption( {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        color:['#1684fc','#ccc'], 
+        series: [
+          {
+            name: '群发送达率',
+            type: 'pie',
+            radius: ['60', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: false,
+                position: 'center'
+              },
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {value: 5, name: '群发送达率',label:{
+                normal:{ 
+                  show:true,
+                  formatter: '{d}%',
+                  textStyle: {
+                    fontSize: 16,
+                  },
+                }}},
+              {value: 120, name: '邮件营销'}
+            ]
+          }
+        ]
+      })
     }
   }
 }
@@ -135,11 +182,13 @@ export default {
   }
 
   .brokenEcharts,
-  .columnarEcharts {
+  .columnarEcharts,
+  .pieEcharts {
     background: #FFF;
 
     #brokenEcharts,
-    #columnarEcharts {
+    #columnarEcharts,
+    #pieEcharts {
       width: 100%;
       height: 400px;
     }