创新主体-领域布局接口对接

src/api/innovationSubject/overview.js

@@ -41,3 +41,22 @@ export function getOverallRanking(params) {
     params
   })
 }
+
+//创新主体主页:领域布局
+export function getResearchField(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/researchField`,
+    params
+  })
+}
+
+//创新主体主页:主体类型分类领域布局
+export function getResearchFieldSubjectType(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/researchFieldSubjectType`,
+    params
+  })
+}
+

src/views/innovationSubject/index.vue

@@ -240,7 +240,7 @@
 								</div>
 							</div>
 							<div class="select-box">
-								<el-select v-model="releaseTime" placeholder="2022" style="width: 120px"
+								<el-select v-model="releaseTime" pl aceholder="2022" style="width: 120px"
 									@change="handleGetOverallRanking">
 									<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
 										:value="item.value" />
@@ -308,7 +308,8 @@
 								</div>
 							</div>
 							<div class="select-box">
-								<el-select v-model="releaseTime" placeholder="2022" style="width: 120px">
+								<el-select v-model="releaseTime" placeholder="2022" style="width: 120px"
+									@change="handleGetResearchField(), handleGetResearchFieldSubjectType()">
 									<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
 										:value="item.value" />
 								</el-select>
@@ -324,7 +325,7 @@
 						</div>
 						<div class="center-footer-layout-content">
 							<div class="center-footer-layout-content-item">
-								<EChart :option="pieOption" autoresize :style="{ height: '370px', width: '750px' }" />
+								<EChart :option="pieOption(barOptionData)" autoresize :style="{ height: '370px', width: '750px' }" />
 								<div class="center-footer-elx-footer">
 									<img src="./assets/images/ai.png" alt="" />
 									<div class="center-footer-elx-footer-text">
@@ -335,7 +336,8 @@
 							</div>
 							<div style="width: 1px;height: 432px;background: rgba(234, 236, 238, 1);"></div>
 							<div class="center-footer-layout-content-item">
-								<EChart :option="raderOption" autoresize :style="{ height: '370px', width: '750px' }" />
+								<EChart :option="raderOption(raderOptionData)" autoresize
+									:style="{ height: '370px', width: '750px' }" />
 								<div class="center-footer-elx-footer">
 									<img src="./assets/images/ai.png" alt="" />
 									<div class="center-footer-elx-footer-text">
@@ -413,7 +415,9 @@ import {
 	getCountSubjectType,
 	getSubjectTypeList,
 	findListBySubjectTypeId,
-	getOverallRanking
+	getOverallRanking,
+	getResearchField,
+	getResearchFieldSubjectType
 } from "@/api/innovationSubject/overview.js";
 import setChart from "@/utils/setChart";
 
@@ -884,6 +888,43 @@ const releaseTimeList = ref([
 ]);
 const categoryList = ref(["创新主体排名", "研究布局"]);
 const activeCate = ref("创新主体排名");
