Skip to content

R
risk-monitor
提交 7ab5fe3e authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

新增232调查

上级 bfcfe1ed
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 1258 行增加 和 158 行删除
src/views/decree/decreeHome/index.vue
浏览文件 @ 7ab5fe3e
......@@ -173,7 +173,6 @@
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 +" }}</div>
</div>
<div class="box2-main">
<div
......
src/views/exportControl/index.vue
浏览文件 @ 7ab5fe3e
......@@ -63,7 +63,7 @@
<el-col :span="16">
<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
<template #header-right>
<el-button type="primary" @click="handleToDetail" link>
<el-button type="primary" link>
{{ "查看详情 >" }}
</el-button>
</template>
......@@ -147,15 +147,14 @@
</el-col>
<el-col :span="8">
<custom-container titleType="danger" title="风险信号" :headerNum="5" :titleIcon="dangerIcon" height="450px">
<template #header-right>
<el-button type="primary" link>
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleToDetail"
>
<div
class="item-left"
:class="{
......@@ -618,7 +617,6 @@ const infoList = ref([
num: 253,
// color: "rgba(114, 46, 209, 1)"
color: "rgba(132, 136, 142, 1)"
},
{
title: "关键与新兴技术清单",
......@@ -627,7 +625,6 @@ const infoList = ref([
num: 52,
// color: "rgba(250, 140, 22, 1)"
color: "rgba(132, 136, 142, 1)"
},
{
title: "军事最终用户清单 ",
......@@ -1136,72 +1133,29 @@ const curBill = ref({
introductionDate: ""
});
const billTrendList = ref([
{
title: "限制与中国合作",
no: "H.R.2670"
},
{
title: "限制中国获取技术",
no: "H.R.2471"
},
{
title: "禁止在中国建设半导体产能",
no: "H.R.5895"
},
{
title: "限制中国产燃油进口",
no: "S.870"
},
{
title: "禁止政府部门采购受控半导体或服务",
no: "H.R.6395"
},
{
title: "禁止向部分中国实体提供资金",
no: "H.R.3935"
},
{
title: "限制采购中国生产电池",
no: "H.R.7776"
},
{
title: "重视新兴中国技术公司威胁",
no: "H.R.3935"
},
{
title: "禁止卫星出口至中国",
no: "S.870"
},
{
title: "禁购华为设备",
no: "H.R.5895"
}
]);
const warningList = ref([
{
title: "兰德智库发布2025中国年度科技报告",
title: "关于对中华人民共和国合成阿片类药物供应链...",
time: "一天前",
status: "特别重大"
},
{
title: "信息技术与创新基金会发布《中国正在迅速成...",
title: "关于调整汽车及汽车零部件进口的公告",
time: "一天前",
status: "特别重大"
},
{
title: "首次提出“限制外国敏感实体获取补贴",
title: "关于调整钢铁进口的公告",
time: "一天前",
status: "重大风险"
},
{
title: "将中国企业海外子公司、合资公司纳入受...",
title: "关于使用互惠关税规范进口以纠正导致大规模...",
time: "一天前",
status: "重大风险"
},
{
title: "H.R.8333《生物安全法案》将华大基因等...",
title: "关于修订对中华人民共和国低价值进口商品适...",
time: "一天前",
status: "一般风险"
}
......@@ -1419,7 +1373,6 @@ const navList = ref([
}
]);
const chart1Data = ref({
title: [
"2024-09",
......@@ -1657,18 +1610,19 @@ onMounted(async () => {
}
.box2-main {
// position: relative;
height: 320px;
overflow-y: auto;
.box2-main-item {
// margin-left: 23px;
// height: 47px;
// width: 464px;
// display: flex;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
box-sizing: border-box;
padding-right: 3px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......@@ -1702,12 +1656,10 @@ onMounted(async () => {
align-items: center;
gap: 8px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
.text {
font-family: Microsoft YaHei;
line-height: 47px;
width: 80%;
font-size: 16px;
font-weight: 400;
......@@ -1732,7 +1684,7 @@ onMounted(async () => {
left: 0;
right: 0;
bottom: 20px;
width: 80%;
width: 461px;
height: 42px;
display: flex;
flex-direction: row;
......@@ -1754,7 +1706,7 @@ onMounted(async () => {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
......
src/views/finance/index.vue
浏览文件 @ 7ab5fe3e
......@@ -60,40 +60,13 @@
<el-col :span="16">
<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
<template #header-right>
<el-button type="primary" @click="handleToDetail" link>
<el-button type="primary" link>
{{ "查看详情 >" }}
</el-button>
</template>
<template #default>
<div class="box1">
<!-- <el-image
:src="box1Image"
alt=""
style="width: 458px; height: 353px; object-fit: cover; flex-shrink: 0"
></el-image> -->
<!-- <div class="box1-right">
<div class="box1-right-title">关于进一步延长TikTok执法宽限期的行政令</div>
<div class="box1-right-tags">
<el-tag type="primary">互联网</el-tag>
<el-tag type="danger">人工智能</el-tag>
</div>
<div class="box1-right-content">
9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需向提供商发出无违规和无责任的信函，并强调执行该法的权力专属联邦司法部长，意在阻止各州或私人提起诉讼。
</div>
<div class="box1-right-footer">
<span class="box1-right-footer-time"> 2025年9月16日 </span>
<el-button type="primary" link>
美国白宫官方网站
<el-image
src="./assets/images/icon-open.png"
alt=""
style="width: 16px; height: 16px; margin-left: 4px"
></el-image>
</el-button>
</div>
</div> -->
<div class="box1-top">
<div class="box1-top-title">2025年9月12日——BIS《实体清单增列与修订条目》</div>
<div class="box1-top-content">
......@@ -144,15 +117,14 @@
</el-col>
<el-col :span="8">
<custom-container titleType="danger" title="风险信号" :titleIcon="dangerIcon" height="450px">
<template #header-right>
<el-button type="primary" link>
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleToDetail"
>
<div
class="item-left"
:class="{
......@@ -169,11 +141,11 @@
<div class="time">{{ item.time }}</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "风险处理" }}</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</template>
......@@ -185,7 +157,7 @@
<el-col :span="12">
<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
<template #header-right>
<el-button type="primary" link @click="handleClick">
<el-button type="primary" link @click="handleToMoreNews">
{{ "更多 +" }}
</el-button>
</template>
......@@ -683,11 +655,24 @@ const handleBackHome = () => {
};
const handleToDetail = () => {
router.push({
path: "/exportControl/analysis"
});
// const route = router.resolve("/exportControl/analysis");
// window.open(route.href, "_blank");
};
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
const billList = ref([]);
const curBillListIndex = ref(0);
......@@ -826,15 +811,6 @@ const handleSwithCurBill = name => {
curBill.value = billList.value[curBillListIndex.value];
};
const handleClick = () => {
router.push({
path: "/analysis"
// query: {
// billId: curBill.value.billId
// }
});
};
// 发布频度
const tableData1 = ref([
{
......@@ -1779,18 +1755,19 @@ onMounted(async () => {
}
.box2-main {
// position: relative;
height: 320px;
overflow-y: auto;
.box2-main-item {
// margin-left: 23px;
// height: 47px;
// width: 464px;
// display: flex;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
box-sizing: border-box;
padding-right: 3px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......@@ -1824,12 +1801,10 @@ onMounted(async () => {
align-items: center;
gap: 8px;
height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1);
.text {
font-family: Microsoft YaHei;
line-height: 47px;
width: 80%;
font-size: 16px;
font-weight: 400;
......@@ -1854,14 +1829,14 @@ onMounted(async () => {
left: 0;
right: 0;
bottom: 20px;
width: 80%;
width: 461px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
background: var(--color-main-active);
margin: 0 auto;
cursor: pointer;
.icon {
......@@ -1876,7 +1851,7 @@ onMounted(async () => {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 7ab5fe3e
......@@ -61,7 +61,7 @@
</div>
</div>
<div class="home-main-header-card-box">
<div class="home-main-header-card-box-box1 card">
<div class="home-main-header-card-box-box1 card" @click="handleClickToDetail('301')">
<div class="header">
<div class="header-left">{{ "301调查" }}</div>
<div class="header-right">{{ "52项" }}</div>
......@@ -73,7 +73,7 @@
</div>
</div>
</div>
<div class="home-main-header-card-box-box2 card">
<div class="home-main-header-card-box-box2 card" @click="handleClickToDetail('232')">
<div class="header">
<div class="header-left">{{ "232调查" }}</div>
<div class="header-right">{{ "3项" }}</div>
......@@ -85,7 +85,7 @@
</div>
</div>
</div>
<div class="home-main-header-card-box-box3 card">
<div class="home-main-header-card-box-box3 card" @click="handleClickToDetail('337')">
<div class="header">
<div class="header-left">{{ "337调查" }}</div>
<div class="header-right">{{ "87项" }}</div>
......@@ -116,7 +116,7 @@
</div>
<div class="title">{{ "调查进展" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
<div class="box1-header-right">
{{ "查看详情 >" }}
</div>
</div>
......@@ -192,7 +192,6 @@
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 >" }}</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
......@@ -213,7 +212,7 @@
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
......@@ -230,7 +229,7 @@
<img src="./assets/images/header-news.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more">{{ "更多 +" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
......@@ -448,8 +447,14 @@ const handleBackHome = () => {
});
};
const handleClickToDetail = () => {
router.push("/marketAccessLayout");
const handleClickToDetail = (id) => {
const route = router.resolve({
path: "/marketAccessLayout",
query: {
id: id
}
});
window.open(route.href, "_blank");
};
// 风险信号
......@@ -801,7 +806,17 @@ const messageList = ref([
}
]);
// 获取热门法案
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
onMounted(async () => {
let chart1 = getMultiLineChart(
......@@ -1447,6 +1462,10 @@ onMounted(async () => {
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
......
src/views/marketAccessRestrictions/marketAccessLayout/case/index.vue
浏览文件 @ 7ab5fe3e
......@@ -127,6 +127,8 @@
<script setup>
import { ref, onMounted, watch } from "vue";
import router from '@/router'
import { useRoute } from "vue-router";
const route = useRoute();
const releaseTime = ref("近一年发布");
......@@ -350,7 +352,14 @@ watch(
);
const handleToSingleCase = (item) => {
router.push('/marketSingleCaseLayout/overview')
// router.push('/marketSingleCaseLayout/overview')
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: route.query.id
}
});
window.open(curRoute.href, "_blank");
}
onMounted(() => {
......
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 7ab5fe3e
......@@ -4,12 +4,12 @@
<div class="header-top">
<div class="left">
<div class="icon">
<img src="./assets/images/img1.png" alt="" />
<img :src="curSurvey.image" alt="" />
</div>
<div class="info">
<div class="title">{{ "337调查" }}</div>
<div class="title">{{ curSurvey.title }}</div>
<div class="content">
{{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
{{ curSurvey.desc }}
</div>
</div>
</div>
......@@ -29,17 +29,10 @@
@click="handleClickBtn(item)"
>
<div class="icon">
<img
:src="item.acitveIcon"
alt=""
v-if="activeBtnName === item.name"
/>
<img :src="item.acitveIcon" alt="" v-if="activeBtnName === item.name" />
<img :src="item.icon" alt="" v-else />
</div>
<div
class="text"
:class="{ textActive: activeBtnName === item.name }"
>
<div class="text" :class="{ textActive: activeBtnName === item.name }">
{{ item.name }}
</div>
</div>
......@@ -58,28 +51,63 @@ import icon1 from "./assets/images/icon1.png";
import icon1Active from "./assets/images/icon1_active.png";
import icon2 from "./assets/images/icon2.png";
import icon2Active from "./assets/images/icon2_active.png";
import Img337 from "./assets/images/337.png";
import Img232 from "./assets/images/232.png";
import { useRoute } from "vue-router";
const route = useRoute();
const btnList = ref([
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview",
path: "/marketAccessLayout/overview"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case",
path: "/marketAccessLayout/case"
}
]);
const surveyList = ref([
{
title: "337调查",
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"',
image: Img337
},
{
title: "232调查",
desc: "依据《1962年贸易扩展法》第232条款，授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。",
image: Img232
}
]);
const curSurvey = ref({
title: "337调查",
desc: '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"',
image: Img337
});
const activeBtnName = ref("调查概况");
const handleClickBtn = (item) => {
const handleClickBtn = item => {
activeBtnName.value = item.name;
router.push(item.path);
router.push({
path: item.path,
query: {
id: route.query.id
}
});
};
onMounted(() => {
if (route.query.id === "232") {
curSurvey.value = surveyList.value[1];
}
});
</script>
<style lang="scss" scoped>
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/utils/barChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(255,255,255,0)'
},
{
offset: 1,
color: '#1778ff'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/utils/mapChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from 'echarts'
import chinaJson from '../../../assets/json/China.json'
const getMapChart = (mapData) => {
echarts.registerMap('china', chinaJson);
// 定义颜色范围
const colorRanges = [
{ range: [0, 4], color: '#8ECFC9', label: '0-4' },
{ range: [5, 9], color: '#FFBE7A', label: '5-9' },
{ range: [10, 19], color: '#FA7F6F', label: '10-19' },
{ range: [20, 30], color: '#AA6FC9', label: '20-30' }
];
const getColorByValue = (value, colorRanges) => {
const range = colorRanges.find(range =>
value >= range.range[0] && value <= range.range[1]
);
return range ? range.color : '#CCCCCC';
}
const option = {
title: {
// text: '全国数据分布图',
// subtext: '数据范围颜色标识',
left: 'center',
textStyle: {
fontSize: 18,
color: '#333'
}
},
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.componentType === 'series') {
if (params.seriesType === 'scatter') {
return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
} else {
return `${params.name}<br/>数值: ${params.value[2] || 0}`;
}
}
return params.name;
}
},
visualMap: {
type: 'piecewise',
pieces: colorRanges.map(range => ({
min: range.range[0],
max: range.range[1],
label: range.label,
color: range.color
})),
left: 'right',
top: 'bottom',
textStyle: {
color: '#000',
fontSize: 12
},
itemWidth: 20,
itemHeight: 14
},
geo: {
map: 'china',
roam: true,
zoom: 1.2,
label: {
emphasis: {
show: true,
color: '#fff'
}
},
itemStyle: {
areaColor: '#F9FAFC',
borderColor: '#E7F1FF',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#ffd700'
},
label: {
show: true,
color: '#fff',
fontSize: 12
}
}
},
series: [
// 地图系列 - 用于省份高亮
{
name: '数据分布',
type: 'map',
map: 'china',
geoIndex: 0,
data: mapData.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
// color: getColorByValue(item.value, colorRanges),
areaColor: '#E7F1FF'
}
})),
emphasis: {
itemStyle: {
areaColor: '#ffd700',
borderColor: '#333',
borderWidth: 2
},
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
color: '#333'
}
}
},
// 散点系列 - 用于显示圆点数字标记
{
name: '数据标记',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: (val) => {
// 根据数值大小调整圆点大小
const size = Math.max(20, val[2] * 2);
return Math.min(size, 30);
},
// symbolSize: 30,
label: {
show: true,
formatter: (params) => {
return params.data.value[2];
},
position: 'inside',
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
},
itemStyle: {
color: (params) => {
return getColorByValue(params.data.value, colorRanges);
},
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: getColorByValue(item.value, colorRanges)
}
})),
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
}
]
};
return option
}
export default getMapChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/utils/multiLineChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 0.5)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
// {
// name: '通过法案',
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(255, 172, 77, 1)' // 起始颜色
// }, {
// offset: 1,
// color: 'rgba(255, 172, 77, 0)' // 结束颜色
// }])
// },
// emphasis: {
// focus: 'series'
// },
// data: dataY2
// }
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/utils/piechart.js 0 → 100644
浏览文件 @ 7ab5fe3e
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/barChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(255,255,255,0)'
},
{
offset: 1,
color: '#1778ff'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/mapChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from 'echarts'
import chinaJson from '../../../assets/json/China.json'
const getMapChart = (mapData) => {
echarts.registerMap('china', chinaJson);
// 定义颜色范围
const colorRanges = [
{ range: [0, 4], color: '#8ECFC9', label: '0-4' },
{ range: [5, 9], color: '#FFBE7A', label: '5-9' },
{ range: [10, 19], color: '#FA7F6F', label: '10-19' },
{ range: [20, 30], color: '#AA6FC9', label: '20-30' }
];
const getColorByValue = (value, colorRanges) => {
const range = colorRanges.find(range =>
value >= range.range[0] && value <= range.range[1]
);
return range ? range.color : '#CCCCCC';
}
const option = {
title: {
// text: '全国数据分布图',
// subtext: '数据范围颜色标识',
left: 'center',
textStyle: {
fontSize: 18,
color: '#333'
}
},
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.componentType === 'series') {
if (params.seriesType === 'scatter') {
return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
} else {
return `${params.name}<br/>数值: ${params.value[2] || 0}`;
}
}
return params.name;
}
},
visualMap: {
type: 'piecewise',
pieces: colorRanges.map(range => ({
min: range.range[0],
max: range.range[1],
label: range.label,
color: range.color
})),
left: 'right',
top: 'bottom',
textStyle: {
color: '#000',
fontSize: 12
},
itemWidth: 20,
itemHeight: 14
},
geo: {
map: 'china',
roam: true,
zoom: 1.2,
label: {
emphasis: {
show: true,
color: '#fff'
}
},
itemStyle: {
areaColor: '#F9FAFC',
borderColor: '#E7F1FF',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#ffd700'
},
label: {
show: true,
color: '#fff',
fontSize: 12
}
}
},
series: [
// 地图系列 - 用于省份高亮
{
name: '数据分布',
type: 'map',
map: 'china',
geoIndex: 0,
data: mapData.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
// color: getColorByValue(item.value, colorRanges),
areaColor: '#E7F1FF'
}
})),
emphasis: {
itemStyle: {
areaColor: '#ffd700',
borderColor: '#333',
borderWidth: 2
},
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
color: '#333'
}
}
},
// 散点系列 - 用于显示圆点数字标记
{
name: '数据标记',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: (val) => {
// 根据数值大小调整圆点大小
const size = Math.max(20, val[2] * 2);
return Math.min(size, 30);
},
// symbolSize: 30,
label: {
show: true,
formatter: (params) => {
return params.data.value[2];
},
position: 'inside',
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
},
itemStyle: {
color: (params) => {
return getColorByValue(params.data.value, colorRanges);
},
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: getColorByValue(item.value, colorRanges)
}
})),
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
}
]
};
return option
}
export default getMapChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/multiLineChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['提出法案', '通过法案'],
show: false
},
color: ['#1459bb', '#fa8c16'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '提出法案',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 119, 255, 0.5)' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
// {
// name: '通过法案',
// type: 'line',
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(255, 172, 77, 1)' // 起始颜色
// }, {
// offset: 1,
// color: 'rgba(255, 172, 77, 0)' // 结束颜色
// }])
// },
// emphasis: {
// focus: 'series'
// },
// data: dataY2
// }
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/piechart.js 0 → 100644
浏览文件 @ 7ab5fe3e
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}} {time|{c} 项 {d}%}\n',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/232/utils/barChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
show: true
},
xAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: false,
position: 'top',
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 12,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 6,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/232/utils/barChart1.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart1 = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
inverse: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart1
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/232/utils/pieChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 项 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/utils/barChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
show: true
},
xAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: false,
position: 'top',
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 12,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 6,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/utils/barChart1.js 0 → 100644
浏览文件 @ 7ab5fe3e
import * as echarts from "echarts";
const getBarChart1 = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
inverse: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart1
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/utils/pieChart.js 0 → 100644
浏览文件 @ 7ab5fe3e
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 项 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论