修改了饼状组件的BUG

src/common/pieChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id" :style="{ width: size, height: size }"></div>
+  <div ref="pieChart" :style="{ width: size, height: size }"></div>
 </template>
 
 <script>
@@ -20,7 +20,7 @@ export default {
             rich: {
               a: {
                 fontSize: 18,
-                color: "#29EEF3",
+                color: "#f3db5c",
               },
 
               c: {
@@ -325,14 +325,10 @@ export default {
       // required: true, //必要性
       default: "150px", //默认值
     },
-    id: {
-      type: String,
-      required: true,
-    },
   },
   mounted() {
     console.log("angle", this.angle);
-    this.chart = this.$echarts.init(document.getElementById(this.id));
+    this.chart = this.$echarts.init(this.$refs.pieChart);
     this.chart.setOption(this.option);
     // 动画效果
     this.interval = setInterval(() => {

src/views/monitor/configImg/configImg.vue

@@ -10,11 +10,13 @@
       >
       </el-option>
     </el-select>
+    <div class="middle"><safety-assess></safety-assess></div>
   </div>
 </template>
 
 <script>
 import safetyAssess from '@/views/monitor/configImg/safetyAssess'
+import SafetyAssess from './safetyAssess.vue';
 export default {
   data() {
     return {
@@ -58,7 +60,7 @@ export default {
   background-image: linear-gradient(
     to right,
     #06133c 0%,
-    #011669 50%,
+    #011669 5045
     #06133c 100%
   );
 }
@@ -81,7 +83,7 @@ export default {
   border: 0;
 }
 .middle {
-  width: 500px;
-  height: 500px;
+  width: 450px;
+  height: 450px;
 }
 </style>

src/views/monitor/configImg/safetyAssess.vue

@@ -1,18 +1,18 @@
 <template>
   <div>
     <h2>总体安全评价</h2>
-    <el-row :gutter="20">
+    <el-row>
       <el-col :span="8"
         ><div class="grid-content bg-purple">
-          <pieChart id="pieChart1" :value="85" title="灾害评分" /></div
+          <pieChart :value="85" title="灾害评分" /></div
       ></el-col>
       <el-col :span="8"
         ><div class="grid-content bg-purple">
-          <pieChart id="pieChart2" :value="90" title="设备评分" /></div
+          <pieChart :value="90" title="设备评分" /></div
       ></el-col>
       <el-col :span="8"
         ><div class="grid-content bg-purple">
-          <pieChart id="pieChart3" :value="95" title="人员评分" /></div
+          <pieChart :value="95" title="人员评分" /></div
       ></el-col>
     </el-row>
   </div>