修复克隆后的pdf生成不显示图表问题

src/components/reportPdf/index.vue

@@ -3,7 +3,7 @@
         <div class="content">
             <div class="c_pdf">
                 <div id="pdf-content" style="width: 630px;" ref="pdfRef">
-                    <pdf :reportData="reportData"></pdf>
+                    <pdf :reportData="reportData" @optionsMaps="optionsMaps"></pdf>
                 </div>
             </div>
             <div class="c_footer adfac">
@@ -26,6 +26,7 @@
 </template>
 
 <script lang="ts" setup name="">
+    import * as echarts from "echarts";
     import { exportPDF } from './exportPDF';
     import pdf from './pdf.vue'
     const props = defineProps({
@@ -51,6 +52,7 @@
     const reportName = ref(props.reportName);
     const reportShow = ref(false);
     const pdfRef = ref(null);
+    const echartsOptions = ref(new Map())
     const emit = defineEmits(['cancel','refreshReportList']);
     import { updateReportPdfUrl } from '@/api/agent/index.js';
 
@@ -60,7 +62,8 @@
 
     const exportToPDF = async () => {
         const clonedEl = cloneEl();
-        await nextTick();
+        await reinitClonedCharts(clonedEl);
+        // return
         try {
             reportShow.value = true;
             // 滚动到顶部确保完整渲染
@@ -95,6 +98,34 @@
         document.body.appendChild(clonedEl);
         return clonedEl
     }
+    const optionsMaps = (optionsMap) => {
+        echartsOptions.value = optionsMap;
+    }
+     const reinitClonedCharts = async (clonedEl) => {
+        // 1. 查找所有图表容器（通过 class 或 data-* 标识）
+        const chartContainers = clonedEl.querySelectorAll('.pdfEchart');
+        
+        // 2. 并行重新渲染
+        await Promise.all(
+            Array.from(chartContainers).map(async container => {
+                container.id = container.id+'_copy';
+                const chartId = container.id;
+                const originalOptions = echartsOptions.value.get(chartId); 
+                
+                const existingChart = echarts.getInstanceByDom(container);
+                if (existingChart) existingChart.dispose();
+
+                // 5. 重新初始化 ECharts
+                const chart = echarts.init(container); 
+                chart.setOption(originalOptions);
+                
+                await new Promise(resolve => {
+                    chart.on('finished', resolve); // ECharts 3.0+ 支持
+                    setTimeout(resolve, 500); // 双保险
+                });
+            })
+        );
+    }
     const closeReportAlert = () => {
         reportShow.value = false;
         nextTick(()=>{

src/components/reportPdf/pdf.vue

@@ -111,7 +111,7 @@
                     <span>总体诊断分析</span>
                 </div>
                 <p class="p2" style="margin-top: 43px;">{{ reportData?.overall?.diagResult }}</p>
-                <div ref="zttdznRef" style="width: 100%; height: 350px;margin-top: 20px;"></div>
+                <div class="pdfEchart" id="zttdznRef" ref="zttdznRef" style="width: 100%; height: 350px;margin-top: 20px;"></div>
                 <div class="bp" style="margin-top: 40px;">诊断结果</div>
                 <p style="margin-top: 10px;">{{ reportData?.overall?.overall_analysis }}</p>
             </div>
@@ -278,7 +278,7 @@
                             <span>{{ rd?.performanceRatings?.title }}</span>
                         </div>
                         <div class="bp" style="margin-top: 24px;">评分总体分布</div>
-                        <div :id="'pfztfbRef'+ridx" style="width: 100%; height: 200px;"></div>
+                        <div :id="'pfztfbRef'+ridx" style="width: 100%; height: 200px;" class="pdfEchart"></div>
                         <div class="bp" style="margin-top: 7px;">均分及差异分析</div>
                         <div class="cyfx_boxs">
                             <div class="cyfxb_box" style="border-left: none;">
@@ -778,8 +778,10 @@
     const pjgxRef = ref(null);
     const pageNum = ref('');
     const membersPageCount = ref(0);
+    const optionsMap = new Map();
     const datetime = proxy.parseTime(new Date(), '{yy}-{mm}-{dd} {hh}:{ii}');
     const { UserCategory} = proxy.useDict("UserCategory");
+    const emits = defineEmits(['optionsMaps']);
 
     const initZttdznChart = () => {
         let myChart = echarts.init(zttdznRef.value);
@@ -819,10 +821,11 @@
                 }
             ]
         };
+        optionsMap.set("zttdznRef_copy", option);
         myChart.setOption(option)
     }
     
-    const initPfztfbChart = (dom,report) => {
+    const initPfztfbChart = (dom,report,id) => {
         let myChart = echarts.init(dom);
         let option = {
             tooltip: {
@@ -861,6 +864,7 @@
                 }
             ]
         };
+        optionsMap.set(id+'_copy', option);
         myChart.setOption(option)
     }
 
@@ -881,7 +885,10 @@
             nextTick(()=>{
                 reportData.value?.dimensionAnalysis?.forEach((item,index)=>{
                     let dom = document.getElementById(`pfztfbRef${index}`)
-                    initPfztfbChart(dom,item)
+                    initPfztfbChart(dom,item,`pfztfbRef${index}`);
+                    if(index===reportData.value?.dimensionAnalysis?.length-1){
+                        emits('optionsMaps', optionsMap);
+                    }
                 })
             })
         }