fix: 柱状图在标签页dom渲染

src/components/echarts/big/fullBig.vue

@@ -58,11 +58,9 @@ defineExpose({
         <img class="w-full h-full" :src="qvanping" alt="" />
       </div>
     </div>
-    <barEcharts
-      ref="barEchartsRef"
-      class="w-[1260px] h-[380px] mt-5"
-      :title="barEchartsList.shuliang"
-    />
+    <div class="w-[1260px] h-[380px] mt-5">
+      <barEcharts ref="barEchartsRef" :title="barEchartsList.shuliang" />
+    </div>
     <!-- :title="barEchartsList.shuliang" -->
   </div>
 </template>

src/router/modules/other.ts

@@ -1,6 +1,6 @@
 // 最简代码，也就是这些字段必须有
 export default {
-  path: "/fullBig/:title",
+  path: "/fullBig",
   name: "full-big",
   meta: {
     title: "维度画像",

src/views/draw/children/worker/workerDrak.vue

@@ -71,7 +71,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 };
 const fullBig = (item: any) => {
   console.log(item);
-  router.push({ name: "full-big", params: { ...item } });
+  router.push({ path: "/fullBig", query: { ...item } });
 };
 </script>
 
@@ -149,7 +149,12 @@ const fullBig = (item: any) => {
       <div class="flex mr-2">
         <radar />
       </div>
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tabs
+        v-model="activeName"
+        class="demo-tabs"
+        :lazy="true"
+        @tab-click="handleClick"
+      >
         <el-tab-pane label="总览" name="1">
           <div class="flex mr-8">
             <rankTable />
@@ -195,7 +200,7 @@ const fullBig = (item: any) => {
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="数量" name="2">
+        <el-tab-pane label="数量" name="2" :lazy="true">
           <div class="w-full">
             <div class="flex justify-between">
               <personList ref="personListRef" class="w-11/12" />
@@ -206,14 +211,15 @@ const fullBig = (item: any) => {
                 <img class="w-full h-full" :src="qvanping" alt="" />
               </div>
             </div>
-            <barEcharts
-              ref="barEchartsRef"
-              class="w-[1260px] h-[260px] mt-5"
-              :title="barEchartsList.shuliang"
-            />
+            <div class="w-full h-60 mt-5 pr-8">
+              <barEcharts
+                ref="barEchartsRef"
+                :title="barEchartsList.shuliang"
+              />
+            </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="效率" name="3">
+        <el-tab-pane label="效率" name="3" :lazy="true">
           <div class="w-full">
             <div class="flex justify-between">
               <personList ref="personListRef" class="w-11/12" />
@@ -224,14 +230,12 @@ const fullBig = (item: any) => {
                 <img class="w-full h-full" :src="qvanping" alt="" />
               </div>
             </div>
-            <barEcharts
-              ref="barEchartsRef"
-              class="w-[1260px] h-[260px] mt-5"
-              :title="barEchartsList.xiaolve"
-            />
+            <div class="w-full h-60 mt-5 pr-8">
+              <barEcharts ref="barEchartsRef" :title="barEchartsList.xiaolve" />
+            </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="质量" name="4">
+        <el-tab-pane label="质量" name="4" :lazy="true">
           <div class="w-full">
             <div class="flex justify-between">
               <personList ref="personListRef" class="w-11/12" />
@@ -242,14 +246,15 @@ const fullBig = (item: any) => {
                 <img class="w-full h-full" :src="qvanping" alt="" />
               </div>
             </div>
-            <barEcharts
-              ref="barEchartsRef"
-              class="w-[1260px] h-[260px] mt-5"
-              :title="barEchartsList.zhiliang"
-            />
+            <div class="w-full h-60 mt-5 pr-8">
+              <barEcharts
+                ref="barEchartsRef"
+                :title="barEchartsList.zhiliang"
+              />
+            </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="难度" name="5">
+        <el-tab-pane label="难度" name="5" :lazy="true">
           <div class="w-full">
             <div class="flex justify-between">
               <personList ref="personListRef" class="w-11/12" />
@@ -260,14 +265,12 @@ const fullBig = (item: any) => {
                 <img class="w-full h-full" :src="qvanping" alt="" />
               </div>
             </div>
-            <barEcharts
-              ref="barEchartsRef"
-              class="w-[1260px] h-[260px] mt-5"
-              :title="barEchartsList.nandu"
-            />
+            <div class="w-full h-60 mt-5 pr-8">
+              <barEcharts ref="barEchartsRef" :title="barEchartsList.nandu" />
+            </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="强度" name="6">
+        <el-tab-pane label="强度" name="6" :lazy="true">
           <div class="w-full">
             <div class="flex justify-between">
               <personList ref="personListRef" class="w-11/12" />
@@ -278,14 +281,12 @@ const fullBig = (item: any) => {
                 <img class="w-full h-full" :src="qvanping" alt="" />
               </div>
             </div>
-            <barEcharts
-              ref="barEchartsRef"
-              class="w-[1260px] h-[260px] mt-5"
-              :title="barEchartsList.qiandu"
-            />
+            <div class="w-full h-60 mt-5 pr-8">
+              <barEcharts ref="barEchartsRef" :title="barEchartsList.qiandu" />
+            </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="教学" name="7">
+        <el-tab-pane label="教学" name="7" :lazy="true">
           <div class="w-full">
             <div class="flex justify-between">
               <personList ref="personListRef" class="w-11/12" />
@@ -296,14 +297,12 @@ const fullBig = (item: any) => {
                 <img class="w-full h-full" :src="qvanping" alt="" />
               </div>
             </div>
-            <barEcharts
-              ref="barEchartsRef"
-              class="w-[1260px] h-[260px] mt-5"
-              :title="barEchartsList.jiaoxue"
-            />
+            <div class="w-full h-60 mt-5 pr-8">
+              <barEcharts ref="barEchartsRef" :title="barEchartsList.jiaoxue" />
+            </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="科研" name="8">
+        <el-tab-pane label="科研" name="8" :lazy="true">
           <div class="w-full">
             <div class="flex justify-between">
               <personList ref="personListRef" class="w-11/12" />
@@ -314,11 +313,9 @@ const fullBig = (item: any) => {
                 <img class="w-full h-full" :src="qvanping" alt="" />
               </div>
             </div>
-            <barEcharts
-              ref="barEchartsRef"
-              class="w-[1260px] h-[260px] mt-5"
-              :title="barEchartsList.keyan"
-            />
+            <div class="w-full h-60 mt-5 pr-8">
+              <barEcharts ref="barEchartsRef" :title="barEchartsList.keyan" />
+            </div>
           </div>
         </el-tab-pane>
       </el-tabs>