perf: 图例切换事件调用

app/src/components/Monitor3D.vue

@@ -132,6 +132,16 @@ onMounted(() => {
   }
 });
 
+defineExpose({
+  legendToggleSelect(name) {
+    chart.dispatchAction({
+        type: 'legendToggleSelect',
+        // 图例名称
+        name: name
+    })
+  }
+})
+
 // 生成扇形的曲面参数方程
 function getParametricEquation(
   startRatio,
@@ -282,6 +292,9 @@ function getPie3D(pieData, internalDiameterRatio) {
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
     color: [ "#D5C307", "#01ADEF", "#12A647"],
+    legend: {
+      top: "200%",
+    },
     labelLine: {
       show: true,
       lineStyle: {

app/src/views/BasicInfo/components/VideoInfo.vue

@@ -7,9 +7,9 @@
             <img src="../../../assets/images/Group 1321314650.png" alt="">
             <img src="../../../assets/images/Group 1321314651.png" alt="">
         </div>
-            <Monitor3D/>
+            <Monitor3D ref="monitor"/>
             <div class="info">
-                <div class="bg-num">
+                <div class="bg-num" @click="clickItem('生命通道监控点位')">
                     <div class="line-box">
                         <span class="line"></span>
                     <span>生命通道监控点位</span>
@@ -29,10 +29,10 @@
                    
                 </div>
                 </div>
-                <div class="bg-num">
+                <div class="bg-num" @click="clickItem('电气火灾监测点位')">
                     <div class="line-box">
                         <span class="line line-g"></span>
-                        <span>生命通道监控点位</span>
+                        <span>电气火灾监测点位</span>
                     </div>
                    <div> 
                     <!-- 在线 -->
@@ -49,10 +49,10 @@
                    
                 </div>
                 </div>
-                <div class="bg-num">
+                <div class="bg-num" @click="clickItem('水压检测点位')">
                     <div class="line-box">
                         <span class="line line-b"></span>
-                    <span>生命通道监控点位</span>
+                    <span>水压检测点位</span>
                     </div>
                    <div> 
                     <!-- 在线 -->
@@ -76,7 +76,12 @@
 <script >
 import Monitor3D from '@/components/Monitor3D.vue'
 export default{
-components:{Monitor3D}
+components:{Monitor3D},
+methods: {
+    clickItem(name) {
+      this.$refs.monitor.legendToggleSelect(name)
+    }
+}
 }
 </script>
 
@@ -116,7 +121,7 @@ components:{Monitor3D}
         height: 50px;
         background: rgba(0, 213, 255, .18);
         padding: 5px 5px;
-
+        cursor: pointer;
     }
     .line-box{
         display: flex;
@@ -129,15 +134,12 @@ components:{Monitor3D}
         height: 14px;
         background:#D5C307 ;
         margin-right: 5px;
-        cursor: pointer;
     }
     .line-g{
         background: #01ADEF !important;
-        cursor: pointer;
     }
     .line-b{
         background: #12A647 !important;
-        cursor: pointer;
     }
 }
 </style>