|
@@ -677,80 +677,85 @@
|
|
'领导力':require('@/assets/images/report/title_img_ldl.png')
|
|
'领导力':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;
|
|
let chartInstance = null;
|
|
- const initZttdznChart = () => {
|
|
|
|
|
|
+ const initZttdznChart = async () => {
|
|
|
|
+ let { indicators, reversedCategoryData, teamData, generateBackgroundSeries } = await getLDTData();
|
|
|
|
+
|
|
chartInstance = echarts.init(document.getElementById('zttdznRef'));
|
|
chartInstance = echarts.init(document.getElementById('zttdznRef'));
|
|
const radarChartRadius = '60%';
|
|
const radarChartRadius = '60%';
|
|
const outerRingRadius = ['60%', '75%'];
|
|
const outerRingRadius = ['60%', '75%'];
|
|
@@ -758,32 +763,30 @@
|
|
|
|
|
|
const option = {
|
|
const option = {
|
|
tooltip: { trigger: 'item' },
|
|
tooltip: { trigger: 'item' },
|
|
- // legend: { bottom: 20, data: teamData.map(d => d.name) },
|
|
|
|
polar: { center: ['50%', '50%'], radius: radarChartRadius },
|
|
polar: { center: ['50%', '50%'], radius: radarChartRadius },
|
|
radar: {
|
|
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: {
|
|
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: {
|
|
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: {
|
|
graphic: {
|
|
elements: [
|
|
elements: [
|
|
{
|
|
{
|
|
@@ -814,21 +817,21 @@
|
|
silent: true,
|
|
silent: true,
|
|
startAngle: 90 + angleOffset,
|
|
startAngle: 90 + angleOffset,
|
|
data: reversedCategoryData.map((item, index) => {
|
|
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: {
|
|
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 },
|
|
labelLine: { show: false },
|
|
itemStyle: { borderWidth: 0 },
|
|
itemStyle: { borderWidth: 0 },
|
|
@@ -841,7 +844,6 @@
|
|
optionsMap.set("zttdznRef_copy", option);
|
|
optionsMap.set("zttdznRef_copy", option);
|
|
chartInstance.setOption(option);
|
|
chartInstance.setOption(option);
|
|
|
|
|
|
- // **优化1: 重写指标文字的旋转和对齐逻辑,确保文字始终正向易读**
|
|
|
|
const graphicLabels = indicators.map((indicator, index) => {
|
|
const graphicLabels = indicators.map((indicator, index) => {
|
|
// 将文字放在半径为47的位置,比雷达图最大值50略小,比数据区大
|
|
// 将文字放在半径为47的位置,比雷达图最大值50略小,比数据区大
|
|
const point = chartInstance.convertToPixel({ polarIndex: 0 }, [22, index]);
|
|
const point = chartInstance.convertToPixel({ polarIndex: 0 }, [22, index]);
|
|
@@ -887,14 +889,16 @@
|
|
});
|
|
});
|
|
|
|
|
|
// 将计算好的文字元素添加到图表中
|
|
// 将计算好的文字元素添加到图表中
|
|
- chartInstance.setOption({
|
|
|
|
|
|
+ let option2 = {
|
|
graphic: {
|
|
graphic: {
|
|
elements: [
|
|
elements: [
|
|
...option.graphic.elements, // 保留中心的圆形按钮
|
|
...option.graphic.elements, // 保留中心的圆形按钮
|
|
...graphicLabels // 添加指标文字
|
|
...graphicLabels // 添加指标文字
|
|
]
|
|
]
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ };
|
|
|
|
+ optionsMap.set("zttdznRef_copy2", option2);
|
|
|
|
+ chartInstance.setOption(option2);
|
|
}
|
|
}
|
|
const resizeChart = () => {
|
|
const resizeChart = () => {
|
|
// dispose后重建,确保graphic元素能重新计算位置
|
|
// dispose后重建,确保graphic元素能重新计算位置
|