概览首页样式完善

src/views/overView/component/ResourceSupport.vue

@@ -3,9 +3,9 @@
   <div class="resource-box">
     <DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader>
     <div style="margin-top: 20px;height: 450px;display: flex;">
-      <div class="resource-content" style="width: 47.5%; display: block;">
+      <div class="resource-content" style="width: 49.25%; display: block;">
         <div class="item-header">
-          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <img class="item-header-icon" src="@/assets/images/icon/resource-icon-1.png"></img>
           <div class="item-header-text">中美博弈资源新闻动态</div>
           <div class="item-header-right"> 更多 +</div>
         </div>
@@ -24,9 +24,9 @@
           </el-timeline>
         </div>
       </div>
-      <div class="resource-content" style="width: 47.5%;margin-left: 5%;">
+      <div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
         <div class="item-header">
-          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <img class="item-header-icon" src="@/assets/images/icon/resource-icon-2.png"></img>
           <div class="item-header-text" style="width: 130px;">创新主体排名</div>
           <el-radio-group v-model="InnovationRankingBtn" size="small" @change="handleInnovationRankingBtn">
             <el-radio-button value="enterprise" border>科技企业
@@ -72,7 +72,7 @@
       </div>
     </div>
     <div style="margin-top: 20px;height: 450px;display: flex;">
-      <div class="resource-content" style="width: 47.5%; display: block;">
+      <div class="resource-content" style="width: 49.25%; display: block;">
         <div class="item-header">
           <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
           <div class="item-header-text">研发投入情况</div>
@@ -86,9 +86,9 @@
         <div style="display: flex;height: calc(100% - 60px);" id="char3">
         </div>
       </div>
-      <div class="resource-content" style="width: 47.5%;margin-left: 5%;">
+      <div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
         <div class="item-header">
-          <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
+          <img class="item-header-icon" src="@/assets/images/icon/thematic-icon-3.png"></img>
           <div class="item-header-text">研发投入领域</div>
           <div class="item-header-right"> 查看数据源> </div>
         </div>
@@ -102,20 +102,22 @@
       </div>
     </div>
     <div style="margin-top: 20px;height: 450px;display: flex;">
-      <div class="resource-content" style="width: 47.5%; display: block;">
+      <div class="resource-content" style="width: 49.25%; display: block;">
         <div class="item-header">
           <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
           <div class="item-header-text">专利申请情况</div>
         </div>
         <div class="item-header-divider"></div>
+
         <el-select v-model="patentSelect" placeholder="" style="width: 100px;float: right;margin-right: 20px;"
           size="small">
           <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
-        <div style="display: flex;height: calc(100% - 60px);" id="char5">
+
+        <div style="display: flex;height: calc(100% - 60px);width: 100%;" id="char5">
         </div>
       </div>
-      <div class="resource-content" style="width: 47.5%;margin-left: 5%;">
+      <div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
         <div class="item-header">
           <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
           <div class="item-header-text">论文发表情况</div>
@@ -126,7 +128,7 @@
           size="small">
           <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
-        <div style="display: flex;height: calc(100% - 60px);" id="char6">
+        <div style="display: flex;height: calc(100% - 60px);width: 100%;" id="char6">
         </div>
       </div>
     </div>
@@ -318,7 +320,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .divide1 {
-  margin-top: 64px;
+  margin-top: 30px;
   margin-bottom: 36px;
 }
 

src/views/overView/component/strengthComparison.vue

@@ -6,19 +6,26 @@
     <div style="margin-top: 20px;display: flex;">
 
       <div class="resource-content" style="width:100%">
-        <el-radio-group v-model="strengthBtn" size="small" @change="handlestrengthBtn" style="margin-left: 15%;">
-          <el-radio-button value="potential" border>竞争潜力
-          </el-radio-button>
-          <el-radio-button value="potency" border>竞争效力</el-radio-button>
-          <el-radio-button value="strength" border>竞争实力
-          </el-radio-button>
-        </el-radio-group>
-        <div style="display: flex;height: 350px;">
-          <div style="width: 50%;height: 100%;" id="char7">
+
+        <div style="display: flex;height: 500px;">
+          <div style="width: 50%;height: 500px">
+            <div style="padding: 20px;width: 100%;text-align: center;">
+              <el-radio-group v-model="strengthBtn" size="small" @change="handlestrengthBtn">
+                <el-radio-button value="potential" border>竞争潜力
+                </el-radio-button>
+                <el-radio-button value="potency" border>竞争效力</el-radio-button>
+                <el-radio-button value="strength" border>竞争实力
+                </el-radio-button>
+              </el-radio-group>
+            </div>
+
+            <div style="width: 100%;height: 450px;" id="char7">
+
+            </div>
           </div>
-          <div style="width: 50%;height: 100%;text-align: center;padding:0 15px ;position: relative;">
+          <div style="width: 50%;height: 550px;text-align: center;padding:0 15px ;position: relative;">
             <div class="title-box">
