|  | @@ -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元素能重新计算位置
 |