换一个饼图

src/views/dashboard/overview/components/AlarnTypeBar/index.vue

@@ -93,75 +93,216 @@ function initPicture() {
     ) {
       return a.value - b.value;
     });
-    console.log(realData);
+
-    // realData.map((item: any) => {
-    //   item.itemStyle={
-    //     color:colorList[i]
-    //   }
-    //   item.name = t('views.index.' + item.name);
-    // });
     for (let i = 0; i < realData.length; i++) {
+      yData.push(realData[i].name);
       realData[i].name = t('views.index.' + realData[i].name);
-      realData[i].itemStyle = {
+      // realData[i].itemStyle = {
-        color: colorList[i],
+      //   color: colorList[i],
-      };
+      // };
     }
+    // const optionData: any = {
+    //   tooltip: {
+    //     trigger: 'item',
+    //   },
+
+    //   visualMap: {
+    //     show: false,
+    //     min: 80,
+    //     max: 600,
+    //     inRange: {
+    //       colorLightness: [0, 1],
+    //     },
+    //   },
+    //   series: [
+    //     {
+    //       name: 'Access From',
+    //       type: 'pie',
+    //       radius: '75%',
+    //       center: ['50%', '48%'],
+    //       data: realData,
+    //       roseType: 'radius',
+    //       label: {
+    //         formatter: '{c|{c}}\n{b|{b}}',
+    //         distance: 80,
+    //         rich: {
+    //           c: {
+    //             color: 'rgb(241,246,104)',
+    //             fontSize: 18,
+    //             fontWeight: 'bold',
+    //             lineHeight: 5,
+    //           },
+    //           b: {
+    //             color: 'rgb(98,137,169)',
+    //             fontSize: 15,
+    //             height: 30,
+    //           },
+    //         },
+    //       },
+    //       labelLine: {
+    //         lineStyle: {
+    //           color: 'rgba(255, 255, 255, 0.3)',
+    //         },
+    //         smooth: 0.2,
+    //         length: 10,
+    //         length2: 80,
+    //       },
+    //       itemStyle: {
+    //         shadowColor: 'rgba(0, 0, 0, 0.8)',
+    //         shadowBlur: 50,
+    //       },
+
+    //       animationType: 'scale',
+    //       animationEasing: 'elasticOut',
+    //       animationDelay: function (idx: any) {
+    //         return Math.random() * 200;
+    //       },
+    //     },
+    //   ],
+    // };
     const optionData: any = {
+      color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9'],
+
+      grid: {
+        left: -100,
+        top: 50,
+        bottom: 10,
+        right: 10,
+        containLabel: true,
+      },
       tooltip: {
         trigger: 'item',
+        formatter: '{b} : {c} ({d}%)',
       },
-
+      legend: {
-      visualMap: {
+        type: 'scroll',
-        show: false,
+        orient: 'vartical',
-        min: 80,
+        // x: "right",
-        max: 600,
+        top: 'center',
-        inRange: {
+        right: '15',
-          colorLightness: [0, 1],
+        // bottom: "0%",
+        itemWidth: 16,
+        itemHeight: 8,
+        itemGap: 16,
+        textStyle: {
+          color: '#A3E2F4',
+          fontSize: 12,
+          fontWeight: 0,
+        },
+        data: yData,
+      },
+      polar: {},
+      angleAxis: {
+        interval: 1,
+        type: 'category',
+        data: [],
+        z: 10,
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#0B4A6B',
+            width: 1,
+            type: 'solid',
+          },
+        },
+        axisLabel: {
+          interval: 0,
+          show: true,
+          color: '#0B4A6B',
+          margin: 8,
+          fontSize: 16,
         },
       },
+      radiusAxis: {
+        min: 40,
+        max: 120,
+        interval: 20,
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#0B3E5E',
+            width: 1,
+            type: 'solid',
+          },
+        },
+        axisLabel: {
+          formatter: '{value} %',
+          show: false,
+          padding: [0, 0, 20, 0],
+          color: '#0B3E5E',
+          fontSize: 16,
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#0B3E5E',
+            width: 2,
+            type: 'solid',
+          },
+        },
+      },
+      calculable: true,
       series: [
         {
-          name: 'Access From',
           type: 'pie',
-          radius: '75%',
+          radius: ['5%', '10%'],
-          center: ['40%', '48%'],
+          labelLine: {
-          data: realData,
+            show: false,
-          roseType: 'radius',
+            length: 30,
+            length2: 55,
+          },
+          data: [
+            {
+              name: '',
+              value: 0,
+              itemStyle: {
+                color: '#0B4A6B',
+              },
+            },
+          ],
+        },
+        {
+          type: 'pie',
+          radius: ['90%', '95%'],
+          labelLine: {
+            show: false,
+            length: 30,
+            length2: 55,
+          },
+          name: '',
+          data: [
+            {
+              name: '',
+              value: 0,
+              itemStyle: {
+                color: '#0B4A6B',
+              },
+            },
+          ],
+        },
+        {
+          type: 'pie',
+          radius: ['20%', '80%'],
+          roseType: 'area',
+          zlevel: 10,
           label: {
-            formatter: '{c|{c}}\n{b|{b}}',
+            show: true,
-            distance: 80,
+            formatter: '{c|{c}}',
             rich: {
               c: {
                 color: 'rgb(241,246,104)',
-                fontSize: 18,
+                fontSize: 16,
                 fontWeight: 'bold',
                 lineHeight: 5,
               },
-              b: {
-                color: 'rgb(98,137,169)',
-                fontSize: 15,
-                height: 30,
-              },
             },
+            position: 'outside',
           },
           labelLine: {
-            lineStyle: {
+            show: true,
-              color: 'rgba(255, 255, 255, 0.3)',
+            length: 20,
-            },
+            length2: 55,
-            smooth: 0.2,
-            length: 10,
-            length2: 80,
-          },
-          itemStyle: {
-            shadowColor: 'rgba(0, 0, 0, 0.8)',
-            shadowBlur: 50,
-          },
-
-          animationType: 'scale',
-          animationEasing: 'elasticOut',
-          animationDelay: function (idx: any) {
-            return Math.random() * 200;
           },
+          data: realData,
         },
       ],
     };