+//研究领域布局情况
+const barOptionData = ref([])
+const handleGetResearchField = async () => {
+	try {
+		let params = {
+			year: releaseTime.value,
+		}
+		const res = await getResearchField(params);
+		console.log("研究领域布局情况", res);
+		if (res.code === 200 && res.data) {
+			// 提取 names 和 values
+			const names = res.data.map(item => item.areaName);
+			const values = res.data.map(item => item.amount); // 或者使用 item.percent，根据需求选择
+			const total = res.data.reduce((sum, item) => sum + item.amount, 0);
+			barOptionData.value = {
+				names, values, total
+			}
+		}
+	} catch (error) {
+		console.error("获取研究领域布局情况error", error);
+	}
+};
+const raderOptionData = ref([])
+const handleGetResearchFieldSubjectType = async () => {
+	try {
+		let params = {
+			year: releaseTime.value,
+		}
+		const res = await getResearchFieldSubjectType(params);
+		console.log("研究领域布局情况", res);
+		if (res.code === 200 && res.data) {
+			raderOptionData.value = res.data
+		}
+	} catch (error) {
+		console.error("获取研究领域布局情况error", error);
+	}
+};
 
 const areaList = ref([
 	{
@@ -965,6 +1006,8 @@ onMounted(async () => {
 	handleGetOverallRanking()
 
 	handleFindListBySubjectTypeId()
+	handleGetResearchField()
+	handleGetResearchFieldSubjectType()
 	let chart1 = getPieChart(chart1Data.value, colorList);
 	setChart(chart1, "chart1");
 });

src/views/innovationSubject/utils/charts.js

 import * as echarts from "echarts";
 
-var data = [
-  {
-    name: "人工智能与信息技术",
-    value: 27
-  },
-  {
-    name: "生物医学与健康",
-    value: 22
-  },
-  {
-    name: "能源与环境技术",
-    value: 18
-  },
-  {
-    name: "先进制造与材料",
-    value: 15
-  },
-  {
-    name: "国家安全与国防",
-    value: 12
-  },
-  {
-    name: "航空航天",
-    value: 8
-  }
-];
+
 // 计算总和
 function getTotal(data) {
-return data.reduce((sum, item) => sum + item.value, 0);
+  return data.reduce((sum, item) => sum + item.value, 0);
 };
-
-export const pieOption = {
+export const pieOption = (data) => {
+  console.log(data, 'datadatadata')
+  // 颜色数组
+  const colors = [
+    'rgba(105, 177, 255, 1)',
+    'rgba(255, 236, 61, 1)',
+    'rgba(135, 232, 222, 1)',
+    'rgba(133, 165, 255, 1)',
+    'rgba(255, 120, 117, 1)',
+    'rgba(179, 127, 235, 1)',
+    'rgba(255, 187, 120, 1)',
+    'rgba(120, 255, 180, 1)',
+    'rgba(255, 150, 150, 1)'
+  ];
+  const seriesData = data.names.map((name, index) => ({
+    name,
+    value: data.values[index],
+    itemStyle: { color: colors[index % colors.length] }
+  }));
+  const option = {
     tooltip: {
       trigger: 'item'
     },
@@ -40,18 +33,18 @@ export const pieOption = {
       x: 'right',
       y: 'center',
       align: 'left',
-    left:'50%',
-    data: data.map(item => item.name),
+      left: '50%',
+      data: data.names,
       textStyle: { // 图例字体样式
         color: "rgba(59, 65, 75, 1)",
         fontSize: 16
       },
-    formatter: function(name) {
-    var total = getTotal(data);
-    var item = data.find(item => item.name === name);
-    var percentage = ((item.value / total) * 100).toFixed(2);
-    return `${name} ${percentage}%`;
-    }
+      // formatter: function (name) {
+      //   var total = data.total;
+      //   var item = data.find(item => item.name === name);
+      //   var percentage = ((item.value / total) * 100).toFixed(2);
+      //   return `${name} ${percentage}%`;
+      // }
     },
     series: [
       {
@@ -68,41 +61,12 @@ export const pieOption = {
         labelLine: {
           show: false
         },
-      data: [
-        {
-          name: "人工智能与信息技术",
-          value: 27,
-          itemStyle:{color: 'rgba(105, 177, 255, 1)'}
-        },
-        {
-          name: "生物医学与健康",
-          value: 22,
-          itemStyle:{color: 'rgba(255, 236, 61, 1)'}
-        },
-        {
-          name: "能源与环境技术",
-          value: 18,
-          itemStyle:{color: 'rgba(135, 232, 222, 1)'}
-        },
-        {
-          name: "先进制造与材料",
-          value: 15,
-          itemStyle:{color: 'rgba(133, 165, 255, 1)'}
-        },
-        {
-          name: "国家安全与国防",
-          value: 12,
-          itemStyle:{color: 'rgba(255, 120, 117, 1)'}
-        },
-        {
-          name: "航空航天",
-          value: 8,
-          itemStyle:{color: 'rgba(179, 127, 235, 1)'}
+        data: seriesData
       }
     ]
-    }
-  ]
-};
+  };
+  return option
+}
 
 var data1 = [
   {
@@ -134,13 +98,13 @@ export const pieOption1 = {
     x: 'right',
     y: 'center',
     align: 'left',
-    left:'60%',
+    left: '60%',
     data: data1.map(item => item.name),
     textStyle: { // 图例字体样式
       color: "rgba(59, 65, 75, 1)",
       fontSize: 16
     },
-    formatter: function(name) {
+    formatter: function (name) {
       var total = getTotal(data1);
       var item = data1.find(item => item.name === name);
       var percentage = ((item.value / total) * 100).toFixed(2);
@@ -166,58 +130,84 @@ export const pieOption1 = {
         {
           name: "捐赠基金",
           value: 27,
-          itemStyle:{color: 'rgba(105, 177, 255, 1)'}
+          itemStyle: { color: 'rgba(105, 177, 255, 1)' }
         },
         {
           name: "政府拨款",
           value: 22,
-          itemStyle:{color: 'rgba(255, 236, 61, 1)'}
+          itemStyle: { color: 'rgba(255, 236, 61, 1)' }
         },
         {
           name: "企业合作",
           value: 18,
-          itemStyle:{color: 'rgba(135, 232, 222, 1)'}
+          itemStyle: { color: 'rgba(135, 232, 222, 1)' }
         },
         {
           name: "学费收入",
           value: 15,
-          itemStyle:{color: 'rgba(133, 165, 255, 1)'}
+          itemStyle: { color: 'rgba(133, 165, 255, 1)' }
         },
         {
           name: "其他来源",
           value: 12,
-          itemStyle:{color: 'rgba(255, 120, 117, 1)'}
+          itemStyle: { color: 'rgba(255, 120, 117, 1)' }
         }
       ]
     }
   ]
 };
 
+export const raderOption = (data) => {
+  // 提取所有可能的 areaName
+  const allAreaNames = new Set();
+  data.forEach(subject => {
+    subject.areaVoList.forEach(area => {
+      allAreaNames.add(area.areaName);
+    });
+  });
+  const indicatorNames = Array.from(allAreaNames);
+
+  // 定义雷达图的指标最大值（可以根据实际数据调整）
+  const indicatorMaxValues = {};
+  indicatorNames.forEach(name => {
+    indicatorMaxValues[name] = 5; // 假设每个指标的最大值为 5
+  });
 
-export const raderOption = {
+  // 生成雷达图的 indicator 配置
+  const radarIndicators = indicatorNames.map(name => ({
+    name,
+    max: indicatorMaxValues[name]
+  }));
+
+  // 为每个 subjectTypeName 生成雷达图数据
+  const radarSeriesData = data.map(subject => {
+    const values = indicatorNames.map(indicator => {
+      const area = subject.areaVoList.find(a => a.areaName === indicator);
+      return area ? area.amount : 0; // 如果存在该指标，取其 amount 值，否则为 0
+    });
+    return {
+      value: values,
+      name: subject.subjectTypeName,
+      areaStyle: { color: `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.2)` }
+    };
+  });
+  // 雷达图配置
+  const option = {
     title: { text: '' },
     legend: {
       icon: 'circle',
-      orient: 'vertical',      // 纵向排列
-      right: 50,                // 贴右边
-      top: 'center',           // 垂直居中
-      align: 'left',           // 文字在图标左侧
-      textStyle: { // 图例字体样式
+      orient: 'vertical',
+      right: 50,
+      top: 'center',
+      align: 'left',
+      textStyle: {
         color: "rgba(59, 65, 75, 1)",
         fontSize: "16px"
       }
-      
     },
     radar: {
-      radius: '60%',          // 关键：缩小整个雷达
-      indicator: [
-        { name: '能源领域', max: 6500 },
-        { name: '集成电路', max: 16000 },
-        { name: '人工智能', max: 30000 },
-        { name: '通信网络', max: 38000 },
-        { name: '量子科技', max: 52000 },
-        { name: '生物科技', max: 25000 }
-      ],
+      radius: '60%',
+      indicator: radarIndicators,
       axisName: {
         formatter: '{value}',
         color: 'rgba(59, 65, 75, 1)',
@@ -229,32 +219,13 @@ export const raderOption = {
       {
         name: 'Budget vs spending',
         type: 'radar',
-        data: [
-          {
-            value: [4200, 3000, 20000, 35000, 50000, 18000],
-            name: '研究型大学',
-            areaStyle: { color: 'rgba(5, 95, 194, 0.2)' }
-          },
-          {
-            value: [5000, 14000, 28000, 26000, 42000, 21000],
-            name: '国家实验室',
-            areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
-          },
-          {
-            value: [4000, 14000, 18000, 21000, 32000, 10000],
-            name: '科技企业',
-            areaStyle: { color: 'rgba(179, 127, 235, 0.2)' }
-          },
-          {
-            value: [4000, 14000, 18000, 21000, 32000, 10000],
-            name: '国防承包商',
-            areaStyle: { color: 'rgba(33, 129, 57, 0.2)' }
-          }
-        ]
+        data: radarSeriesData
       }
     ]
   };
+  return option;
 
+}
 export const raderOption1 = {
   grid: {
     top: '3%',
@@ -293,7 +264,7 @@ export const raderOption1 = {
       ]
     }
   ]
-  };
+};
 
 export const barOption = {
   tooltip: {
@@ -326,7 +297,7 @@ export const barOption = {
       // fontSize: 22,
       // fontWeight: 400
     },
-        data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
+    data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
   }],
 
   yAxis: {
@@ -355,7 +326,7 @@ export const barOption = {
   series: [
     {
       name: "专利数量",
-            data: [80, 90, 110, 130, 140, 160, 200,250,300,340],
+      data: [80, 90, 110, 130, 140, 160, 200, 250, 300, 340],
       type: "bar",
       barWidth: 20,
       itemStyle: {
@@ -366,13 +337,13 @@ export const barOption = {
         ])
         // borderRadius: [6, 6, 0, 0]
       },
-            label:{
-                show:false,
-                position:'top',
-                textStyle:{
-                    fontSize:'20px',
-                    fontWeight:400,
-                    color:'rgba(255, 255, 255, 1)'
+      label: {
+        show: false,
+        position: 'top',
+        textStyle: {
+          fontSize: '20px',
+          fontWeight: 400,
+          color: 'rgba(255, 255, 255, 1)'
         }
 
       }
@@ -403,7 +374,7 @@ export const lineChart = {
     axisLine: {
       show: false
     },
-      data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
+    data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
   },
   yAxis: {
     type: 'value',
@@ -421,7 +392,7 @@ export const lineChart = {
   color: ['rgba(255, 149, 77, 1)'],
   series: [
     {
-        data: [50,60,80,100,110,140,180,260,280,330],
+      data: [50, 60, 80, 100, 110, 140, 180, 260, 280, 330],
       type: 'line',
       emphasis: {
         focus: 'series'
@@ -463,7 +434,7 @@ export const lineChart1 = {
     axisLine: {
       show: false
     },
-      data: ["2016","2017","2018","2019", "2020", "2021", "2022", "2023", "2024", "2025"],
+    data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
   },
   yAxis: {
     type: 'value',
@@ -481,7 +452,7 @@ export const lineChart1 = {
   color: ['rgba(33, 129, 57, 1)'],
   series: [
     {
-        data: [50,60,80,100,110,140,180,260,280,330],
+      data: [50, 60, 80, 100, 110, 140, 180, 260, 280, 330],
       type: 'line',
       emphasis: {
         focus: 'series'
@@ -501,8 +472,8 @@ export const lineChart1 = {
 };
 
 
-const nameList = ["教育学院","文理学院","法学院","商学院","工程学院","医学院"];
-const valueList = [21,21,25,79,95,109];
+const nameList = ["教育学院", "文理学院", "法学院", "商学院", "工程学院", "医学院"];
+const valueList = [21, 21, 25, 79, 95, 109];
 
 export const horizontalBaroption = {
   grid: {
@@ -583,4 +554,4 @@ export const horizontalBaroption = {
       barBorderRadius: 4,
     }
   }]
-    };
+};
\ No newline at end of file