饼图显示

src/views/modules/visual/communityGovern/resiPieOption.js

@@ -1,5 +1,5 @@
 
-export function pieOption () {
+export function pieOption (_charts) {
 const center= ['50%', '250px']
   return {
     title: {
@@ -47,25 +47,19 @@ const center= ['50%', '250px']
         center: center,
         radius: ['55%', '55.3%'],
         label: {
-          normal: {
-            show: false
-          }
+          show: false
         },
         labelLine: {
-          normal: {
-            show: false
-          }
+          show: false
         },
         data: [{
           value: 360,
           itemStyle: {
-            normal: {
-              color: 'rgba(40, 101, 250, 0)',
-              width:0,
-              borderColor: 'rgba(40, 101, 250, 0.5)',
-              borderWidth: 1,
-              borderType: 'dotted'
-            }
+            color: 'rgba(40, 101, 250, 0)',
+            width:0,
+            borderColor: 'rgba(40, 101, 250, 0.5)',
+            borderWidth: 1,
+            borderType: 'dotted'
           }
         }
         ]
@@ -85,33 +79,55 @@ const center= ['50%', '250px']
         left: 'center',
         width: 400,
         label: {
-           position: 'outer',
-          // alignTo: 'edge',
-          formatter: '{a|{c}}\n\n{name|{b}}',
-          // minMargin: 100,
-          // edgeDistance: 0,
-          // lineHeight: 20,
+          // show: false,
+          position: 'outside',
+          alignTo: 'edge',
+          // formatter: '{a|{c}}\n\n{name|{b}}',
+          formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+          minMargin: 5,
+          edgeDistance: 1,
+          lineHeight: 15,
           color: '#fff',
           fontSize: 12,
-           distanceToLabelLine: -60,
+          // distanceToLabelLine: -60,
           rich: {
+            name: {
+              padding: [0, 6, 0, 6]
+            },
             a: {
-              fontSize: '30px',
-              color: ' #00F5FE',
-              
+              fontSize: 30,
+              color: '#fff',
+              padding: [0, 6, 6, 6]
             },
-            b: {
-              lineHeight: 0,
-              fontSize: '20px',
-              color: ' #FFFFFF'
-
+            r: {
+              backgroundColor: 'auto',
+              borderRadius: 6,
+              width: 6,
+              height: 6,
+              // padding: [3, 3, 0, -12]
             }
           }
         },
         labelLine: {
+          show: false,
           smooth: 0.2,
           length: 30,
-          length2: 90
+          length2: 0,
+          maxSurfaceAngle: 80
+        },
+        labelLayout: function (params) {
+          const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+          const points = params.labelLinePoints;
+          // Update the end point.
+          if (points) {
+            points[2][0] = isLeft
+            ? params.labelRect.x
+            : params.labelRect.x + params.labelRect.width;
+          }
+          
+          return {
+            labelLinePoints: points
+          };
         },
         // itemStyle: {
         //   normal:{

src/views/modules/visual/communityGovern/resibuzz.vue

@@ -116,6 +116,7 @@ export default {
         pageSize: 10,
         pageNo: 1,
         total: 0,
+        pieChartS: null
       },
     };
   },
@@ -159,8 +160,9 @@ export default {
   },
 
   methods: {
-    pieInitOk () {
-      console.log('pie准备好了')
+    pieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.pieChartS = dom
       this.pieInitState = true
 
     },
@@ -180,12 +182,13 @@ export default {
       // const res = await getMonthPieChart(this.shibeiAId)
 
       // 获取pieChart配置
-      this.pieOption = pieOption()
+      this.pieOption = pieOption(this.pieChartS)
+      this.pieOption.title.text = this.pieTotal
+      this.pieOption.series[1].data = this.pieData
 
       this.clickPie(0)
 
-      this.pieOption.title.text = this.pieTotal
-      this.pieOption.series[1].data = this.pieData
+      
 
       this.$refs.pieChart.setOption(this.pieOption)
 
@@ -212,6 +215,19 @@ export default {
             }
 
           };
+          console.log('zhilma')
+          // element.labelLayout = (params) => {
+          //   const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2;
+          //   const points = params.labelLinePoints;
+          //   console.log('isLeft', isLeft, points)
+          //   // Update the end point.
+          //   points[2][0] = isLeft
+          //     ? params.labelRect.x
+          //     : params.labelRect.x + params.labelRect.width;
+          //   return {
+          //     labelLinePoints: points
+          //   };
+          // }
 
         } else {
           element.label = {