工程图表增加年限维度

src/components/Dashboard.vue

@@ -232,8 +232,9 @@ const teacherServiceData = ref({
 })
 // 工程研究中心图表数据
 const labData = ref({
-  datax: [],
+  datax: [], // 存储 fieldName
-  datay: []
+  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 processedData = keyFields.map((group) => {
-      const datay = keyFields.map(item => item.quantity);
+        const firstItem = group[0];
-      labData.value = {
+        const yearData = group.map((item) => ({
-        datax,
+          year: item.year,
-        datay
+          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);
+  const labBarChart = echarts.getInstanceByDom(labBarChartRef.value);
-if (labBarChart) {
+  if (labBarChart) {
-  labBarChart.setOption({
+    console.log("Updating labBarChart with:", {
-    xAxis: {
+      xAxisData: labData.value.datax,
-      data: labData.value.datax
+      seriesData: labData.value.series
-    },
+    });
-    series: [
+    labBarChart.setOption({
-      {
+      legend: {
-        data: labData.value.datay
+          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: [
+    series: labData.value.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'
-        }
-      }
-    ]
   })
 
   // 工程研究中心折线图（调整为占满全部宽度）