-              <div style="display: flex;width: 100%;">
+              <div style="display: flex;width: 100%">
                 <div class="unite">
                   <img class="unite-icon" src="@/assets/images/icon/united_USA.png" alt="" />
                   <div class="unite-title">
@@ -41,7 +48,7 @@
                   <el-progress :percentage="data[0].value[0]" :stroke-width="20" class="left-progress"
                     :show-text="false" />
                   <span class="inner-text" style="font-size: 24px;line-height: 40px;top: 20px;">{{ data[0].value[0]
-                    }}%</span>
+                  }}%</span>
                 </div>
 
                 <!-- 右侧进度条 -->
@@ -49,7 +56,7 @@
                   <el-progress :percentage="data[0].value[1]" :stroke-width="20" class="right-progress"
                     :show-text="false" />
                   <span class="inner-text" style="font-size: 24px;line-height: 40px;top: 20px;">{{ data[0].value[0]
-                    }}%</span>
+                  }}%</span>
                 </div>
               </div>
             </div>
@@ -138,15 +145,31 @@ const data = ref([
   }
 ])
 onMounted(() => {
-  let char7 = radarChart3()
-  setChart(char7, "char7");
+  // let char7 = radarChart3()
+  // 2. 传入容器，生成配置
+  // 1. 初始化容器
+  const dom = document.getElementById('char7');
+  const myChart = echarts.init(dom);
+
+  // 2. 传入容器，生成配置
+  const option = radarChart3(
+    ['研究人员总数', '每万人研究人员数', '每万研究人员研发经费投入额',
+      '每万人研发经费投入额', '研发经费占GDP的比重', '研发经费投入总额'],
+    [4200, 3000, 20000, 35000, 50000, 18000],
+    false,
+    dom
+  );
+
+  myChart.setOption(option);
+
+  // setChart(option, "char7");
 
 });
 </script>
 
 <style lang="scss" scoped>
 .divide1 {
-  margin-top: 64px;
+  margin-top: 30px;
   margin-bottom: 36px;
 }
 
