Skip to content

R
risk-monitor
提交 47d49701 authored 作者: 张烨's avatar 张烨
浏览文件
操作

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

上级 002c3693
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 148 行增加 和 126 行删除
src/api/marketAccessRestrictions/index.js
浏览文件 @ 47d49701
......@@ -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
浏览文件 @ 47d49701
......@@ -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
浏览文件 @ 47d49701
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
\ No newline at end of file
export default createLineChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/utils/piechart.js → src/views/marketAccessRestrictions/marketAccessHome/utils/basePiechart.js
浏览文件 @ 47d49701
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;
\ No newline at end of file
export default createPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/utils/barChart.js
浏览文件 @ 47d49701
......@@ -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
浏览文件 @ 47d49701
......@@ -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 + ' 次'
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论