feat:市场准入限制-对接232数据统计页面接口

src/api/marketAccessRestrictions/index.js

@@ -39,6 +39,18 @@ export function getStatNum(params) {
     })
 }
 
+// 查询关税税率
+/**
+ * @param {byYorM} 
+ */
+export function getSearchTariff(params) {
+    return request({
+        method: 'GET',
+        url: `/api/marketsearchDetails/getSearchTariff`,
+        params
+    })
+}
+
 // 制裁领域分布
 /**
  * @param {years} 

src/views/marketAccessRestrictions/marketAccessHome/index.vue

@@ -88,9 +88,9 @@
 							<div class="box-echart-main">
 								<div class="box-echart-content">
 									<el-empty v-if="!box5ChartData.title.length" description="暂无数据" style="padding: 100px 0 0;" :image-size="100" />
-									<div v-if="box5ChartData.title.length" style="width: 100%; height: 100%;" id="box5Chart"></div>
+									<div v-if="box5ChartData.title.length" style="width: 100%; height: 100%;" ref="box5Ref"></div>
 								</div>
-								<TipTab style="margin-top: 6px;" />
+								<TipTab style="margin-top: 16px;" />
 							</div>
 						</OverviewNormalBox>
 					</div>
@@ -111,7 +111,7 @@
 									<el-empty v-if="!box6Data.title.length" description="暂无数据" style="padding: 100px 0 0;" :image-size="100" />
 									<div v-if="box6Data.title.length" style="width: 100%; height: 100%;" id="box6Chart"></div>
 								</div>
-								<TipTab style="margin-top: 6px;" />
+								<TipTab />
 							</div>
 						</OverviewNormalBox>
 					</div>
@@ -139,7 +139,7 @@
 									<el-empty v-if="!box7Data.data.length" description="暂无数据" style="padding: 100px 0 0;" :image-size="100" />
 									<div v-if="box7Data.data.length" style="width: 100%; height: 100%;" id="box7Chart"></div>
 								</div>
-								<TipTab style="margin-top: 6px;" />
+								<TipTab style="margin-top: 10px;" />
 							</div>
 						</OverviewNormalBox>
 					</div>
@@ -158,9 +158,9 @@
 							<div class="box-echart-main">
 								<div class="box-echart-content">
 									<el-empty v-if="!box8Data.length" description="暂无数据" style="padding: 100px 0 0;" :image-size="100" />
-									<div v-if="box8Data.length" style="width: 100%; height: 100%;" id="box8Chart"></div>
+									<div v-if="box8Data.length" style="width: 100%; height: 100%;" ref="box8Ref"></div>
 								</div>
-								<TipTab style="margin-top: 6px;" />
+								<TipTab />
 							</div>
 						</OverviewNormalBox>
 					</div>
@@ -180,7 +180,6 @@
 							</template>
 							<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
 						</el-select>
-
 					</div>
 				</div>
 				<div class="home-main-footer-main">
@@ -279,8 +278,8 @@ import CarouselItem232 from '@/views/marketAccessRestrictions/marketAccessHome/c
 import setChart from "@/utils/setChart";
 import router from "@/router";
 
-import getMultiLineChart from "./utils/multiLineChart";
-import getPieChart from "./utils/piechart";
+import createLineChart from "@/views/marketAccessRestrictions/marketAccessHome/utils/baseLineChart";
+import createPieChart from "@/views/marketAccessRestrictions/marketAccessHome/utils/basePiechart.js";
 import getRadarChart from "./utils/radarChart";
 import getBarChart from "./utils/barChart1";
 
@@ -540,7 +539,7 @@ function transformAllData(originalData) {
 	// 4. 构建最终结果
 	return {
 		title: allYears,
-		data: categoryData
+		list: categoryData
 	};
 }
 
@@ -596,18 +595,19 @@ function transformAllData1(originalData) {
 	// 4. 构建最终结果
 	return {
 		title: allDates,
-		data: categoryData
+		list: categoryData
 	};
 }
 
 const box5ChartData = ref({
 	title: [],
-	data: [
+	list: [
 		{ name: "337调查", value: [] },
 		{ name: "301调查", value: [] },
 		{ name: "232调查", value: [] }
 	]
 });
+const box5Ref = ref(null)
 const box5Active = ref(1);
 const hadleGetStatNum = async (event) => {
 	if (event) box5Active.value = event;
@@ -623,8 +623,7 @@ const hadleGetStatNum = async (event) => {
 			}
 		}
 	} catch (error) {}
-	let box5Chart = getMultiLineChart(box5ChartData.value);
-	nextTick(() => { setChart(box5Chart, "box5Chart") })
+	nextTick(() => { createLineChart(box5Ref, box5ChartData.value) })
 };
 
 // 制裁领域分布
@@ -767,6 +766,7 @@ const box8SurveyList = ref([
 // 调查结果分布
 const box8SelectedSurvey = ref("337");
 const box8Data = ref([]);
+const box8Ref = ref(null);
 const handleGetBox8Data = async () => {
 	try {
 		const res = await getSearchResult({sortCode: box8SelectedSurvey.value});
@@ -779,8 +779,7 @@ const handleGetBox8Data = async () => {
 	} catch (error) {
 		box8Data.value = []
 	}
-	const box8Chart = getPieChart(box8Data.value);
-	nextTick(() => { setChart(box8Chart, "box8Chart") })
+	nextTick(() => { createPieChart(box8Ref, box8Data.value, {labelType:1}) })
 };
 
 // 资源库
@@ -967,7 +966,7 @@ onMounted(async () => {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	padding: 8px 22px 20px;
+	padding: 12px 30px 20px;
 	.box-echart-content {
 		width: 100%;
 		height: 20px;

src/views/marketAccessRestrictions/marketAccessHome/utils/multiLineChart.js → src/views/marketAccessRestrictions/marketAccessHome/utils/baseLineChart.js

 import * as echarts from 'echarts'
+import { MUTICHARTCOLORS } from '@/common/constant'
 
-const getMultiLineChart = (data) => {
+// 十六进制颜色转 rgba 的工具函数
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+const getSerie = (data, index) => {
   return {
+    name: data.name,
+    type: 'line',
+    smooth: true,
+    symbol: 'emptyCircle',
+    symbolSize: 6,
+    areaStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: hexToRgba(MUTICHARTCOLORS[index], 0.7)
+      }, {
+        offset: 1,
+        color: hexToRgba(MUTICHARTCOLORS[index], 0)
+      }])
+    },
+    emphasis: { focus: 'series' },
+    data: data.value
+  }
+}
+
+const createLineChart = (chartDom, data, option={}) => {
+  if (!chartDom.value) return;
+
+  // 先销毁之前的实例
+  const existingChart = echarts.getInstanceByDom(chartDom.value);
+  if (existingChart) existingChart.dispose();
+  
+  // 获取容器宽度/高度
+  const containerWidth = chartDom.value.clientWidth;
+  const containerHeight = chartDom.value.clientHeight;
+
+  const myChart = echarts.init(chartDom.value);
+  myChart.setOption({
+    color: MUTICHARTCOLORS,
     tooltip: {
       trigger: 'item',
       axisPointer: {
         type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
+        label: { backgroundColor: '#6a7985' }
       }
     },
     grid: {
-      width: '95%',
-      height: '83%',
-      top: '15%',
-      left: '1%',
+      top: 40,
+      bottom: 0,
+      right: 26,
+      left: 12,
       containLabel: true
     },
     legend: {
-      show: true,
+      show: data?.list?.length>1,
       top: 10,
       icon: 'circle',
       textStyle: {
@@ -28,7 +68,6 @@ const getMultiLineChart = (data) => {
         fontSize: '14px',
       }
     },
-    color: ['#0A57A6', '#FA8C16', '#722ED1'],
     xAxis: [
       {
         type: 'category',
@@ -78,69 +117,9 @@ const getMultiLineChart = (data) => {
         },
       }
     ],
-    series: [
-      {
-        name: data.data[0]?.name,
-        type: 'line',
-        smooth: true,
-        symbol: 'emptyCircle',
-        symbolSize: 6,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: 'rgba(10, 87, 166, 0.7)' // 起始颜色
-          }, {
-            offset: 1,
-            color: 'rgba(10, 87, 166, 0)' // 结束颜色
-          }])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: data.data[0]?.value
-      },
-      {
-        name: data.data[1]?.name,
-        type: 'line',
-        smooth: true,
-        symbol: 'emptyCircle',
-        symbolSize: 6,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: 'rgba(255, 172, 77, 0.7)' // 起始颜色
-          }, {
-            offset: 1,
-            color: 'rgba(255, 172, 77, 0)' // 结束颜色
-          }])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: data.data[1]?.value,
-      },
-      {
-        name: data.data[2]?.name,
-        type: 'line',
-        smooth: true,
-        symbol: 'emptyCircle',
-        symbolSize: 6,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: 'rgba(114, 46, 209, 0.7)' // 起始颜色
-          }, {
-            offset: 1,
-            color: 'rgba(114, 46, 209, 0)' // 结束颜色
-          }])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: data.data[2]?.value,
-      }
-    ]
-  }
+    series: data.list.map(getSerie)
+  })
+  return myChart
 }
 
-export default getMultiLineChart
+export default createLineChart
\ No newline at end of file

src/views/marketAccessRestrictions/marketAccessHome/utils/piechart.js → src/views/marketAccessRestrictions/marketAccessHome/utils/basePiechart.js

-const getPieChart = (data) => {
-  const colorList = ['#69B1FF','#FF7875','#B37FEB','#FFC069','#1677FF','#87E8DE','#ADC6FF','#FFBB96','#BAE0FF','#FFD591',]
-  let option = {
-    color: colorList,
+import * as echarts from 'echarts'
+import { MUTICHARTCOLORS } from '@/common/constant'
+
+const truncateLabel = (value, maxLen = 6) => {
+  if (value === null || value === undefined) return ''
+  const str = String(value)
+  const chars = Array.from(str)
+  if (chars.length <= maxLen) return str
+  return `${chars.slice(0, maxLen).join('')}...`
+}
+
+const formatLabel = (node, type) => {
+  if (type==1) {
+    const name = truncateLabel(node.name, 6)
+    return `{name|${name}}\n{time|${ node.percent||0}%}`
+  }
+  return `{name|${node.name}}  {time|${ node.percent||0}%}\n`
+}
+
+const createPieChart = (chartDom, data=[], option={}) => {
+  if (!chartDom.value) return;
+
+  // 先销毁之前的实例
+  const existingChart = echarts.getInstanceByDom(chartDom.value);
+  if (existingChart) existingChart.dispose();
+
+  // 获取容器宽度
+  const containerWidth = chartDom.value.clientWidth;
+
+  const myChart = echarts.init(chartDom.value);
+  myChart.setOption({
+    color: MUTICHARTCOLORS,
+    tooltip: {
+      formatter: node => `${node.name}: ${node.value}项 (${node.percent || 0}%)`,
+    },
     series: [
       {
         type: 'pie',
-        radius: [75, 100],
+        radius: [70, 100],
         height: '100%',
-        left: 'center',
         width: '100%',
+        left: 'center',
         itemStyle: {
           borderColor: '#fff',
           borderWidth: 1
         },
         label: {
           alignTo: 'edge',
-          formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
+          formatter: (node) => formatLabel(node, option.labelType),
           minMargin: 5,
           edgeDistance: 10,
-          lineHeight: 25,
+          lineHeight: 22,
           rich: {
             name: {
               color: 'rgba(59, 65, 75, 1)',
               fontFamily: 'Microsoft YaHei',
               fontSize: 16,
               fontWeight: 'bold',
+              padding: [10, 0, 10, 0]
             },
             time: {
-              fontSize: 16,
+              color: 'rgba(95, 101, 108, 1)',
               fontFamily: 'Microsoft YaHei',
-              color: '#rgba(95, 101, 108, 1)'
+              fontSize: 16,
+              padding: [10, 0, 10, 0]
             }
           }
         },
         labelLine: {
           length: 15,
           length2: 0,
-          maxSurfaceAngle: 80
+          maxSurfaceAngle: 88
         },
         labelLayout: function (params) {
-          const isLeft = params.labelRect.x < 556 / 2;
+          const isLeft = params.labelRect.x < containerWidth / 2;
           const points = params.labelLinePoints;
-          // Update the end point.
-          points[2][0] = isLeft
-            ? params.labelRect.x
-            : params.labelRect.x + params.labelRect.width;
-          return {
-            labelLinePoints: points
-          };
+          
+          // 调整引导线终点
+          if (isLeft) {
+            points[2][0] = params.labelRect.x;  // 左对齐
+          } else {
+            points[2][0] = params.labelRect.x + params.labelRect.width;  // 右对齐
+          }
+          
+          return { labelLinePoints: points };
         },
         data: data
-      }]
       }
-  return option
+    ]
+  });
+  return myChart
 }
 
-export default getPieChart;
+export default createPieChart;
\ No newline at end of file

src/views/marketAccessRestrictions/marketAccessLayout/overview/301/utils/barChart.js

@@ -5,7 +5,7 @@ const getBarChart = (nameList, valueList) => {
     tooltip: {},
     title: {
       text: '单位：万人',
-      left: 660,
+      right: 26,
       top: 10,
       textStyle: {
         color: 'rgba(95, 101, 108, 1)',
@@ -16,18 +16,14 @@ const getBarChart = (nameList, valueList) => {
       }
     },
     grid: {
-      top: '5%',
-      right: '3%',
-      bottom: '1%',
-      left: '1%',
+      top: 40,
+      bottom: 0,
+      right: 26,
+      left: 12,
       containLabel: true
     },
     yAxis: {
       type: 'value',
-      splitLine: {
-        show: false
-      },
-      show: false
     },
     xAxis: {
       type: 'category',

src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/barChart.js

@@ -43,7 +43,7 @@ const getBarChart = (nameList, valueList) => {
       data: valueList,
       label: {
         show: true,
-        position: [480, 0],
+        position: [434, 0],
         formatter: function (params) {
           return params.value + ' 次'
         },