From 637de14e0eaeaca982ce47d4a4829f1b26f57424 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Czhuzihan=E2=80=9D=E2=80=83?= <“772644120@qq.com”> Date: Sat, 5 Jul 2025 15:52:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E7=A8=8B=E5=9B=BE=E8=A1=A8=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=B9=B4=E9=99=90=E7=BB=B4=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dashboard.vue | 168 +++++++++++++++++++---------------- 1 file changed, 93 insertions(+), 75 deletions(-) diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue index b621157..6e124e8 100644 --- a/src/components/Dashboard.vue +++ b/src/components/Dashboard.vue @@ -232,8 +232,9 @@ const teacherServiceData = ref({ }) // 工程研究中心图表数据 const labData = ref({ - datax: [], - datay: [] + datax: [], // 存储 fieldName + series: [], // 存储 ECharts series 数组 + years: [] // 存储年份列表 }) const labLineData = ref({ datax: [], @@ -554,24 +555,62 @@ const updateTeacherServiceChart = () => { } }; +// 定义一个颜色数组，用于不同年份的柱子 +const barColors = ['#4080ff', '#d7fc33', 'rgb(63, 196, 15)']; // 蓝色，金色，紫色 + +const initEngineeringKeyFields = (data) => { + const fieldNames = data.map(item => item.fieldName); + + const years = data.length > 0 ? Array.from(new Set(data.flatMap(item => item.yearData.map(y => y.year)))) : []; + years.sort((a, b) => a - b); // 确保年份排序 + + const series = years.map((year, index) => { // 添加 index 参数 + return { + name: year.toString(), + type: 'bar', + barWidth: '15%', + // 根据 index 从颜色数组中获取颜色 + itemStyle: { + color: barColors[index % barColors.length] // 确保颜色循环使用 + }, + data: fieldNames.map(fieldName => { + const item = data.find(d => d.fieldName === fieldName); + const yearData = item ? item.yearData.find(y => y.year === year) : null; + return yearData ? yearData.quantity : 0; + }), + emphasis: { + focus: 'series' + } + }; + }); + + labData.value.datax = fieldNames; + labData.value.series = series; + labData.value.years = years; + console.log("Processed labData.value:", labData.value); +}; const fetchLabData = async () => { try { const res = await fetch(`${getApiBaseUrl()}/admin-api/pg/research-data-dashboard/get-release`); - if (res) { + if (res) { const data = await res.json(); - // 处理 keyFields 数据 const keyFields = data.data.keyFields || []; - const datax = keyFields.map(item => item.fieldName); - const datay = keyFields.map(item => item.quantity); - labData.value = { - datax, - datay - }; - // 数据更新后，手动更新图表 + const processedData = keyFields.map((group) => { + const firstItem = group[0]; + const yearData = group.map((item) => ({ + year: item.year, + quantity: item.quantity + })); + return { + fieldName: firstItem.fieldName, + yearData + }; + }); + initEngineeringKeyFields(processedData); updateLabBarChart(); } else { - console.error('获取工程研究中心数据失败:', response.statusText); + console.error('获取工程研究中心数据失败:', res.statusText); } } catch (error) { console.error('获取工程研究中心数据出错:', error); @@ -582,9 +621,8 @@ const fetchLabData = async () => { const fetchLabData2 = async () => { try { const res = await fetch(`${getApiBaseUrl()}/admin-api/pg/changes-in-achievements/get-release`); - if (res) { + if (res) { const data = await res.json(); - // 处理 keyFields 数据 const afterAnalysis = data.data.afterAnalysis || []; const datax = afterAnalysis.map(item => item.year); const datay = afterAnalysis.map(item => item.quantity); @@ -592,10 +630,9 @@ const fetchLabData2 = async () => { datax, datay }; - // 数据更新后，手动更新图表 updateLabLineChart(); } else { - console.error('获取工程研究中心数据失败:', response.statusText); + console.error('获取工程研究中心数据失败:', res.statusText); } } catch (error) { console.error('获取工程研究中心数据出错:', error); @@ -605,19 +642,26 @@ const fetchLabData2 = async () => { }; // 添加更新工程研究中心柱状图的函数 const updateLabBarChart = () => { -const labBarChart = echarts.getInstanceByDom(labBarChartRef.value); -if (labBarChart) { - labBarChart.setOption({ - xAxis: { - data: labData.value.datax - }, - series: [ - { - data: labData.value.datay - } - ] - }); -} + const labBarChart = echarts.getInstanceByDom(labBarChartRef.value); + if (labBarChart) { + console.log("Updating labBarChart with:", { + xAxisData: labData.value.datax, + seriesData: labData.value.series + }); + labBarChart.setOption({ + legend: { + data: labData.value.years.map(String), + textStyle: { color: '#fff' } + }, + xAxis: { + data: labData.value.datax, + axisLabel: { + textStyle: { color: '#fff' } // 标签颜色 + } + }, + series: labData.value.series + }, true); + } } const updateLabLineChart = () => { const labLineChart = echarts.getInstanceByDom(labLineChartRef.value); @@ -750,26 +794,37 @@ const initCharts = () => { // 工程研究中心柱状图（调整为占满全部宽度） const labBarChart = echarts.init(labBarChartRef.value) - const generateRandomData = (originalData) => { - return originalData.map(item => { - const randomOffset = Math.floor(Math.random() * 20) - 10; // 生成 -8 到 8 之间的随机整数 - return item + randomOffset; - }); -}; labBarChart.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, + legend: { + data: labData.value.years.map(String), + textStyle: { color: '#fff' } //确保图例文字颜色 + }, grid: { left: '3%', right: '4%', top: '10%', - bottom: '5%', + bottom: '15%', // 增加底部空间以容纳旋转的标签 containLabel: true }, xAxis: { type: 'category', data: labData.value.datax, axisLine: { lineStyle: { color: '#fff' } }, - axisLabel: { color: '#fff' } + axisLabel: { + color: '#fff', + // 换行显示，每 4 个字符换行 + formatter: function (params) { + return params.split('').reduce((acc, char, index) => { + if (index % 9 === 0 && index > 0) { + return acc + '\n' + char; + } + return acc + char; + }, ''); + }, + // 缩小字体大小 + fontSize: 10, + } }, yAxis: { type: 'value', @@ -784,44 +839,7 @@ const initCharts = () => { interval: 1 } }, - series: [ - { - name: '2022', - type: 'bar', - data: generateRandomData(labData.value.datay), - itemStyle: { color: '#4080ff' }, - barWidth: '15%', - label: { - show: true, - position: 'top', - color: '#fff' - } - }, - { - name: '2023', - type: 'bar', - data: generateRandomData(labData.value.datay), - itemStyle: { color: '#d7fc33' }, - barWidth: '15%', - label: { - show: true, - position: 'top', - color: '#fff' - } - }, - { - name: '2024', - type: 'bar', - data: labData.value.datay, - itemStyle: { color: 'rgb(63, 196, 15)' }, - barWidth: '15%', - label: { - show: true, - position: 'top', - color: '#fff' - } - } - ] + series: labData.value.series }) // 工程研究中心折线图（调整为占满全部宽度）