Skip to content

R
risk-monitor
提交 5e0a7819 authored 作者: 胡卉清's avatar 胡卉清
浏览文件
操作

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !21
上级 dde14cf3 10b405e6
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 2210 行增加 和 124 行删除
src/router/index.js
浏览文件 @ 5e0a7819
......@@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from "vue-router";
//中美博弈概览
import overView from "@/views/overView/index.vue";
//GJ概览
import gjOverView from "@/views/gjOverView/index.vue";
//新闻速览
import newsBrief from "@/views/newsBrief/index.vue"
// 风险信号
......@@ -90,6 +92,15 @@ const routes = [
title: "中美博弈概览"
}
},
// GJ概览页面路由
{
path: "/gjOverView",
name: "gjOverView",
component: gjOverView,
meta: {
title: "国家概览"
}
},
//新闻速览页面路由
{
path: "/newsBrief",
......@@ -99,7 +110,7 @@ const routes = [
title: "新闻速览"
}
},
//风险信号页面路由
//风险信号页面路由
{
path: "/riskSignal",
name: "riskSignal",
......
src/views/bill/introdoction/utils/barchart.js
浏览文件 @ 5e0a7819
......@@ -24,22 +24,22 @@ const getbarChart = (data) => {
0,
0,
1, [{
offset: 0,
color: "#3e7697",
},
{
offset: 1,
color: "#152d47",
},
],
offset: 0,
color: "#3e7697",
},
{
offset: 1,
color: "#152d47",
},
],
false
),
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: "category",
......@@ -59,37 +59,37 @@ const getbarChart = (data) => {
nameTextStyle: { fontSize: "14px" },
show: false,
axisLine: {
lineStyle: {
color: "#ccc",
: {
color: "#ccc",
},
show: false,
show: false,
},
splitLine: {
lineStyle: {
color: "#888",
splitLine: {
: {
color: "#888",
},
show: false,
show: false,
},
},
series: [
{
type: "bar",
barWidth: "36px",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(67,188,255,1)" },
{ offset: 1, color: "rgba(67,188,255,0.5)" },
]),
},
label: {
show: true,
position: 'top'
},
data: data.datay
}
],
series: [
{
type: "bar",
barWidth: "36px",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(67,188,255,1)" },
{ offset: 1, color: "rgba(67,188,255,0.5)" },
]),
},
label: {
show: true,
position: 'top'
},
data: data.datay
}
],
};
}
......
src/views/gjOverView/component/AdvantagesAnalysis.vue 0 → 100644
浏览文件 @ 5e0a7819
<!-- 国家科技博弈支撑资源分析 -->
<template>
<div class="thematic-box">
<div style="width:100%;text-align:center;">
<div class="thematic-title" style="display:inline-block;">
国家科技博弈优劣势分析
</div>
</div>
<div class="divider"></div>
<div class="chart-content" style="margin-top: 32px;">
<div class="chart-box">
<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 class="item-header-btn">
查看数据源 >
</div>
</div>
<div class="divider"></div>
<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char8">
</div>
<div style="width: 100%;">
<div class="comparison-btn">
领域综合能力排名位势
</div>
</div>
</div>
<div class="chart-box">
<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 class="item-header-btn">
查看数据源 >
</div>
</div>
<div class="divider"></div>
<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char9">
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import router from '@/router/index'
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue";
import getBarChart from '../js/barChart.js'
import getBarChart3 from '../js/barChart3.js'
import radarChart2 from '../js/radarChart2.js'
import getMultiLineChart2 from "../js/multiLineChart2.js";
//科技人才对比分析
const char4Data = ref({
name: ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'],
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});
//科研投入对比分析
const char5Data = ref({
name: ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'],
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});
const names = ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚']
const data1 = [120, 200, 150, 80, 70, 100]
const data2 = [90, 230, 180, 110, 100, 30]
const data3 = [20, 130, 120, 160, 80, 11]
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart8Data = ref({
title: [
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025"
],
data: [
{
name: "科技法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
},
{
name: "出口管制",
value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
},
{
name: "科技政令",
value: [149, 58, 85, 95, 72, 108, 133, 148, 139, 180, 187, 175]
},
{
name: "合作限制",
value: [152, 48, 91, 88, 74, 103, 129, 141, 136, 171, 185, 169]
},
{
name: "市场准入",
value: [138, 61, 77, 105, 68, 112, 135, 159, 147, 183, 192, 178]
},
{
name: "人才限制",
value: [142, 53, 82, 97, 69, 100, 130, 150, 142, 173, 189, 177]
},
]
});
onMounted(() => {
let char8 = getBarChart3(names, data1, data2, data3, false);
setChart(char8, "char8");
let char7 = radarChart2()
setChart(char7, "char7");
//制裁手段强度变化折线图
let chart9 = getMultiLineChart2(chart8Data.value.title, chart8Data.value.data[0].value, chart8Data.value.data[1].value, chart8Data.value.data[2].value, chart8Data.value.data[3].value, chart8Data.value.data[4].value, chart8Data.value.data[5].value);
setChart(chart9, "char9");
});
</script>
<style lang="scss" scoped>
.thematic-box {
margin-top: 64px;
height: 578px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: linear-gradient(180.00deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%);
.divide {
width: 100%;
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
}
.thematic-title {
/* Common/导航按钮 */
width: 284px;
height: 48px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4;
padding: 9px 16px 9px 16px;
background: rgba(5, 95, 194, 1);
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.thematic-content {
/* 容器 480 */
width: calc(100% - 40px);
height: 640px;
margin: 35px 20px 20px 20px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.timeLine-box {
height: 100%;
width: calc(100% - 50px);
.time-item-box {
width: 30%;
height: 165px;
}
}
.item-header-divider {
/* 矩形 249 */
width: 100%;
height: 1px;
background: rgba(231, 243, 255, 1);
}
.thematic-btn-left {
height: 100%;
width: 24px;
padding-top: 130px;
}
.thematic-btn-right {
height: 100%;
width: 24px;
padding-top: 130px;
}
.thematic-btn-icon {
height: 48px;
width: 100%;
margin-top: calc(50% - 24px);
}
}
.item-header {
height: 48px;
line-height: 48px;
width: 100%;
display: flex;
.item-header-icon {
width: 20px;
height: 20px;
margin: 15px;
}
.item-header-text {
width: calc(100% - 170px);
font-size: 20px;
font-weight: 700;
line-height: 26px;
background: rgba(255, 255, 255, 0.65);
color: #055fc2;
font-family: Microsoft YaHei;
font-size: 20px;
line-height: 48px;
text-align: left;
}
.item-header-btn {
color: rgba(5, 95, 194, 1);
cursor: pointer;
margin-right: 27px;
width: 100px;
}
}
.divider {
width: 100%;
height: 1px;
background: rgba(231, 243, 255, 1);
}
.comparison-btn {
/* 容器 648 */
width: calc(100% - 70px);
margin-left: 35px;
height: 30px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 0px 24px 0px 24px;
border-radius: 15px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.chart-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
height: 452px;
padding: 0 20px;
}
.chart-box {
height: 452px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
background: rgba(255, 255, 255, 1);
}
.radar2Data-line {
display: flex;
width: 100%;
height: 30px;
margin-top: 18px;
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
align-items: center;
/* 垂直居中 */
}
.radar2Data-circle {
/* 椭圆 79 */
width: 12px;
height: 12px;
border-radius: 50%;
}
</style>
src/views/gjOverView/component/MeansAnalysis.vue 0 → 100644
浏览文件 @ 5e0a7819
<!-- 国家科技战略博弈手段分析 -->
<template>
<div class="thematic-box">
<div style="width:100%;text-align:center;">
<div class="thematic-title" style="display:inline-block;">
国家科技战略博弈手段分析
</div>
</div>
<div class="divider"></div>
<div class="thematic-content">
<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>
<div style="display: flex;height: calc(100% - 60px);">
<Timeline :data="course" text-key="title" id-key="seq" />
</div>
</div>
<div class="chart-content">
<div class="chart-box">
<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 class="item-header-btn">
查看数据源>
</div>
</div>
<div class="divider"></div>
<div style="display: flex;height: 400px;width: 100%;" id="char1">
</div>
</div>
<div class="chart-box">
<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 class="item-header-btn">
查看数据源>
</div>
</div>
<div class="divider"></div>
<div style="display: flex;height: 350px;width: calc(100% - 40px) ;margin: 20px;" id="char2">
</div>
</div>
<div class="chart-box">
<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 class="item-header-btn">
查看数据源>
</div>
</div>
<div class="divider"></div>
<div style="display: flex;height: 450px;width: calc(100% - 40px) ;margin: 20px;" id="char3">
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import router from '@/router/index'
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue";
import getMultiLineChart1 from "../js/multiLineChart1.js";
import radarChart1 from '../js/radarChart.js'
import pictorialBarChar from '../js/pictorialBarChar.js'
//科技博弈历程
const course = ref([
{
time: "2025-05-23",
title: "日本加入对华设备管制联盟",
content: "日本经济产业省正式宣布，将23种高性能半导体制造设备纳入出口管制范围，于7月23...",
unit: "1"
},
{
time: "2025-05-23",
title: "中国发起关键原材料反制",
content: "中国商务部、海关总署宣布为维护国家安全和利益，自8月1日起对镓、锗相关物项实施...",
unit: "0"
},
{
time: "2025-08-19",
title: "中国突破7nm芯片制造",
content: "华为开售Mate 60 Pro手机。其搭载的麒麟9000s芯片使用DUV光刻技术制造。",
unit: "0"
},
{
time: "2025-08-20",
title: "中国加速成熟制程产能扩张引发欧美担忧",
content: "中国在成熟制程半导体(28nm及以上)的产能正急剧扩张。此举引发美国和欧洲联盟的...",
unit: "0"
},
{
time: "2025-08-17",
title: "美国进一步收紧对华AI芯片出口限制",
content: "美国商务部工业和安全局(BIS)宣布更新“先进计算芯片规则”，大幅收紧对向中...",
unit: "2"
},
{
time: "2025-12-21",
title: "美国调查中国传统芯片产能",
content: "美国商务部宣布，将启动一项针对美国关键行业对中国制造的成熟制程依赖程度的调查...",
unit: "2"
}
]);
const chart1Data = ref({
title: [
"2024-09",
"2024-10",
"2024-11",
"2024-12",
"2025-01",
"2025-02",
"2025-03",
"2025-04",
"2025-05",
"2025-06",
"2025-07",
"2025-08"
],
data: [
{
name: "科技法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
},
{
name: "出口管制",
value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
},
{
name: "科技政令",
value: [149, 58, 85, 95, 72, 108, 133, 148, 139, 180, 187, 175]
},
{
name: "合作限制",
value: [152, 48, 91, 88, 74, 103, 129, 141, 136, 171, 185, 169]
},
{
name: "市场准入",
value: [138, 61, 77, 105, 68, 112, 135, 159, 147, 183, 192, 178]
},
{
name: "人才限制",
value: [142, 53, 82, 97, 69, 100, 130, 150, 142, 173, 189, 177]
},
]
});
const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
const data1 = [120, 200, 150, 80, 70]
const data2 = [90, 230, 180, 110, 100]
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
onMounted(() => {
course.value.sort((a, b) => new Date(a.time) - new Date(b.time));
//制裁手段强度变化折线图
let chart1 = getMultiLineChart1(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value, chart1Data.value.data[2].value, chart1Data.value.data[3].value, chart1Data.value.data[4].value, chart1Data.value.data[5].value);
setChart(chart1, "char1");
let char2 = radarChart1()
setChart(char2, "char2");
let char3 = pictorialBarChar(names, data1, data2, false);
setChart(char3, "char3");
// pictorialBarChar
});
</script>
<style lang="scss" scoped>
.thematic-box {
margin-top: 36px;
height: 1233px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: linear-gradient(180.00deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%);
.divide {
width: 100%;
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
}
.thematic-title {
/* Common/导航按钮 */
width: 284px;
height: 48px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4;
padding: 9px 16px 9px 16px;
background: rgba(5, 95, 194, 1);
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.thematic-content {
/* 容器 480 */
width: calc(100% - 40px);
height: 640px;
margin: 35px 20px 20px 20px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.timeLine-box {
height: 100%;
width: calc(100% - 50px);
.time-item-box {
width: 30%;
height: 165px;
}
}
.item-header-divider {
/* 矩形 249 */
width: 100%;
height: 1px;
background: rgba(231, 243, 255, 1);
}
.thematic-btn-left {
height: 100%;
width: 24px;
padding-top: 130px;
}
.thematic-btn-right {
height: 100%;
width: 24px;
padding-top: 130px;
}
.thematic-btn-icon {
height: 48px;
width: 100%;
margin-top: calc(50% - 24px);
}
}
.item-header {
height: 48px;
line-height: 48px;
width: 100%;
display: flex;
.item-header-icon {
width: 20px;
height: 20px;
margin: 15px;
}
.item-header-text {
width: calc(100% - 170px);
font-size: 20px;
font-weight: 700;
line-height: 26px;
background: rgba(255, 255, 255, 0.65);
color: #055fc2;
font-family: Microsoft YaHei;
font-size: 20px;
line-height: 48px;
text-align: left;
}
.item-header-btn {
color: rgba(5, 95, 194, 1);
cursor: pointer;
margin-right: 27px;
width: 92px;
}
}
.divider {
width: 100%;
height: 1px;
background: rgba(231, 243, 255, 1);
}
.chart-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
width: 100%;
height: 452px;
padding: 0 20px;
}
.chart-box {
height: 452px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
background: rgba(255, 255, 255, 1);
}
</style>
src/views/gjOverView/component/ResourceAnalysis.vue 0 → 100644
浏览文件 @ 5e0a7819
<!-- 国家科技博弈支撑资源分析 -->
<template>
<div class="thematic-box">
<div style="width:100%;text-align:center;">
<div class="thematic-title" style="display:inline-block;">
国家科技战略博弈手段分析
</div>
</div>
<div class="divider"></div>
<div class="chart-content" style="margin-top: 32px;">
<div class="chart-box">
<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 class="item-header-btn">
数据来源：美国某某发展基金会
</div>
</div>
<div class="divider"></div>
<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char4">
</div>
<div style="width: 100%;">
<div class="comparison-btn">
R&D人员总数对比
</div>
</div>
</div>
<div class="chart-box">
<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 class="item-header-btn">
数据来源：美国某某发展基金会
</div>
</div>
<div class="divider"></div>
<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char5">
</div>
<div style="width: 100%;">
<div class="comparison-btn">
R&D支出总额对比
</div>
</div>
</div>
</div>
<div class="chart-content" style="margin-top: 24px;">
<div class="chart-box">
<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 class="item-header-btn">
数据来源：美国某某发展基金会
</div>
</div>
<div class="divider"></div>
<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char6">
</div>
<div style="width: 100%;">
<div class="comparison-btn">
R&全球顶尖创新主体数量对比
</div>
</div>
</div>
<div class="chart-box">
<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 class="item-header-btn">
数据来源：美国某某发展基金会
</div>
</div>
<div class="divider"></div>
<div style="display: flex;">
<div style="display: flex;height: 320px;width: calc(50% - 40px) ;margin: 20px;" id="char7">
</div>
<div style="width: 50%;padding-top: 50px;">
<div v-for="value in radar2Data" class="radar2Data-line">
<div class="radar2Data-circle" :style="{ backgroundColor: value.color }"></div>
<div style=" width: 70px;margin: 0 7px">{{ value.name }}</div>
<div style="width: calc(100%-150px) ;"> <el-progress :percentage="value.percent" :color="value.color"
:show-text="false" /></div>
<div style=" width: 70px;text-align: right;">{{ value.percent < 50 ? '低依赖' : value.percent < 80
? '中度依赖' : '高度依赖' }} </div>
</div>
</div>
</div>
<div style="width: 100%;">
<div class="comparison-btn">
科学数据外部依赖情况对比
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import router from '@/router/index'
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue";
import getBarChart from '../js/barChart.js'
import getBarChart2 from '../js/barChart2.js'
import radarChart2 from '../js/radarChart2.js'
//科技人才对比分析
const char4Data = ref({
name: ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'],
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});
//科研投入对比分析
const char5Data = ref({
name: ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚'],
value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79],
});
const names = ['中国', '日本', '欧盟', '韩国', '加拿大', '澳大利亚']
const data1 = [120, 200, 150, 80, 70, 100]
const data2 = [90, 230, 180, 110, 100, 30]
const data3 = [20, 130, 120, 160, 80, 11]
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const radar2Data = ref([
{
name: '中国',
percent: 20,
color: '#CF4F51',
text: ''
}, {
name: '美国', color: '#0560C3',
percent: 30,
text: ''
}, {
name: '欧盟', color: '#14A8A8',
percent: 40,
text: ''
}, {
name: '英国', color: '#722FD1',
percent: 70,
text: ''
}, {
name: '日本', color: '#FA8C15',
percent: 80,
text: ''
}, {
name: '韩国', color: '#69B2FF',
percent: 90,
text: ''
}
])
onMounted(() => {
//科技人才对比分析
let char4 = getBarChart(char4Data.value.name, char4Data.value.value, true);
setChart(char4, "char4");
//科研投入对比分析
let char5 = getBarChart(char5Data.value.name, char5Data.value.value, true);
setChart(char5, "char5");
let char6 = getBarChart2(names, data1, data2, data3, false);
setChart(char6, "char6");
let char7 = radarChart2()
setChart(char7, "char7");
});
</script>
<style lang="scss" scoped>
.thematic-box {
margin-top: 36px;
height: 1050px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: linear-gradient(180.00deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%);
.divide {
width: 100%;
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
}
.thematic-title {
/* Common/导航按钮 */
width: 284px;
height: 48px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4;
padding: 9px 16px 9px 16px;
background: rgba(5, 95, 194, 1);
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.thematic-content {
/* 容器 480 */
width: calc(100% - 40px);
height: 640px;
margin: 35px 20px 20px 20px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.timeLine-box {
height: 100%;
width: calc(100% - 50px);
.time-item-box {
width: 30%;
height: 165px;
}
}
.item-header-divider {
/* 矩形 249 */
width: 100%;
height: 1px;
background: rgba(231, 243, 255, 1);
}
.thematic-btn-left {
height: 100%;
width: 24px;
padding-top: 130px;
}
.thematic-btn-right {
height: 100%;
width: 24px;
padding-top: 130px;
}
.thematic-btn-icon {
height: 48px;
width: 100%;
margin-top: calc(50% - 24px);
}
}
.item-header {
height: 48px;
line-height: 48px;
width: 100%;
display: flex;
.item-header-icon {
width: 20px;
height: 20px;
margin: 15px;
}
.item-header-text {
width: calc(100% - 170px);
font-size: 20px;
font-weight: 700;
line-height: 26px;
background: rgba(255, 255, 255, 0.65);
color: #055fc2;
font-family: Microsoft YaHei;
font-size: 20px;
line-height: 48px;
text-align: left;
}
.item-header-btn {
color: rgba(132, 136, 142, 1);
margin-right: 27px;
width: 350px;
}
}
.divider {
width: 100%;
height: 1px;
background: rgba(231, 243, 255, 1);
}
.comparison-btn {
/* 容器 648 */
width: calc(100% - 70px);
margin-left: 35px;
height: 30px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 0px 24px 0px 24px;
border-radius: 15px;
background: rgba(231, 243, 255, 1);
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.chart-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
height: 452px;
padding: 0 20px;
}
.chart-box {
height: 452px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---, 10px);
background: rgba(255, 255, 255, 1);
}
.radar2Data-line {
display: flex;
width: 100%;
height: 30px;
margin-top: 18px;
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
align-items: center;
/* 垂直居中 */
}
.radar2Data-circle {
/* 椭圆 79 */
width: 12px;
height: 12px;
border-radius: 50%;
}
</style>
src/views/gjOverView/component/Timeline.vue 0 → 100644
浏览文件 @ 5e0a7819
<template>
<div class="timeline-wrapper">
<button class="year-box">2025</button>
<div class="timeline-box">
<div class="line" style="width:100vw ;" />
<!-- 一次性渲染全部节点 -->
<div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(item)" />
<!-- 卡片 -->
<div class="card" :class="[cardPos(item), 'right-side']" :style="widthStyle()"
@click="$emit('click-card', item)">
<div class="title">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TimeLine',
props: {
data: { type: Array, required: true },
textKey: { type: String, default: 'text' },
idKey: { type: String, default: 'id' }
},
methods: {
widthStyle() {
console.log(`100 / ${this.data.length - 1}}vw`)
let w = 100 / (this.data.length - 1)
return { width: ` calc(${w}vw - 20px)` };
},
/* 水平位置：按索引均匀分布 */
leftStyle(i) {
return { left: `${(i * 100) / (this.data.length - 1)}vw` };
},
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) {
return item.unit === '0' ? 'down' : 'up';
},
/* 延伸线方向 = 卡片方向 */
linePos(item) {
return this.cardPos(item);
}
}
};
</script>
<style scoped>
/* 以下样式完全沿用你已有的，无需改动 */
.timeline-wrapper {
display: flex;
align-items: center;
width: 100%;
padding: 0 40px;
width: calc(100vw - 300px);
overflow: auto;
}
.year-box {
width: 80px;
height: 36px;
border-radius: 4px;
background: #055fc2;
color: #fff;
font-size: 18px;
border: none
}
.timeline-box {
flex: 1;
position: relative;
margin-left: 15px;
}
.line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
background-image: url("@/assets/images/bg/timeLine-bg.jpg");
transform: translateY(-50%);
background-size: auto 100%;
}
.node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #409eff;
background: #fff;
margin: 0 auto;
position: relative
}
.dot::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-1px);
width: 1px;
background: #409eff
}
.dot.up::after {
bottom: 100%;
height: 180px
}
.dot.down::after {
top: 100%;
height: 180px
}
.card {
position: absolute;
height: 180px;
padding: 8px 20px;
font-size: 14px;
cursor: pointer
}
.card.up {
bottom: 20px
}
.card.down {
top: 20px
}
.title {
color: #055fc2;
font-size: 18px;
font-weight: 700;
line-height: 26px
}
.content {
color: #5f656c;
font-size: 16px;
line-height: 24px
}
</style>
\ No newline at end of file
src/views/gjOverView/index.vue 0 → 100644
浏览文件 @ 5e0a7819
差异被折叠。
src/views/gjOverView/js/barChart.js 0 → 100644
浏览文件 @ 5e0a7819
import * as echarts from "echarts";
const getColumnChart = (nameList, valueList, isPer) => {
const colorList = ['#0958D9', '#0958D9']
return {
tooltip: {},
grid: { top: '10%', right: '3%', bottom: '0%', left: '3%', containLabel: true },
color: colorList,
xAxis: {
type: 'category',
data: nameList,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
show: true,
color: '#666',
fontSize: 12
}
},
yAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: true, color: '#666' }, // ② Y 轴文字
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
},
graphic: [{ // 右上角单位
type: 'text',
right: 20,
top: 10,
style: { text: '单位：万人', font: '14px sans-serif', fill: '#666' }
}],
series: [{
type: 'bar',
data: valueList.map((v, i) => {
const name = nameList[i] // 对应国家
const iconPath = `/icon/${name}.png`
return {
value: v,
// 1. 图标：inside + 向上偏移，嵌在柱子内部顶部
label: {
show: true,
position: 'inside',
offset: [0, -70], // 向上顶整个图标高（28 px）
align: 'center',
formatter: () => '{icon|}',
rich: {
icon: {
backgroundColor: { image: `/icon/${name}.png` },
width: 18,
height: 18
},
txt: {
padding: [2, 0, 0, 0], // 文字与图标间距
color: '#666',
fontSize: 11
}
}
},
}
}),
barWidth: 20, // 比图标稍宽，保证能包住
itemStyle: {
borderRadius: [16, 16, 0, 0], // 16 = 32/2 → 半圆
color: params => {
const colors = params.dataIndex < 3
? [colorList[0], 'rgba(255,255,255,0)']
: [colorList[1], 'rgba(255,255,255,0)']
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: colors[1] }
])
}
},
}]
}
}
export default getColumnChart
\ No newline at end of file
src/views/gjOverView/js/barChart2.js 0 → 100644
浏览文件 @ 5e0a7819
import * as echarts from "echarts";
const getColumnChart = (nameList, series1, series2, isPer) => {
// 两套渐变
const gradBlue = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#055FC2' },
{ offset: 1, color: '#BAE0FF' }
])
const gradCyan = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#CE4F51' },
{ offset: 1, color: '#FFA39E' }
])
return {
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { top: '10%', right: '3%', bottom: '0%', left: '3%', containLabel: true },
legend: {
data: ['研究型大学', '科技企业', '研究机构'], top: 0, icon: 'circle', textStyle: {
color: "#757B82", //字体颜色
fontSize: "15px",
},
},
xAxis: {
type: 'category',
data: nameList,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: '#666', fontSize: 12 }
},
yAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: true, color: '#666' },
splitLine: { show: true, lineStyle: { color: '#ebebeb' } }
},
series: [
{
name: '研究型大学',
type: 'bar',
data: series1,
barWidth: 8,
label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: gradBlue }
},
{
name: '科技企业',
type: 'bar',
data: series2,
barWidth: 8,
label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: gradCyan }
},
{
name: '研究机构',
type: 'bar',
data: series2,
barWidth: 8,
label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: '#FFC63D' }
}
]
}
}
export default getColumnChart
\ No newline at end of file
src/views/gjOverView/js/barChart3.js 0 → 100644
浏览文件 @ 5e0a7819
import * as echarts from "echarts";
const getColumnChart = (nameList, series1, series2, isPer) => {
const gradBlue = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#055FC2' }, { offset: 1, color: '#BAE0FF' }
])
const gradCyan = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#CE4F51' }, { offset: 1, color: '#FFA39E' }
])
return {
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: {
data: ['集成电路', '生物科技', '量子科技', '能源', '人工智能', '通信网络'],
top: 0,
icon: 'circle',
textStyle: { color: '#757B82', fontSize: 15 }
},
grid: { top: '10%', right: '3%', bottom: '0%', left: '3%', containLabel: true },
xAxis: {
type: 'category',
data: nameList,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: '#666', fontSize: 12 }
},
yAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { color: '#666' },
splitLine: { show: true, lineStyle: { color: '#ebebeb' } }
},
graphic: [{ // 右上角单位
type: 'text',
right: 20,
top: 10,
style: { text: '单位：万人', font: '14px sans-serif', fill: '#666' }
}],
series: [
{
name: '集成电路',
type: 'bar',
stack: 'total', // 堆叠关键
barWidth: 20,
itemStyle: { borderRadius: 0, color: '#0560C3' },
data: series1
},
{
name: '生物科技',
type: 'bar',
stack: 'total',
barWidth: 20,
itemStyle: { borderRadius: 0, color: '#14A8A8' },
data: series2
},
{
name: '量子科技',
type: 'bar',
stack: 'total',
barWidth: 20,
itemStyle: { borderRadius: 0, color: '#722FD1' },
data: series2
},
{
name: '能源',
type: 'bar',
stack: 'total',
barWidth: 20,
itemStyle: { borderRadius: 0, color: '#FA8C15' },
data: series2
},
{
name: '人工智能',
type: 'bar',
stack: 'total',
barWidth: 20,
itemStyle: { borderRadius: 0, color: '#69B2FF' },
data: series2
},
{
name: '通信网络',
type: 'bar',
stack: 'total',
barWidth: 20,
itemStyle: { borderRadius: 0, color: '#CF4F51' },
data: series2
}
]
}
}
export default getColumnChart
\ No newline at end of file
src/views/gjOverView/js/multiLineChart1.js 0 → 100644
浏览文件 @ 5e0a7819
// 直接替换原配置即可
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5, dataY6) => {
return {
tooltip: {
trigger: "axis",
axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } }
},
grid: { top: "22%", right: "5%", bottom: "5%", left: "5%", containLabel: true },
legend: {
data: ["科技法案", "出口管制", "科技政令", "合作限制", "市场准入", "人才限制"],
icon: "circle", // 圆点图例
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: "14px"
}
},
color: ["#055FC2", "#14A8A8", "#722FD1", "#FA8C15", "#69B2FF", "#D35E61"],
xAxis: [
{
type: "category",
boundaryGap: false,
data: dataX,
axisLabel: { rotate: 45 } // 文字向右倾斜
}
],
yAxis: [{ type: "value" }],
graphic: [
{
// 右上角单位
type: "text",
right: 20,
top: 50,
style: { text: "单位：次", font: "14px sans-serif", fill: "#666" }
}
],
series: [
{
name: "科技法案",
type: "line",
lineStyle: {
width: 1.5// 设置折线颜色
},
emphasis: { focus: "series" },
data: dataY1
},
{
name: "出口管制", type: "line", lineStyle: {
width: 1.5// 设置折线颜色
}, emphasis: { focus: "series" }, data: dataY2
},
{
name: "科技政令", type: "line", lineStyle: {
width: 1.5// 设置折线颜色
}, emphasis: { focus: "series" }, data: dataY3
},
{
name: "合作限制", type: "line", lineStyle: {
width: 1.5// 设置折线颜色
}, emphasis: { focus: "series" }, data: dataY4
},
{
name: "市场准入", type: "line", lineStyle: {
width: 1.5// 设置折线颜色
}, emphasis: { focus: "series" }, data: dataY5
},
{
name: "人才限制", type: "line", lineStyle: {
width: 1.5// 设置折线颜色
}, emphasis: { focus: "series" }, data: dataY6
}
]
};
};
export default getMultiLineChart;
src/views/gjOverView/js/multiLineChart2.js 0 → 100644
浏览文件 @ 5e0a7819
import * as echarts from "echarts";
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5, dataY6) => {
const colors = ['#055FC2', '#14A8A8', '#722FD1', '#FA8C15', '#69B2FF', '#D35E61']
const names = ['科技法案', '出口管制', '科技政令', '合作限制', '市场准入', '人才限制']
const dataArr = [dataY1, dataY2, dataY3, dataY4, dataY5, dataY6]
const series = dataArr.map((d, i) => ({
name: names[i],
type: 'line',
symbol: 'none',
lineStyle: { width: 2, color: colors[i] },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[i] },
{ offset: 1, color: 'rgba(255,255,255,0)' }
])
},
data: d,
emphasis: { focus: 'series' },
// 关键：只在最后一个点显示跟随文字
label: {
show: true,
position: 'end', // 最后一个点右侧
formatter: p => `{a|${names[i]}} {b|${names[i]}}`,
rich: {
a: { color: '#757B82', fontSize: 12, padding: [0, 6, 0, 0] },
b: { color: colors[i], fontSize: 12 }
}
}
}))
return {
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
grid: { top: '5%', right: '20%', bottom: '0%', left: '0%', containLabel: true },
xAxis: { type: 'category', boundaryGap: false, data: dataX },
yAxis: { type: 'value', splitLine: { lineStyle: { color: '#ebebeb' } } },
legend: { show: false }, // 隐藏官方 legend
color: colors,
series
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/gjOverView/js/pictorialBarChar.js 0 → 100644
浏览文件 @ 5e0a7819
import * as echarts from "echarts";
const getColumnChart = (nameList, valueList, isPer) => {
const colorList = ['#0958D9', '#0958D9']
return {
grid: {
top: 30,
height: 300, // 关键：压矮整个图
bottom: 40, // 给 X 轴文字留位置
left: 40
},
xAxis: [
{
data: [
"研发投入",
"科技人才",
"创新主体",
"科学数据",
"科研仪器",
],
axisLabel: {
color: "#84888F",
fontSize: 16,
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}
],
yAxis: [
{
nameTextStyle: {
color: "#8CB5E2"
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
axisLabel: {
color: "#84888F",
fontSize: 14,
}
}
],
graphic: [{ // 右上角单位
type: 'text',
right: 20,
top: 10,
style: { text: '单位：次', font: '14px sans-serif', fill: '#666' }
}],
// 使用内部缩放（滚轮缩放、鼠标拖着左右滑动）
dataZoom: [
{
type: "inside",
minValueSpan: 6, // 最小展示数
start: 0, // 开始展示位置（默认）
end: 5 // 结束展示位置 （默认）
}
],
series: [
{
name: "hill",
// 象柱形图
type: "pictorialBar",
// 同一系列的柱间距离
barCategoryGap: "-60%",
// 自定义svg 图标 (三角锥形的关键)
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
// 默认就把数值显示在顶部
label: {
show: true,
position: 'top',
distance: 4, // 与柱顶距离
color: 'rgba(5, 95, 194, 1)', // 字体颜色
fontSize: 16
},
// 默认样式
itemStyle: {
label: {
show: false
},
borderColor: "#4286D1",
borderWidth: 0,
color: {
colorStops: [
{
offset: 0,
color: "rgba(66,134,209, 1)"
},
{
offset: 1,
color: "rgba(66,134,209, 0)"
}
]
}
},
// 鼠标滑过样式
emphasis: {
label: {
show: true,
position: "top",
color: "#12DCFF"
},
itemStyle: {
borderColor: "#17cdfa",
borderWidth: 2,
color: {
colorStops: [
{
offset: 0,
color: "rgba(0,238,255, 0.09)"
},
{
offset: 1,
color: "rgba(23,205,250, 0.5)"
}
]
}
}
},
data: [
227,
194,
182,
120,
99,
],
z: 10
}
]
}
}
export default getColumnChart
\ No newline at end of file
src/views/gjOverView/js/radarChart.js 0 → 100644
浏览文件 @ 5e0a7819
import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => {
const option = {
title: { text: '' },
legend: {
icon: 'circle',
orient: 'horizontal', // 横向
top: 0, // 图上方
left: 'center', // 水平居中
textStyle: {
fontSize: 14 // 字号，按需调整
},
grid: { top: 60 },
data: ['美国', '欧盟', '英国', '日本', '韩国', '加拿大']
},
radar: {
radius: '60%', // 关键：缩小整个雷达
center: ['50%', '60%'], // 可选：再往下挪一点，避免图例挤在一起
indicator: [
{ name: '能源', max: 6500 },
{ name: '集成电路', max: 16000 },
{ name: '人工智能', max: 30000 },
{ name: '通信网络', max: 38000 },
{ name: '量子科技', max: 52000 },
{ name: '生物科技', max: 25000 }
],
axisName: {
formatter: '{value}',
color: 'rgba(59, 65, 75, 1)',
fontSize: 14,
fontWeight: 400
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
symbol: 'none',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '美国',
areaStyle: { color: 'rgba(10, 87, 166, 0.2)' }
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '欧盟',
areaStyle: { color: 'rgba(206, 79, 81, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '英国',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '日本',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '韩国',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '加拿大',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
}
]
}
]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/gjOverView/js/radarChart2.js 0 → 100644
浏览文件 @ 5e0a7819
import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => {
const option = {
title: { text: '' },
radar: {
radius: '50%', // 关键：缩小整个雷达
center: ['50%', '45%'], // 可选：再往下挪一点，避免图例挤在一起
indicator: [
{ name: '能源', max: 6500 },
{ name: '集成电路', max: 16000 },
{ name: '人工智能', max: 30000 },
{ name: '通信网络', max: 38000 },
{ name: '量子科技', max: 52000 },
{ name: '生物科技', max: 25000 }
],
axisName: {
formatter: '{value}',
color: 'rgba(59, 65, 75, 1)',
fontSize: 14,
fontWeight: 400
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
symbol: 'none',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '中国',
areaStyle: { color: 'rgba(10, 87, 166, 0.2)' }
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '美国',
areaStyle: { color: 'rgba(206, 79, 81, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '欧盟',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '英国',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '日本',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: '韩国',
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
}
]
}
]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/overView/component/ResourceSupport.vue
浏览文件 @ 5e0a7819
<!-- 中M博弈资源支撑 -->
<template>
<div class="resource-box">
<div class="resource-box" style="margin-top: 130px;">
<DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 49.25%; display: block;">
......@@ -76,13 +76,34 @@
<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 class="item-header-right" style="color: rgba(132, 136, 142, 1);"> <img class="item-header-right-icon"
src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<el-radio-group v-model="putIntoBtn" size="small" @change="handlePutIntoBtn" style="margin-left: 20px;">
<el-radio-button value="development" border>研发经费
</el-radio-button>
<el-radio-button value="GDP" border>GDP占比</el-radio-button>
</el-radio-group>
<div style="display: flex;margin: 10px; align-items: center;justify-content: space-between;">
<el-radio-group v-model="putIntoBtn" size="small" @change="handlePutIntoBtn" style="margin-left: 20px;">
<el-radio-button value="development" border>研发经费
</el-radio-button>
<el-radio-button value="GDP" border>GDP占比</el-radio-button>
</el-radio-group>
<div style="display: flex;width: 200px;align-items: center;">
<div class="legend-icon" style="background-color:#CE4F51 ;">
</div>
中国
<div class="legend-icon" style="background-color:#055FC2 ;">
</div>
美国
</div>
<el-select v-model="areaSelect" placeholder="" style="width: 150px;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>
</div>
</div>
<div style="display: flex;height: calc(100% - 60px);" id="char3">
</div>
</div>
......@@ -93,12 +114,40 @@
<div class="item-header-right"> 查看数据源> </div>
</div>
<div class="item-header-divider"></div>
<el-select v-model="areaSelect" 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="char4">
<div style="display: flex;height: 400px;">
<div style=" width:60%;height: 100%;" id="char4">
</div>
<div style="display: grid;width: 35%;margin: 10px;">
<el-select v-model="areaSelect" placeholder="" style="width: 150px;float: right ;" size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div>
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between;">
<div class="legend-icon" style="background-color:#CE4F51 ;">
</div>
<div>
中国
</div>
<div>
11832亿美元
</div>
</div>
<div
style="display: flex;align-items: center;height: 30px;justify-content: space-between;margin-top: 40px;">
<div class="legend-icon" style="background-color:#055FC2 ;">
</div>
<div>
美国
</div>
<div>
11832亿美元
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
......@@ -106,13 +155,27 @@
<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 class="item-header-right" style="color: rgba(132, 136, 142, 1);"> <img class="item-header-right-icon"
src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</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; width: calc(100% - 40px); margin: 10px; align-items: center; justify-content: space-between;">
<!-- 左侧图例 -->
<div style="display: flex; align-items: center;">
<div class="legend-icon" style="background-color:#CE4F51;"></div>中国
<div class="legend-icon" style="background-color:#055FC2;"></div>美国
</div>
<!-- 右侧选择器 -->
<el-select v-model="patentSelect" placeholder="" style="width: 150px;" size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div style="display: flex;height: calc(100% - 60px);width: 100%;" id="char5">
</div>
......@@ -124,10 +187,22 @@
<div class="item-header-right"> 查看数据源> </div>
</div>
<div class="item-header-divider"></div>
<el-select v-model="paperSelect" 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; width: calc(100% - 40px); margin: 10px; align-items: center; justify-content: space-between;">
<!-- 左侧图例 -->
<div style="display: flex; align-items: center;">
<div class="legend-icon" style="background-color:#CE4F51;"></div>中国
<div class="legend-icon" style="background-color:#055FC2;"></div>美国
</div>
<!-- 右侧选择器 -->
<el-select v-model="paperSelect" placeholder="" style="width: 150px;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>
<div style="display: flex;height: calc(100% - 60px);width: 100%;" id="char6">
</div>
</div>
......@@ -170,7 +245,7 @@ const timeList = ref([
]);
const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
const names = ['2021', '2022', '2023', '2024', '2025']
const data1 = [120, 200, 150, 80, 70]
const data2 = [90, 230, 180, 110, 100]
......@@ -416,7 +491,7 @@ onMounted(() => {
}
.item-header-right {
color: rgba(59, 65, 75, 1);
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
line-height: 48px;
......@@ -468,6 +543,13 @@ onMounted(() => {
background: #eaecee;
}
.legend-icon {
width: 14px;
height: 14px;
border-radius: 50%;
margin: 0 10px;
}
.resource-btn-left {
height: 100%;
width: 24px;
......
src/views/overView/component/Thematicanalysis.vue
浏览文件 @ 5e0a7819
<!-- 打压遏制ts分析 -->
<template>
<div class="thematic-box">
<div class="title-text">中美博弈专题分析</div>
<div style="width: 100%;display: flex;
justify-content: center; ">
<div class="title-text">中美博弈专题分析</div>
</div>
<DivideHeader class="divide" :titleText="'打压遏制态势分析'"></DivideHeader>
<DivideHeader class="divide" titleText="打压遏制态势分析"></DivideHeader>
<div class="thematic-content">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
......@@ -29,14 +33,14 @@
</div>
<div class="cup-box" style="display: flex;">
<div v-for="item in distributionColor" class="cup-item-box" :style="{
color: `hsla(${item.color[0]}, ${item.color[1]}%, ${item.color[2]}%, ${1})`
<div v-for="item in distribution" class="cup-item-box" :style="{
color: `${item.color[3]}`
}" @click="handleClickItem(item)">
<div class="cup-title">
{{ item.titlle }}
</div>
<WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" />
<div style="margin-top: 20px;">
<div>
{{ item.change }}
</div>
</div>
......@@ -55,7 +59,7 @@
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;">
<div style="display: flex;margin: 10px;">
<el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
<el-radio-button value="all" border>全部领域
</el-radio-button>
......@@ -82,11 +86,81 @@
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;" size="small">
<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char2">
<div style="display: flex;height: 400px;">
<div style=" width:60%;height: 100%;" id="char2">
</div>
<div style="display: grid;width: 35%;margin: 10px;">
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;margin: 10px;" size="small">
<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div>
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between;">
<div class="legend-icon" style="background-color:#CE4F51 ;">
</div>
<div>
法案
</div>
<div>
19个
</div>
</div>
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ;">
<div class="legend-icon" style="background-color:#14A8A8 ;">
</div>
<div>
行政令
</div>
<div>
14个
</div>
</div>
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ">
<div class="legend-icon" style="background-color:#722FD1 ;">
</div>
<div>
科技智库
</div>
<div>
24篇
</div>
</div>
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ">
<div class="legend-icon" style="background-color:#FA8C15 ;">
</div>
<div>
出口管制
</div>
<div>
6项
</div>
</div>
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ">
<div class="legend-icon" style="background-color:#69B2FF ;">
</div>
<div>
投融资限制
</div>
<div>
7项
</div>
</div>
<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ">
<div class="legend-icon" style="background-color:#CF4F51 ;">
</div>
<div>
市场准入
</div>
<div>
2项
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -165,40 +239,45 @@ const distribution = ref([
value: 80,
text: "1626",
unit: "个",
change: "较上个月+3",
path: '/billHome'
change: "较上月+3",
path: '/billHome',
color: ['#9AC8FF', '#BCDCFF', '#E7F4FF', '#0F5EDB']
},
{
titlle: "行政令",
value: 20,
text: "1626",
unit: "个",
change: "较上个月+1",
path: '/decree'
change: "较上月+1",
path: '/decree',
color: ['#FDE19A', '#FEECBD', '#FFFBE6', '#D68E16']
},
{
titlle: "科技智库",
value: 10,
text: "66",
unit: "次",
change: "较上个月+2",
path: '/thinkTank'
change: "较上月+2",
path: '/thinkTank',
color: ['#C9AAF0', '#DFCAF6', '#FAF1FF', '#531DAC']
},
{
titlle: "出口管制",
value: 33,
text: "66",
unit: "次",
change: "较上个月+1",
path: '/exportControl'
change: "较上月+1",
path: '/exportControl',
color: ['#96DFDD', '#BCEFEC', '#E7FFFB', '#006E75']
},
{
titlle: "投融资限制",
value: 80,
text: "119",
unit: "次",
change: "较上个月+1",
path: '/finance'
change: "较上月+1",
path: '/finance',
color: ['#F5BEBC', '#F7D3D0', '#FEF1F0', '#C64C4E']
},
{
titlle: "市场准入",
......@@ -206,7 +285,8 @@ const distribution = ref([
text: "223",
unit: "次",
change: "较上个月+1",
path: '/marketAccessRestrictions'
path: '/marketAccessRestrictions',
color: ['#FFE3B9', '#FFEDCE', '#FFF7E6', '#D46B08']
}
]);
......@@ -361,6 +441,7 @@ onMounted(() => {
}
.title-text {
width: 280px;
font-size: 32px;
font-weight: 700;
line-height: 42px;
......@@ -467,4 +548,11 @@ onMounted(() => {
margin-top: calc(50% - 24px);
}
}
.legend-icon {
width: 14px;
height: 14px;
border-radius: 50%;
margin: 0 10px;
}
</style>
src/views/overView/component/Timeline.vue
浏览文件 @ 5e0a7819
......@@ -14,11 +14,12 @@
<!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)">
<div class="title">
<div class="time">
{{ item.time }}
</div>
<div class="title">
{{ item.title }}
<img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;"></img>
</div>
<div class="content">
{{ item.content }}
......@@ -199,9 +200,10 @@ export default {
font-size: 14px;
}
.title {
.time {
color: rgba(5, 95, 194, 1);
font-size: 18px;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
......@@ -210,6 +212,7 @@ export default {
.title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
......@@ -219,6 +222,7 @@ export default {
.content {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
......
src/views/overView/component/WaveBall.vue
浏览文件 @ 5e0a7819
......@@ -43,29 +43,37 @@ const makeOption = () => {
{ value: p, direction: 'right' },
{ value: p, direction: 'left' } // 两层波浪反向
],
color: [`hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${1})`, `hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${0.8})`],
color: [` ${props.color[1]}`, ` ${props.color[0]}`],
waveAnimation: true,
animationEasingUpdate: 'cubicOut',
outline: {
show: true,
borderDistance: 4, // 第一层边框
borderDistance: 2, // 第一层边框
itemStyle: {
borderWidth: 3,
borderColor: `hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${0.5})`
shadowBlur: 0, // 同样设为 0
borderWidth: 1,
borderColor: `${props.color[0]}`,
shadowColor: 'transparent'
}
},
backgroundStyle: {
color: '#ffffff',
shadowColor: '#fff', //阴影
shadowBlur: 0, //阴影模糊
// 1. 关掉波浪的阴影
itemStyle: {
shadowBlur: 0, // 关键：阴影范围设为 0
shadowColor: 'transparent'
},
backgroundStyle: {
color: `${props.color[2]}`,
borderWidth: 1,
borderColor: `${props.color[1]}`, // 中间区域保持透明
shadowBlur: 0
},
label: {
show: true,
formatter: `${props.data.text}` + `${props.data.unit}`,
fontSize: 24,
color: `hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${1})`,
// insideColor: '#fff'
color: `${props.color[3]}`,
insideColor: `${props.color[3]}`,
}
}]
}
......
src/views/overView/index.vue
浏览文件 @ 5e0a7819
......@@ -81,7 +81,7 @@
<div class="item-header-text" style="background-color: #CE4F51;">风险信号</div>
</div>
<div class="item-header-divider"></div>
<div style="padding: 30px 10px;height: 350px;">
<div style="padding: 30px 23px;height: 350px;">
<div class="waring-item" v-for="(item, index) in warningList" :key="index">
<div style="display: flex;height: 40px;">
<div class="waring-status" :style="{
......@@ -377,6 +377,8 @@ onMounted(() => { });
width: 100%;
height: 100%;
overflow: hidden;
font-family: Microsoft YaHei;
background-color: #ffffff;
.content-title {
height: 64px;
......@@ -398,23 +400,28 @@ onMounted(() => { });
padding: 0 10%;
.title-text {
margin-top: 56px;
font-size: 32px;
font-weight: 700;
line-height: 42px;
margin: 40px;
letter-spacing: 0px;
text-align: center;
}
.title-text-small {
font-size: 20px;
font-weight: 400;
line-height: 30px;
margin: 40px;
text-align: center;
margin-top: 8px;
color: rgba(59, 65, 75, 1);
font-size: 20px;
font-weight: 400;
line-height: 26px;
}
/* 父级：2×2 网格，固定间距 */
.box {
margin-top: 57px;
display: grid;
grid-template-columns: 2fr 1fr;
/* 左列宽是右列的 2 倍 */
......@@ -645,13 +652,15 @@ onMounted(() => { });
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 14px;
margin-right: 5px;
padding: 2px;
font-size: 12px;
text-align: center;
}
.waring-text {
color: rgba(59, 65, 75, 1);
width: calc(100% - 180px);
width: calc(100% - 80px);
padding: 0 16px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
......
src/views/overView/js/barChart2.js
浏览文件 @ 5e0a7819
......@@ -13,13 +13,13 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
return {
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { top: '10%', right: '3%', bottom: '15%', left: '3%', containLabel: true },
legend: { data: ['中国', '美国'], top: 0 },
// legend: { data: ['中国', '美国'], top: 0 },
xAxis: {
type: 'category',
data: nameList,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { rotate: 45, color: '#666', fontSize: 12 }
axisLabel: { color: '#666', fontSize: 12 }
},
yAxis: {
type: 'value',
......
src/views/overView/js/multiLineChart1.js
浏览文件 @ 5e0a7819
......@@ -14,15 +14,15 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
grid: {
top: '8%',
right: '5%',
bottom: '5%',
bottom: '15%',
left: '5%',
containLabel: true
},
legend: {
data: ['中国', '美国'],
show: true
},
color: ['#AED6FF', '#FF7875'],
// legend: {
// data: ['中国', '美国'],
// show: true
// },
color: ['#0958D9', '#FF7875'],
xAxis: [
{
type: 'category',
......
src/views/overView/js/radarChart.js
浏览文件 @ 5e0a7819
......@@ -3,15 +3,16 @@ import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => {
const option = {
title: { text: '' },
legend: {
icon: 'circle',
orient: 'vertical', // 纵向排列
right: 0, // 贴右边
top: 'center', // 垂直居中
align: 'left', // 文字在图标左侧
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
},
// legend: {
// icon: 'circle',
// orient: 'vertical', // 纵向排列
// right: 0, // 贴右边
// top: 'center', // 垂直居中
// align: 'left', // 文字在图标左侧
// data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
// },
radar: {
radius: '50%', // 关键：缩小整个雷达
indicator: [
{ name: '能源', max: 6500 },
{ name: '集成电路', max: 16000 },
......
src/views/overView/js/radarChart2.js
浏览文件 @ 5e0a7819
......@@ -3,15 +3,16 @@ import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => {
const option = {
title: { text: '' },
legend: {
icon: 'circle',
orient: 'vertical', // 纵向排列
right: 0, // 贴右边
top: 'center', // 垂直居中
align: 'left', // 文字在图标左侧
data: ['中国', '美国']
},
// legend: {
// icon: 'circle',
// orient: 'vertical', // 纵向排列
// right: 0, // 贴右边
// top: 'center', // 垂直居中
// align: 'left', // 文字在图标左侧
// data: ['中国', '美国']
// },
radar: {
radius: '50%', // 关键：缩小整个雷达
indicator: [
{ name: '能源', max: 6500 },
{ name: '集成电路', max: 16000 },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论