饼图和线图

src/components/charts/pie/index.html

@@ -1 +1,5 @@
-<div :id="id" class="chart"></div>
+<div class="pie_full">
+  <div :id="id" class="chart"></div>
+  <div class="cir"></div>
+</div>
+

src/components/charts/pie/index.js

@@ -11,12 +11,24 @@ export default {
       default: function () {
         return [
           {
-            name: '1月',
-            value: '10'
+            value: 2154,
+            unit: '万元',
+            name: "项目一",
           },
           {
-            name: '2月',
-            value: '19'
+            value: 3854,
+            unit: '万元',
+            name: "项目二",
+          },
+          {
+            value: 3854,
+            unit: '万吨',
+            name: "项目三",
+          },
+          {
+            value: 3854,
+            unit: '万吨',
+            name: "项目四",
           }
         ];
       }
@@ -49,26 +61,7 @@ export default {
     chartSetOption () {
       var scale = 1;
       var echartData = [
-        {
-          value: 2154,
-          unit: '万元',
-          name: "经营收入",
-        },
-        {
-          value: 3854,
-          unit: '万元',
-          name: "投资收益",
-        },
-        {
-          value: 3854,
-          unit: '万吨',
-          name: "补助收入",
-        },
-        {
-          value: 3854,
-          unit: '万吨',
-          name: "其他收入",
-        }
+        ...this.data
       ];
       var rich = {
         yellow: {
@@ -100,12 +93,6 @@ export default {
           height: 0,
         },
       };
-      let xAxisData = [];
-      let data = [];
-      this.data.forEach(item => {
-        xAxisData.push(item.name)
-        data.push(item.value)
-      });
       const option = {
         title: [
           {
@@ -135,9 +122,8 @@ export default {
           {
             name: "",
             type: "pie",
-            radius: ["42%", "60%"],
-            hoverAnimation: false,
-            color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
+            radius: ["48%", "70%"],
+            color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)"],
             label: {
               normal: {
                 formatter: function (params, ticket, callback) {

src/components/charts/pie/index.scss

@@ -1,6 +1,25 @@
-.chart {
-  overflow: visible;
+.pie_full {
   width: 100%;
   height: 100%;
-  z-index: 2;
+  position: relative;
+
+  .chart {
+    overflow: visible;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+  }
+
+  .cir {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    border: 1px solid rgba(49, 129, 246, 1);
+    box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8);
+    /* 添加内发光效果 */
+  }
 }