@@ -231,6 +254,7 @@ onMounted(() => {
 .title-box {
   height: 100px;
   width: 100%;
+  margin-top: 20px;
   box-sizing: border-box;
   border: 1px solid rgba(234, 236, 238, 1);
   border-radius: 4px;

src/views/overView/index.vue

@@ -31,7 +31,8 @@
 											{{ organizationNews[organizationNewsShow].title }}
 										</div>
 										<div class="item-card-content-title-small">
-											{{ organizationNews[organizationNewsShow].time + ' ' + organizationNews[organizationNewsShow].adress }}
+											{{ organizationNews[organizationNewsShow].time + ' ' +
+												organizationNews[organizationNewsShow].adress }}
 										</div>
 									</div>
 									<img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image" alt="">
@@ -41,8 +42,8 @@
 									{{ organizationNews[organizationNewsShow].content }}
 								</div>
 								<div style="display: flex">
-									<div class="item-card-content-tag" v-for="tag,index in organizationNews[organizationNewsShow].tag" :key="index"
-										:style="{ color: tag.textColor, background: tag.color, borderColor: tag.color }">
+									<div class="item-card-content-tag" v-for="tag, index in organizationNews[organizationNewsShow].tag"
+										:key="index" :style="{ color: tag.textColor, background: tag.color, borderColor: tag.color }">
 										{{ tag.text }}
 									</div>
 								</div>
@@ -54,7 +55,7 @@
 						</div>
 						<div class="item-card-right ">
 							<div class="item-list">
-								<div v-for="organizationItem,index in organizationList" :key="index" style="height: 40px">
+								<div v-for="organizationItem, index in organizationList" :key="index" style="height: 40px">
 									<div style="display: flex;margin: 10px">
 										<div class="item-list-punblier">
 											{{ organizationItem.punblier }}
@@ -112,7 +113,7 @@
 					</div>
 					<div class="item-header-divider"></div>
 					<div class="news-box">
-						<div v-for="item,index in newsList" :key="index" class="news-box-item">
+						<div v-for="item, index in newsList" :key="index" class="news-box-item">
 							<div style="	display: flex;">
 								<img :src="item.image" />
 								<div style="padding: 0 10px ;">
@@ -136,7 +137,7 @@
 					</div>
 					<div class="item-header-divider"></div>
 					<div class="character-box">
-						<div class="character-item" v-for="item,index in characterDynamics" :key="index">
+						<div class="character-item" v-for="item, index in characterDynamics" :key="index">
 							<img :src="item.image" class="character-image" />
 							<div class="talk-box">
 								<div style="display: flex;">
@@ -368,7 +369,7 @@ function changeOrganizationNews(type) {
 			: (organizationNewsShow.value = organizationNewsShow.value + 1);
 	}
 }
-onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style lang="scss" scoped>
@@ -427,7 +428,7 @@ onMounted(() => {});
 
 		/* 子级：仅上色居中，方便观察 */
 		.item {
-			height: 450px;
+			height: 500px;
 			justify-content: center;
 			box-sizing: border-box;
 			border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1));

src/views/overView/js/radarChart3.js

-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
-const getBarChart = (nameList, valueList, isPer) => {
+/**
+ * 计算雷达图最外圈半径（px）
+ * @param {HTMLDivElement} dom  图表容器
+ * @param {number} radarRadius  配置项里 radar.radius，默认 75%
+ */
+function getOuterRadius(dom, radarRadius = 75) {
+  // 容器短边的一半 * 百分比
+  const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
+  return (minSide / 2) * (radarRadius / 100);
+}
+
+/**
+ * 生成“文字被环穿过”的雷达图配置
+ * @param {string[]} nameList   指标名称（与 indicator 顺序保持一致）
+ * @param {number[]} valueList  数据值
+ * @param {boolean}  isPer       是否百分比（示例里未用到，可留扩展）
+ * @param {HTMLDivElement} dom  图表容器（用于计算半径，必须传）
+ */
+const getBarChart = (nameList, valueList, isPer, dom) => {
+  // 1. 基础雷达图配置
   const option = {
     title: { text: '' },
     legend: {
@@ -13,7 +32,8 @@ const getBarChart = (nameList, valueList, isPer) => {
       data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
     },
     radar: {
-      shape: 'circle',          // ① 参考线变弧线
+      shape: 'circle',
+      radius: '75%',               // 雷达图本身占容器 75%
       indicator: [
         { name: '研究人员总数', max: 6500 },
         { name: '每万人研究人员数', max: 16000 },
@@ -23,25 +43,26 @@ const getBarChart = (nameList, valueList, isPer) => {
         { name: '研发经费投入总额', max: 25000 }
       ],
       axisName: {
-        // ② 文字在线上方 + 自动换两行
+        // 1. 富文本颜色
+        color: '#3B414B',
+        fontSize: 14,
+        fontWeight: 600,
+
+        // 2. 白色矩形背景
+        backgroundColor: '#fff',   // 背景色
+        borderRadius: 4,           // 圆角
+        padding: [4, 8],           // 上下 4px，左右 8px
+
+        // 3. 自动换两行（你原来的逻辑）
         formatter: function (txt) {
-          // 按字数 10 左右自动断行
           const len = txt.length;
           if (len <= 5) return txt;
           const br = Math.ceil(len / 2);
           return txt.substring(0, br) + '\n' + txt.substring(br);
-        },
-        rich: {
-          a: { lineHeight: 20 }   // 行高
-        },
-        color: 'rgba(59, 65, 75, 1)',
-        fontSize: 14,
-        fontWeight: 600
+        }
       },
       splitLine: {
-        lineStyle: {
-          color: 'rgba(200,200,200,.6)'
-        }
+        lineStyle: { color: 'rgba(200,200,200,.6)' }
       },
       splitArea: { show: false },
       axisLine: { show: false }
@@ -57,18 +78,36 @@ const getBarChart = (nameList, valueList, isPer) => {
         { value: [4000, 14000, 18000, 21000, 32000, 10000], name: '投融资限制', areaStyle: { color: 'rgba(120, 100, 200, 0.2)' } },
         { value: [4000, 14000, 18000, 21000, 32000, 10000], name: '市场准入', areaStyle: { color: 'rgba(255, 100, 150, 0.2)' } }
       ]
-    }],
-    // ③ 最外层弧线加粗：用 graphic 画一个圆环覆盖在最外层
-    graphic: [{
-      type: 'circle',
-      shape: { cx: 300, cy: 300, r: '65%' },
-      style: { stroke: '#333', lineWidth: 30, fill: 'transparent' },
-      z: 1000
     }]
   };
 
 
-  return option
-}
+  // 2. 计算文字所在圆半径（单位 px）
+  const textRadius = getRadarTextRadius(dom, 75) + 30;   // 75 与 radar.radius 保持一致
 
-export default getBarChart
+  // 3. 用“单圈描边”实现「粗线 + 文字在线上」
\ No newline at end of file
+  option.graphic = [{
+    type: 'circle',
+    shape: {
+      cx: dom.offsetWidth / 2,
+      cy: dom.offsetHeight / 2,
+      r: textRadius
+    },
+    style: {
+      stroke: '#EBECEE',      // 线的颜色
+      lineWidth: 6,        // 线的粗细（想要再粗就继续加大）
+      fill: 'transparent'
+    },
+    // z: 1000                // 保证压在最上层
+  }];
+  return option;
+};
+
+
+// 1. 先准备一个“半径换算”小工具
+function getRadarTextRadius(dom, radiusPercent = 75) {
+  // 雷达图中心永远在容器中心
+  const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
+  return (minSide / 2) * (radiusPercent / 100);
+}
+export default getBarChart;
\ No newline at end of file