Ver código fonte

修复雷达图导出pdf时文字丢失的问题

htc 13 horas atrás
pai
commit
a502214c14

+ 3 - 1
src/components/reportPdf/index.vue

@@ -119,7 +119,6 @@
      const reinitClonedCharts = async (clonedEl) => {
         // 1. 查找所有图表容器(通过 class 或 data-* 标识)
         const chartContainers = clonedEl.querySelectorAll('.pdfEchart');
-        
         // 2. 并行重新渲染
         await Promise.all(
             Array.from(chartContainers).map(async container => {
@@ -133,6 +132,9 @@
                 // 5. 重新初始化 ECharts
                 const chart = echarts.init(container); 
                 chart.setOption(originalOptions);
+                if(container.id=='zttdznRef_copy'&&echartsOptions.value.get('zttdznRef_copy2')){
+                    chart.setOption(echartsOptions.value.get('zttdznRef_copy2'));
+                }
                 
                 await new Promise(resolve => {
                     chart.on('finished', resolve); // ECharts 3.0+ 支持

+ 110 - 106
src/components/reportPdf/pdf.vue

@@ -677,80 +677,85 @@
         '领导力':require('@/assets/images/report/title_img_ldl.png')
     }
   
-    // --- 数据定义 ---
-    const indicators = [
-        // 目的与动机 (5)
-        { name: '享受', max: 50 }, { name: '对齐', max: 50 }, { name: '清晰度', max: 50 }, { name: '支持与协作', max: 50 }, { name: '热情与贡献', max: 50 },
-        // 领导力 (5)
-        { name: '启发性领导力', max: 50 }, { name: '领导勇气', max: 50 }, { name: '人际领导力', max: 50 }, { name: '协作赋能型领导力', max: 50 }, { name: '愿景与背景', max: 50 },
-        // 学习 (5)
-        { name: '反思性学习', max: 50 }, { name: '发展导向', max: 50 }, { name: '嵌入式学习', max: 50 }, { name: '学习相关性', max: 50 }, { name: '发展规划', max: 50 },
-        // 内部流程及系统与架构 (5)
-        { name: '合理资源配置', max: 50 }, { name: '团队决策', max: 50 }, { name: '问责机制', max: 50 }, { name: '系统效能', max: 50 }, { name: '团队效能', max: 50 },
-        // 关系 (5)
-        { name: '技能与专业知识', max: 50 }, { name: '价值观多样性与包容性', max: 50 }, { name: '尊重与信任', max: 50 }, { name: '安全沟通', max: 50 }, { name: '团队精神与凝聚力', max: 50 },
-        // 外部流程及系统与架构 (5)
-        { name: '环境意识', max: 50 }, { name: '利益相关者与客户协同', max: 50 }, { name: '人才与资源获取', max: 50 }, { name: '利益相关者与客户沟通', max: 50 }, { name: '关系中的信任与诚信', max: 50 },
-    ].reverse();
-    const categoryData = [
-        { name: '目的与动机', color: '#823479' },
-        { name: '领导力', color: '#898989' },
-        { name: '学习', color: '#AECDF3' },
-        { name: '内部流程及系统与架构', color: '#FFD64E' },
-        { name: '关系', color: '#193D59' },
-        { name: '外部流程及系统与架构', color: '#009191' },
-    ];
-    const reversedCategoryData = [...categoryData].reverse();
-    const teamData = [
-        {
-            name: '团队成员',
-            value: [42, 38, 45, 30, 35, 48, 32, 25, 40, 33, 22, 38, 41, 36, 29, 45, 31, 39, 27, 43, 25, 47, 33, 46, 28, 37, 44, 26, 49, 34].reverse(),
-            lineStyle: { color: '#9F6196' },
-            itemStyle: { color: '#FFD650' },
-            areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
-        },
-        {
-            name: '团队领导',
-            value: [35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 30, 45, 38].reverse(),
-            lineStyle: { color: '#33A7A7' },
-            itemStyle: { color: '#751E6A' },
-            areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
-        },
-        {
-            name: '利益相关者',
-            value: [39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 30, 45, 38].reverse(),
-            lineStyle: { color: '#FFD750' },
-            itemStyle: { color: '#012846' },
-            areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
-        },
-    ];
-    const generateBackgroundSeries = () => {
-        const series = [];
-        let current = 0;
-        reversedCategoryData.forEach((cat) => {
-            const data = new Array(indicators.length).fill('-');
-            for (let i = 0; i < 5; i++) {
-                data[current + i] = 50;
-            }
-            series.push({
-                type: 'bar', 
-                coordinateSystem: 'polar', 
-                stack: 'background',
-                silent: true, data: data,
-                barCategoryGap: '0%',
-                itemStyle: {
-                    color: cat.color,
-                    opacity: 0.8,
-                    borderColor: '#FFFFFF',
-                    borderWidth: 0
+    const getLDTData = () => {
+        const indicators = [
+            // 目的与动机 (5)
+            { name: '享受', max: 50 }, { name: '对齐', max: 50 }, { name: '清晰度', max: 50 }, { name: '支持与协作', max: 50 }, { name: '热情与贡献', max: 50 },
+            // 领导力 (5)
+            { name: '启发性领导力', max: 50 }, { name: '领导勇气', max: 50 }, { name: '人际领导力', max: 50 }, { name: '协作赋能型领导力', max: 50 }, { name: '愿景与背景', max: 50 },
+            // 学习 (5)
+            { name: '反思性学习', max: 50 }, { name: '发展导向', max: 50 }, { name: '嵌入式学习', max: 50 }, { name: '学习相关性', max: 50 }, { name: '发展规划', max: 50 },
+            // 内部流程及系统与架构 (5)
+            { name: '合理资源配置', max: 50 }, { name: '团队决策', max: 50 }, { name: '问责机制', max: 50 }, { name: '系统效能', max: 50 }, { name: '团队效能', max: 50 },
+            // 关系 (5)
+            { name: '技能与专业知识', max: 50 }, { name: '价值观多样性与包容性', max: 50 }, { name: '尊重与信任', max: 50 }, { name: '安全沟通', max: 50 }, { name: '团队精神与凝聚力', max: 50 },
+            // 外部流程及系统与架构 (5)
+            { name: '环境意识', max: 50 }, { name: '利益相关者与客户协同', max: 50 }, { name: '人才与资源获取', max: 50 }, { name: '利益相关者与客户沟通', max: 50 }, { name: '关系中的信任与诚信', max: 50 },
+        ].reverse();
+        const categoryData = [
+            { name: '目的与动机', color: '#823479' },
+            { name: '领导力', color: '#898989' },
+            { name: '学习', color: '#AECDF3' },
+            { name: '内部流程及系统与架构', color: '#FFD64E' },
+            { name: '关系', color: '#193D59' },
+            { name: '外部流程及系统与架构', color: '#009191' },
+        ];
+        const reversedCategoryData = [...categoryData].reverse();
+        const teamData = [
+            {
+                name: '团队成员',
+                value: [42, 38, 45, 30, 35, 48, 32, 25, 40, 33, 22, 38, 41, 36, 29, 45, 31, 39, 27, 43, 25, 47, 33, 46, 28, 37, 44, 26, 49, 34].reverse(),
+                lineStyle: { color: '#9F6196' },
+                itemStyle: { color: '#FFD650' },
+                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+            },
+            {
+                name: '团队领导',
+                value: [35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 30, 45, 38].reverse(),
+                lineStyle: { color: '#33A7A7' },
+                itemStyle: { color: '#751E6A' },
+                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+            },
+            {
+                name: '利益相关者',
+                value: [39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 30, 45, 38].reverse(),
+                lineStyle: { color: '#FFD750' },
+                itemStyle: { color: '#012846' },
+                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+            },
+        ];
+        const generateBackgroundSeries = () => {
+            const series = [];
+            let current = 0;
+            reversedCategoryData.forEach((cat) => {
+                const data = new Array(indicators.length).fill('-');
+                for (let i = 0; i < 5; i++) {
+                    data[current + i] = 50;
                 }
+                series.push({
+                    type: 'bar', 
+                    coordinateSystem: 'polar', 
+                    stack: 'background',
+                    silent: true, data: data,
+                    barCategoryGap: '0%',
+                    itemStyle: {
+                        color: cat.color,
+                        opacity: 0.8,
+                        borderColor: '#FFFFFF',
+                        borderWidth: 0
+                    }
+                });
+                current += 5;
             });
-            current += 5;
-        });
-        return series;
-    };
+            return series;
+        };
+        return { indicators, reversedCategoryData, teamData,generateBackgroundSeries };
+    }
+
     let chartInstance = null;
-    const initZttdznChart = () => {
+    const initZttdznChart = async () => {
+        let { indicators, reversedCategoryData, teamData, generateBackgroundSeries } = await getLDTData();
+
         chartInstance = echarts.init(document.getElementById('zttdznRef'));
         const radarChartRadius = '60%';
         const outerRingRadius = ['60%', '75%'];
@@ -758,32 +763,30 @@
     
         const option = {
             tooltip: { trigger: 'item' },
-            // legend: { bottom: 20, data: teamData.map(d => d.name) },
             polar: { center: ['50%', '50%'], radius: radarChartRadius },
             radar: {
-            indicator: indicators,
-            shape: 'circle',
-            center: ['50%', '50%'],
-            radius: radarChartRadius,
-            startAngle: 90,
-            splitNumber: 5,
-            axisName: { show: false }, // 隐藏默认的 axisName,我们将使用 graphic 自定义
-            splitArea: { show: false },
-            axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
-            splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+                indicator: indicators,
+                shape: 'circle',
+                center: ['50%', '50%'],
+                radius: radarChartRadius,
+                startAngle: 90,
+                splitNumber: 5,
+                axisName: { show: false }, 
+                splitArea: { show: false },
+                axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+                splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
             },
             angleAxis: {
-            type: 'category',
-            data: indicators.map(i => i.name),
-            boundaryGap: false,
-            axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false },
+                type: 'category',
+                data: indicators.map(i => i.name),
+                boundaryGap: false,
+                axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false },
             },
             radiusAxis: {
-            min: 0, max: 50, interval: 10,
-            axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false },
-            splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+                min: 0, max: 50, interval: 10,
+                axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false },
+                splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
             },
-            // **优化3: 使用 graphic 组件在中心添加带阴影的白色圆形**
             graphic: {
                 elements: [
                     {
@@ -814,21 +817,21 @@
                 silent: true,
                 startAngle: 90 + angleOffset,
                 data: reversedCategoryData.map((item, index) => {
-                const total = reversedCategoryData.length;
-                const anglePerItem = 360 / total;
-                const centerAngle = -anglePerItem * index - anglePerItem / 2;
-                let rotation = centerAngle+5;
-                if (centerAngle < -90 && centerAngle > -270) {
-                    rotation += 180;
-                }
-                return {
-                    value: 1, name: item.name, itemStyle: { color: item.color },
-                    label: { rotate: rotation }
-                };
+                    const total = reversedCategoryData.length;
+                    const anglePerItem = 360 / total;
+                    const centerAngle = -anglePerItem * index - anglePerItem / 2;
+                    let rotation = centerAngle+5;
+                    if (centerAngle < -90 && centerAngle > -270) {
+                        rotation += 180;
+                    }
+                    return {
+                        value: 1, name: item.name, itemStyle: { color: item.color },
+                        label: { rotate: rotation }
+                    };
                 }),
                 label: {
-                show: true, position: 'inside', formatter: '{b}',
-                color: '#FFFFFF', fontSize: 13, fontWeight: 'bold',
+                    show: true, position: 'inside', formatter: '{b}',
+                    color: '#FFFFFF', fontSize: 13, fontWeight: 'bold',
                 },
                 labelLine: { show: false },
                 itemStyle: { borderWidth: 0 },
@@ -841,7 +844,6 @@
         optionsMap.set("zttdznRef_copy", option);
         chartInstance.setOption(option);
     
-        // **优化1: 重写指标文字的旋转和对齐逻辑,确保文字始终正向易读**
         const graphicLabels = indicators.map((indicator, index) => {
             // 将文字放在半径为47的位置,比雷达图最大值50略小,比数据区大
             const point = chartInstance.convertToPixel({ polarIndex: 0 }, [22, index]);
@@ -887,14 +889,16 @@
         });
     
         // 将计算好的文字元素添加到图表中
-        chartInstance.setOption({
+        let option2 = {
             graphic: {
                 elements: [
                     ...option.graphic.elements, // 保留中心的圆形按钮
                     ...graphicLabels // 添加指标文字
                 ]
             }
-        });
+        };
+        optionsMap.set("zttdznRef_copy2", option2);
+        chartInstance.setOption(option2);
     }
     const resizeChart = () => {
         // dispose后重建,确保graphic元素能重新计算位置

+ 110 - 106
src/components/reportPdf/pdfUser.vue

@@ -495,80 +495,85 @@
         '领导力':require('@/assets/images/report/title_img_ldl.png')
     }
   
-    // --- 数据定义 ---
-    const indicators = [
-        // 目的与动机 (5)
-        { name: '享受', max: 50 }, { name: '对齐', max: 50 }, { name: '清晰度', max: 50 }, { name: '支持与协作', max: 50 }, { name: '热情与贡献', max: 50 },
-        // 领导力 (5)
-        { name: '启发性领导力', max: 50 }, { name: '领导勇气', max: 50 }, { name: '人际领导力', max: 50 }, { name: '协作赋能型领导力', max: 50 }, { name: '愿景与背景', max: 50 },
-        // 学习 (5)
-        { name: '反思性学习', max: 50 }, { name: '发展导向', max: 50 }, { name: '嵌入式学习', max: 50 }, { name: '学习相关性', max: 50 }, { name: '发展规划', max: 50 },
-        // 内部流程及系统与架构 (5)
-        { name: '合理资源配置', max: 50 }, { name: '团队决策', max: 50 }, { name: '问责机制', max: 50 }, { name: '系统效能', max: 50 }, { name: '团队效能', max: 50 },
-        // 关系 (5)
-        { name: '技能与专业知识', max: 50 }, { name: '价值观多样性与包容性', max: 50 }, { name: '尊重与信任', max: 50 }, { name: '安全沟通', max: 50 }, { name: '团队精神与凝聚力', max: 50 },
-        // 外部流程及系统与架构 (5)
-        { name: '环境意识', max: 50 }, { name: '利益相关者与客户协同', max: 50 }, { name: '人才与资源获取', max: 50 }, { name: '利益相关者与客户沟通', max: 50 }, { name: '关系中的信任与诚信', max: 50 },
-    ].reverse();
-    const categoryData = [
-        { name: '目的与动机', color: '#823479' },
-        { name: '领导力', color: '#898989' },
-        { name: '学习', color: '#AECDF3' },
-        { name: '内部流程及系统与架构', color: '#FFD64E' },
-        { name: '关系', color: '#193D59' },
-        { name: '外部流程及系统与架构', color: '#009191' },
-    ];
-    const reversedCategoryData = [...categoryData].reverse();
-    const teamData = [
-        {
-            name: '团队成员',
-            value: [42, 38, 45, 30, 35, 48, 32, 25, 40, 33, 22, 38, 41, 36, 29, 45, 31, 39, 27, 43, 25, 47, 33, 46, 28, 37, 44, 26, 49, 34].reverse(),
-            lineStyle: { color: '#9F6196' },
-            itemStyle: { color: '#FFD650' },
-            areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
-        },
-        {
-            name: '团队领导',
-            value: [35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 30, 45, 38].reverse(),
-            lineStyle: { color: '#33A7A7' },
-            itemStyle: { color: '#751E6A' },
-            areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
-        },
-        {
-            name: '利益相关者',
-            value: [39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 30, 45, 38].reverse(),
-            lineStyle: { color: '#FFD750' },
-            itemStyle: { color: '#012846' },
-            areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
-        },
-    ];
-    const generateBackgroundSeries = () => {
-        const series = [];
-        let current = 0;
-        reversedCategoryData.forEach((cat) => {
-            const data = new Array(indicators.length).fill('-');
-            for (let i = 0; i < 5; i++) {
-                data[current + i] = 50;
-            }
-            series.push({
-                type: 'bar', 
-                coordinateSystem: 'polar', 
-                stack: 'background',
-                silent: true, data: data,
-                barCategoryGap: '0%',
-                itemStyle: {
-                    color: cat.color,
-                    opacity: 0.8,
-                    borderColor: '#FFFFFF',
-                    borderWidth: 0
+    const getLDTData = () => {
+        const indicators = [
+            // 目的与动机 (5)
+            { name: '享受', max: 50 }, { name: '对齐', max: 50 }, { name: '清晰度', max: 50 }, { name: '支持与协作', max: 50 }, { name: '热情与贡献', max: 50 },
+            // 领导力 (5)
+            { name: '启发性领导力', max: 50 }, { name: '领导勇气', max: 50 }, { name: '人际领导力', max: 50 }, { name: '协作赋能型领导力', max: 50 }, { name: '愿景与背景', max: 50 },
+            // 学习 (5)
+            { name: '反思性学习', max: 50 }, { name: '发展导向', max: 50 }, { name: '嵌入式学习', max: 50 }, { name: '学习相关性', max: 50 }, { name: '发展规划', max: 50 },
+            // 内部流程及系统与架构 (5)
+            { name: '合理资源配置', max: 50 }, { name: '团队决策', max: 50 }, { name: '问责机制', max: 50 }, { name: '系统效能', max: 50 }, { name: '团队效能', max: 50 },
+            // 关系 (5)
+            { name: '技能与专业知识', max: 50 }, { name: '价值观多样性与包容性', max: 50 }, { name: '尊重与信任', max: 50 }, { name: '安全沟通', max: 50 }, { name: '团队精神与凝聚力', max: 50 },
+            // 外部流程及系统与架构 (5)
+            { name: '环境意识', max: 50 }, { name: '利益相关者与客户协同', max: 50 }, { name: '人才与资源获取', max: 50 }, { name: '利益相关者与客户沟通', max: 50 }, { name: '关系中的信任与诚信', max: 50 },
+        ].reverse();
+        const categoryData = [
+            { name: '目的与动机', color: '#823479' },
+            { name: '领导力', color: '#898989' },
+            { name: '学习', color: '#AECDF3' },
+            { name: '内部流程及系统与架构', color: '#FFD64E' },
+            { name: '关系', color: '#193D59' },
+            { name: '外部流程及系统与架构', color: '#009191' },
+        ];
+        const reversedCategoryData = [...categoryData].reverse();
+        const teamData = [
+            {
+                name: '团队成员',
+                value: [42, 38, 45, 30, 35, 48, 32, 25, 40, 33, 22, 38, 41, 36, 29, 45, 31, 39, 27, 43, 25, 47, 33, 46, 28, 37, 44, 26, 49, 34].reverse(),
+                lineStyle: { color: '#9F6196' },
+                itemStyle: { color: '#FFD650' },
+                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+            },
+            {
+                name: '团队领导',
+                value: [35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 30, 45, 38].reverse(),
+                lineStyle: { color: '#33A7A7' },
+                itemStyle: { color: '#751E6A' },
+                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+            },
+            {
+                name: '利益相关者',
+                value: [39, 43, 31, 36, 47, 25, 40, 32, 44, 26, 49, 34, 37, 22, 41, 35, 45, 33, 42, 28, 30, 41, 46, 29, 38, 48, 27, 30, 45, 38].reverse(),
+                lineStyle: { color: '#FFD750' },
+                itemStyle: { color: '#012846' },
+                areaStyle: { color: 'rgba(255, 255, 255, 0.6)' },
+            },
+        ];
+        const generateBackgroundSeries = () => {
+            const series = [];
+            let current = 0;
+            reversedCategoryData.forEach((cat) => {
+                const data = new Array(indicators.length).fill('-');
+                for (let i = 0; i < 5; i++) {
+                    data[current + i] = 50;
                 }
+                series.push({
+                    type: 'bar', 
+                    coordinateSystem: 'polar', 
+                    stack: 'background',
+                    silent: true, data: data,
+                    barCategoryGap: '0%',
+                    itemStyle: {
+                        color: cat.color,
+                        opacity: 0.8,
+                        borderColor: '#FFFFFF',
+                        borderWidth: 0
+                    }
+                });
+                current += 5;
             });
-            current += 5;
-        });
-        return series;
-    };
+            return series;
+        };
+        return { indicators, reversedCategoryData, teamData,generateBackgroundSeries };
+    }
+
     let chartInstance = null;
-    const initZttdznChart = () => {
+    const initZttdznChart = async () => {
+        let { indicators, reversedCategoryData, teamData, generateBackgroundSeries } = await getLDTData();
+
         chartInstance = echarts.init(document.getElementById('zttdznRef'));
         const radarChartRadius = '60%';
         const outerRingRadius = ['60%', '75%'];
@@ -576,32 +581,30 @@
     
         const option = {
             tooltip: { trigger: 'item' },
-            // legend: { bottom: 20, data: teamData.map(d => d.name) },
             polar: { center: ['50%', '50%'], radius: radarChartRadius },
             radar: {
-            indicator: indicators,
-            shape: 'circle',
-            center: ['50%', '50%'],
-            radius: radarChartRadius,
-            startAngle: 90,
-            splitNumber: 5,
-            axisName: { show: false }, // 隐藏默认的 axisName,我们将使用 graphic 自定义
-            splitArea: { show: false },
-            axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
-            splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+                indicator: indicators,
+                shape: 'circle',
+                center: ['50%', '50%'],
+                radius: radarChartRadius,
+                startAngle: 90,
+                splitNumber: 5,
+                axisName: { show: false }, 
+                splitArea: { show: false },
+                axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+                splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
             },
             angleAxis: {
-            type: 'category',
-            data: indicators.map(i => i.name),
-            boundaryGap: false,
-            axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false },
+                type: 'category',
+                data: indicators.map(i => i.name),
+                boundaryGap: false,
+                axisTick: { show: false }, axisLabel: { show: false }, axisLine: { show: false },
             },
             radiusAxis: {
-            min: 0, max: 50, interval: 10,
-            axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false },
-            splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+                min: 0, max: 50, interval: 10,
+                axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false },
+                splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
             },
-            // **优化3: 使用 graphic 组件在中心添加带阴影的白色圆形**
             graphic: {
                 elements: [
                     {
@@ -632,21 +635,21 @@
                 silent: true,
                 startAngle: 90 + angleOffset,
                 data: reversedCategoryData.map((item, index) => {
-                const total = reversedCategoryData.length;
-                const anglePerItem = 360 / total;
-                const centerAngle = -anglePerItem * index - anglePerItem / 2;
-                let rotation = centerAngle+5;
-                if (centerAngle < -90 && centerAngle > -270) {
-                    rotation += 180;
-                }
-                return {
-                    value: 1, name: item.name, itemStyle: { color: item.color },
-                    label: { rotate: rotation }
-                };
+                    const total = reversedCategoryData.length;
+                    const anglePerItem = 360 / total;
+                    const centerAngle = -anglePerItem * index - anglePerItem / 2;
+                    let rotation = centerAngle+5;
+                    if (centerAngle < -90 && centerAngle > -270) {
+                        rotation += 180;
+                    }
+                    return {
+                        value: 1, name: item.name, itemStyle: { color: item.color },
+                        label: { rotate: rotation }
+                    };
                 }),
                 label: {
-                show: true, position: 'inside', formatter: '{b}',
-                color: '#FFFFFF', fontSize: 13, fontWeight: 'bold',
+                    show: true, position: 'inside', formatter: '{b}',
+                    color: '#FFFFFF', fontSize: 13, fontWeight: 'bold',
                 },
                 labelLine: { show: false },
                 itemStyle: { borderWidth: 0 },
@@ -659,7 +662,6 @@
         optionsMap.set("zttdznRef_copy", option);
         chartInstance.setOption(option);
     
-        // **优化1: 重写指标文字的旋转和对齐逻辑,确保文字始终正向易读**
         const graphicLabels = indicators.map((indicator, index) => {
             // 将文字放在半径为47的位置,比雷达图最大值50略小,比数据区大
             const point = chartInstance.convertToPixel({ polarIndex: 0 }, [22, index]);
@@ -705,14 +707,16 @@
         });
     
         // 将计算好的文字元素添加到图表中
-        chartInstance.setOption({
+        let option2 = {
             graphic: {
                 elements: [
                     ...option.graphic.elements, // 保留中心的圆形按钮
                     ...graphicLabels // 添加指标文字
                 ]
             }
-        });
+        };
+        optionsMap.set("zttdznRef_copy2", option2);
+        chartInstance.setOption(option2);
     }
     const resizeChart = () => {
         // dispose后重建,确保graphic元素能重新计算位置