修改看板

src/views/board/board4/index.vue

@@ -107,6 +107,9 @@
     <div class="chart1">
       <Chart ref="chart1"></Chart>
     </div>
+    <div class="chart4">
+      <Chart ref="chart4"></Chart>
+    </div>
     <div class="chart2">
       <Chart ref="chart2"></Chart>
     </div>
@@ -221,6 +224,70 @@ export default {
         },
       ]
     })
+    this.$refs.chart4.setData({
+      radar: {
+        center: ["30%", "50%"],
+        radius: '40%',
+        shape: 'circle',
+        splitNumber: 1,
+        splitLine: {
+          lineStyle: {
+            color: '#fff4',       // 最外圈颜色
+            width: 1
+          }
+        },
+        splitArea: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        axisNameGap: 3,
+        axisName: {
+          rotation: 90,
+          rotate: 90,
+          fontSize: 8,
+          color: '#ddd',
+        },
+        indicator: Array(8).fill(0).map((item, index) => {
+          return {name: '产品' + (index + 1), index, max: 100}
+        }),
+      },
+      series: [
+        {
+          name: ' ',
+          type: 'radar',
+          symbolSize: 3,
+          itemStyle: {
+            color: '#FBFCFC'
+          },
+          lineStyle: {
+            color: '#478EEE',
+            width: 1,
+          },
+          data: [
+            {
+              value: Array(8).fill(0).map((item, index) => {
+                return 90 + Math.floor(Math.random() * 10);
+              }),
+              name: 'Allocated Budget',
+              areaStyle: {
+                color: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    {offset: 0, color: '#fff0'},
+                    {offset: 1, color: '#4C92F266'}
+                  ]
+                },
+              }
+            }
+          ]
+        }
+      ]
+    })
     let barData = Array(8).fill(0).map((item, index) => {
       return 5 + Math.floor(Math.random() * 8);
     })
@@ -647,4 +714,12 @@ export default {
   width: 23.8%;
   height: 29%;
 }
+
+.chart4 {
+  position: absolute;
+  top: 66%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 29%;
+}
 </style>

src/views/board/board5/index.vue

@@ -63,8 +63,13 @@
     <div class="chart4">
       <Chart ref="chart4"></Chart>
     </div>
+    <div class="toggle">
+      <div class="btn">
+        <el-button type="primary" @click="toggle = !toggle">切换显示</el-button>
+      </div>
+    </div>
     <div class="repairTimes">
-      <div class="expendImg" v-if="true"></div>
+      <div class="expendImg" v-if="toggle"></div>
       <div class="item" v-for="i in 5" v-else>
         <div class="num">{{ i }}</div>
         <div class="deviceName">SC-228NE</div>
@@ -88,7 +93,9 @@ export default {
   },
   name: "Liner",
   data() {
-    return {}
+    return {
+      toggle: false
+    }
   },
   mounted() {
     let data = [
@@ -640,4 +647,27 @@ export default {
     }
   }
 }
+
+.toggle {
+  position: absolute;
+  top: 55.2%;
+  left: 80.2%;
+  width: 10vw;
+  height: 5vw;
+
+  .btn {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &:hover {
+    .btn {
+      display: inline-block;
+    }
+  }
+
+}
 </style>