Skip to content

R
risk-monitor
提交 66bfd322 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

概览样式完善（gj时间轴图标待加，最后一个图表标注待加）

上级 8902f9da
隐藏空白字符变更
内嵌 并排
正在显示 包含 396 行增加 和 164 行删除
src/views/bill/introdoction/utils/barchart.js
浏览文件 @ 66bfd322
...@@ -24,22 +24,22 @@ const getbarChart = (data) => { ...@@ -24,22 +24,22 @@ const getbarChart = (data) => {
0, 0,
0, 0,
1, [{ 1, [{
offset: 0, offset: 0,
color: "#3e7697", color: "#3e7697",
}, },
{ {
offset: 1, offset: 1,
color: "#152d47", color: "#152d47",
}, },
], ],
false false
), ),
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -59,37 +59,37 @@ const getbarChart = (data) => { ...@@ -59,37 +59,37 @@ const getbarChart = (data) => {
nameTextStyle: { fontSize: "14px" }, nameTextStyle: { fontSize: "14px" },
show: false, show: false,
axisLine: { axisLine: {
lineStyle: { : {
color: "#ccc", color: "#ccc",
}, },
show: false, show: false,
}, },
splitLine: { splitLine: {
lineStyle: { : {
color: "#888", color: "#888",
}, },
show: false, show: false,
}, },
}, },
series: [ series: [
{ {
type: "bar", type: "bar",
barWidth: "36px", barWidth: "36px",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(67,188,255,1)" }, { offset: 0, color: "rgba(67,188,255,1)" },
{ offset: 1, color: "rgba(67,188,255,0.5)" }, { offset: 1, color: "rgba(67,188,255,0.5)" },
]), ]),
}, },
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
}, },
data: data.datay data: data.datay
} }
], ],
}; };
} }
......
src/views/gjOverView/component/MeansAnalysis.vue
浏览文件 @ 66bfd322
...@@ -94,13 +94,13 @@ const course = ref([ ...@@ -94,13 +94,13 @@ const course = ref([
unit: "0" unit: "0"
}, },
{ {
time: "2025-08-19", time: "2025-08-20",
title: "中国加速成熟制程产能扩张引发欧美担忧", title: "中国加速成熟制程产能扩张引发欧美担忧",
content: "中国在成熟制程半导体(28nm及以上)的产能正急剧扩张。此举引发美国和欧洲联盟的...", content: "中国在成熟制程半导体(28nm及以上)的产能正急剧扩张。此举引发美国和欧洲联盟的...",
unit: "0" unit: "0"
}, },
{ {
time: "2025-10-17", time: "2025-08-17",
title: "美国进一步收紧对华AI芯片出口限制", title: "美国进一步收紧对华AI芯片出口限制",
content: "美国商务部工业和安全局(BIS)宣布更新“先进计算芯片规则”，大幅收紧对向中...", content: "美国商务部工业和安全局(BIS)宣布更新“先进计算芯片规则”，大幅收紧对向中...",
unit: "2" unit: "2"
......
src/views/gjOverView/component/Timeline.vue
浏览文件 @ 66bfd322
...@@ -3,13 +3,14 @@ ...@@ -3,13 +3,14 @@
<button class="year-box">2025</button> <button class="year-box">2025</button>
<div class="timeline-box"> <div class="timeline-box">
<div class="line" /> <div class="line" style="width:100vw ;" />
<!-- 一次性渲染全部节点 --> <!-- 一次性渲染全部节点 -->
<div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)"> <div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)">
<!-- 圆环 --> <!-- 圆环 -->
<div class="dot" :class="linePos(item)" /> <div class="dot" :class="linePos(item)" />
<!-- 卡片 --> <!-- 卡片 -->
<div class="card" :class="[cardPos(item), 'right-side']" @click="$emit('click-card', 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.time }}</div>
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div> <div class="content">{{ item.content }}</div>
...@@ -28,9 +29,14 @@ export default { ...@@ -28,9 +29,14 @@ export default {
idKey: { type: String, default: 'id' } idKey: { type: String, default: 'id' }
}, },
methods: { 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) { leftStyle(i) {
return { left: `${(i * 100) / (this.data.length - 1)}%` }; return { left: `${(i * 100) / (this.data.length - 1)}vw` };
}, },
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */ /* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) { cardPos(item) {
...@@ -50,7 +56,10 @@ export default { ...@@ -50,7 +56,10 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0 40px padding: 0 40px;
width: calc(100vw - 300px);
overflow: auto;
} }
.year-box { .year-box {
...@@ -66,7 +75,8 @@ export default { ...@@ -66,7 +75,8 @@ export default {
.timeline-box { .timeline-box {
flex: 1; flex: 1;
position: relative; position: relative;
margin-left: 15px margin-left: 15px;
} }
.line { .line {
...@@ -120,9 +130,8 @@ export default { ...@@ -120,9 +130,8 @@ export default {
.card { .card {
position: absolute; position: absolute;
width: 15vw;
height: 180px; height: 180px;
padding: 8px 12px; padding: 8px 20px;
font-size: 14px; font-size: 14px;
cursor: pointer cursor: pointer
} }
......
src/views/gjOverView/js/multiLineChart1.js
浏览文件 @ 66bfd322
...@@ -2,38 +2,74 @@ ...@@ -2,38 +2,74 @@
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5, dataY6) => { const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5, dataY6) => {
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } }
}, },
grid: { top: '12%', right: '5%', bottom: '12%', left: '5%', containLabel: true }, grid: { top: "22%", right: "5%", bottom: "5%", left: "5%", containLabel: true },
legend: { legend: {
data: ['科技法案', '出口管制', '科技政令', '合作限制', '市场准入', '人才限制'], data: ["科技法案", "出口管制", "科技政令", "合作限制", "市场准入", "人才限制"],
icon: 'circle', // 圆点图例 icon: "circle", // 圆点图例
itemWidth: 10, itemWidth: 10,
itemHeight: 10 itemHeight: 10,
textStyle: {
fontSize: "14px"
}
}, },
color: ['#055FC2', '#14A8A8', '#722FD1', '#FA8C15', '#69B2FF', '#D35E61'], color: ["#055FC2", "#14A8A8", "#722FD1", "#FA8C15", "#69B2FF", "#D35E61"],
xAxis: [{ xAxis: [
type: 'category', {
boundaryGap: false, type: "category",
data: dataX, boundaryGap: false,
axisLabel: { rotate: 45 } // 文字向右倾斜 data: dataX,
}], axisLabel: { rotate: 45 } // 文字向右倾斜
yAxis: [{ type: 'value' }], }
graphic: [{ // 右上角单位 ],
type: 'text', yAxis: [{ type: "value" }],
right: 20, graphic: [
top: 30, {
style: { text: '次', font: '12px sans-serif', fill: '#666' } // 右上角单位
}], type: "text",
right: 20,
top: 50,
style: { text: "单位：次", font: "14px sans-serif", fill: "#666" }
}
],
series: [ series: [
{ name: '科技法案', type: 'line', emphasis: { focus: 'series' }, data: dataY1 }, {
{ name: '出口管制', type: 'line', emphasis: { focus: 'series' }, data: dataY2 }, name: "科技法案",
{ name: '科技政令', type: 'line', emphasis: { focus: 'series' }, data: dataY3 }, type: "line",
{ name: '合作限制', type: 'line', emphasis: { focus: 'series' }, data: dataY4 }, lineStyle: {
{ name: '市场准入', type: 'line', emphasis: { focus: 'series' }, data: dataY5 }, width: 1.5// 设置折线颜色
{ name: '人才限制', type: 'line', emphasis: { focus: 'series' }, data: dataY6 } },
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 export default getMultiLineChart;
\ No newline at end of file
src/views/gjOverView/js/pictorialBarChar.js
浏览文件 @ 66bfd322
...@@ -5,7 +5,8 @@ const getColumnChart = (nameList, valueList, isPer) => { ...@@ -5,7 +5,8 @@ const getColumnChart = (nameList, valueList, isPer) => {
grid: { grid: {
top: 30, top: 30,
height: 300, // 关键：压矮整个图 height: 300, // 关键：压矮整个图
bottom: 40 // 给 X 轴文字留位置 bottom: 40, // 给 X 轴文字留位置
left: 40
}, },
xAxis: [ xAxis: [
{ {
...@@ -18,7 +19,7 @@ const getColumnChart = (nameList, valueList, isPer) => { ...@@ -18,7 +19,7 @@ const getColumnChart = (nameList, valueList, isPer) => {
], ],
axisLabel: { axisLabel: {
color: "#84888F", color: "#84888F",
fontSize: 10, fontSize: 16,
}, },
axisTick: { axisTick: {
...@@ -43,7 +44,8 @@ const getColumnChart = (nameList, valueList, isPer) => { ...@@ -43,7 +44,8 @@ const getColumnChart = (nameList, valueList, isPer) => {
} }
}, },
axisLabel: { axisLabel: {
color: "#84888F" color: "#84888F",
fontSize: 14,
} }
} }
], ],
...@@ -51,7 +53,7 @@ const getColumnChart = (nameList, valueList, isPer) => { ...@@ -51,7 +53,7 @@ const getColumnChart = (nameList, valueList, isPer) => {
type: 'text', type: 'text',
right: 20, right: 20,
top: 10, top: 10,
style: { text: '单位：次', font: '12px sans-serif', fill: '#666' } style: { text: '单位：次', font: '14px sans-serif', fill: '#666' }
}], }],
// 使用内部缩放（滚轮缩放、鼠标拖着左右滑动） // 使用内部缩放（滚轮缩放、鼠标拖着左右滑动）
dataZoom: [ dataZoom: [
...@@ -77,7 +79,7 @@ const getColumnChart = (nameList, valueList, isPer) => { ...@@ -77,7 +79,7 @@ const getColumnChart = (nameList, valueList, isPer) => {
position: 'top', position: 'top',
distance: 4, // 与柱顶距离 distance: 4, // 与柱顶距离
color: 'rgba(5, 95, 194, 1)', // 字体颜色 color: 'rgba(5, 95, 194, 1)', // 字体颜色
fontSize: 11 fontSize: 16
}, },
// 默认样式 // 默认样式
itemStyle: { itemStyle: {
......
src/views/gjOverView/js/radarChart.js
浏览文件 @ 66bfd322
...@@ -9,15 +9,15 @@ const getBarChart = (nameList, valueList, isPer) => { ...@@ -9,15 +9,15 @@ const getBarChart = (nameList, valueList, isPer) => {
top: 0, // 图上方 top: 0, // 图上方
left: 'center', // 水平居中 left: 'center', // 水平居中
textStyle: { textStyle: {
fontSize: 16 // 字号，按需调整 fontSize: 14 // 字号，按需调整
}, },
grid: { top: 60 }, grid: { top: 60 },
data: ['美国', '欧盟', '英国', '日本', '韩国', '加拿大'] data: ['美国', '欧盟', '英国', '日本', '韩国', '加拿大']
}, },
radar: { radar: {
radius: '50%', // 关键：缩小整个雷达 radius: '60%', // 关键：缩小整个雷达
center: ['50%', '45%'], // 可选：再往下挪一点，避免图例挤在一起 center: ['50%', '60%'], // 可选：再往下挪一点，避免图例挤在一起
indicator: [ indicator: [
{ name: '能源', max: 6500 }, { name: '能源', max: 6500 },
{ name: '集成电路', max: 16000 }, { name: '集成电路', max: 16000 },
...@@ -29,7 +29,7 @@ const getBarChart = (nameList, valueList, isPer) => { ...@@ -29,7 +29,7 @@ const getBarChart = (nameList, valueList, isPer) => {
axisName: { axisName: {
formatter: '{value}', formatter: '{value}',
color: 'rgba(59, 65, 75, 1)', color: 'rgba(59, 65, 75, 1)',
fontSize: 16, fontSize: 14,
fontWeight: 400 fontWeight: 400
} }
}, },
......
src/views/overView/component/ResourceSupport.vue
浏览文件 @ 66bfd322
<!-- 中M博弈资源支撑 --> <!-- 中M博弈资源支撑 -->
<template> <template>
<div class="resource-box"> <div class="resource-box" style="margin-top: 130px;">
<DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader> <DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader>
<div style="margin-top: 20px;height: 450px;display: flex;"> <div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 49.25%; display: block;"> <div class="resource-content" style="width: 49.25%; display: block;">
...@@ -76,13 +76,34 @@ ...@@ -76,13 +76,34 @@
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">研发投入情况</div> <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>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<el-radio-group v-model="putIntoBtn" size="small" @change="handlePutIntoBtn" style="margin-left: 20px;"> <div style="display: flex;margin: 10px; align-items: center;justify-content: space-between;">
<el-radio-button value="development" border>研发经费 <el-radio-group v-model="putIntoBtn" size="small" @change="handlePutIntoBtn" style="margin-left: 20px;">
</el-radio-button> <el-radio-button value="development" border>研发经费
<el-radio-button value="GDP" border>GDP占比</el-radio-button> </el-radio-button>
</el-radio-group> <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 style="display: flex;height: calc(100% - 60px);" id="char3">
</div> </div>
</div> </div>
...@@ -93,12 +114,40 @@ ...@@ -93,12 +114,40 @@
<div class="item-header-right"> 查看数据源> </div> <div class="item-header-right"> 查看数据源> </div>
</div> </div>
<div class="item-header-divider"></div> <div class="item-header-divider"></div>
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;margin-right: 20px;" <div style="display: flex;height: 400px;">
size="small"> <div style=" width:60%;height: 100%;" id="char4">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" /> </div>
</el-select> <div style="display: grid;width: 35%;margin: 10px;">
<div style="display: flex;height: calc(100% - 60px);" id="char4"> <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>
</div> </div>
<div style="margin-top: 20px;height: 450px;display: flex;"> <div style="margin-top: 20px;height: 450px;display: flex;">
...@@ -106,13 +155,27 @@ ...@@ -106,13 +155,27 @@
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">专利申请情况</div> <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>
<div class="item-header-divider"></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" /> <div
</el-select> 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 style="display: flex;height: calc(100% - 60px);width: 100%;" id="char5">
</div> </div>
...@@ -124,10 +187,22 @@ ...@@ -124,10 +187,22 @@
<div class="item-header-right"> 查看数据源> </div> <div class="item-header-right"> 查看数据源> </div>
</div> </div>
<div class="item-header-divider"></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" /> <div
</el-select> 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 style="display: flex;height: calc(100% - 60px);width: 100%;" id="char6">
</div> </div>
</div> </div>
...@@ -170,7 +245,7 @@ const timeList = ref([ ...@@ -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 data1 = [120, 200, 150, 80, 70]
const data2 = [90, 230, 180, 110, 100] const data2 = [90, 230, 180, 110, 100]
...@@ -416,7 +491,7 @@ onMounted(() => { ...@@ -416,7 +491,7 @@ onMounted(() => {
} }
.item-header-right { .item-header-right {
color: rgba(59, 65, 75, 1); color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
line-height: 48px; line-height: 48px;
...@@ -468,6 +543,13 @@ onMounted(() => { ...@@ -468,6 +543,13 @@ onMounted(() => {
background: #eaecee; background: #eaecee;
} }
.legend-icon {
width: 14px;
height: 14px;
border-radius: 50%;
margin: 0 10px;
}
.resource-btn-left { .resource-btn-left {
height: 100%; height: 100%;
width: 24px; width: 24px;
......
src/views/overView/component/Thematicanalysis.vue
浏览文件 @ 66bfd322
<!-- 打压遏制ts分析 --> <!-- 打压遏制ts分析 -->
<template> <template>
<div class="thematic-box"> <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="thematic-content">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
...@@ -29,14 +33,14 @@ ...@@ -29,14 +33,14 @@
</div> </div>
<div class="cup-box" style="display: flex;"> <div class="cup-box" style="display: flex;">
<div v-for="item in distributionColor" class="cup-item-box" :style="{ <div v-for="item in distribution" class="cup-item-box" :style="{
color: `hsla(${item.color[0]}, ${item.color[1]}%, ${item.color[2]}%, ${1})` color: `${item.color[3]}`
}" @click="handleClickItem(item)"> }" @click="handleClickItem(item)">
<div class="cup-title"> <div class="cup-title">
{{ item.titlle }} {{ item.titlle }}
</div> </div>
<WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" /> <WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" />
<div style="margin-top: 20px;"> <div>
{{ item.change }} {{ item.change }}
</div> </div>
</div> </div>
...@@ -55,7 +59,7 @@ ...@@ -55,7 +59,7 @@
数据来源：美国某某局</div> 数据来源：美国某某局</div>
</div> </div>
<div class="item-header-divider"></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-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
<el-radio-button value="all" border>全部领域 <el-radio-button value="all" border>全部领域
</el-radio-button> </el-radio-button>
...@@ -82,11 +86,81 @@ ...@@ -82,11 +86,81 @@
数据来源：美国某某局</div> 数据来源：美国某某局</div>
</div> </div>
<div class="item-header-divider"></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" /> <div style="display: flex;height: 400px;">
</el-select> <div style=" width:60%;height: 100%;" id="char2">
<div style="display: flex;height: calc(100% - 60px);" 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> </div>
</div> </div>
...@@ -165,40 +239,45 @@ const distribution = ref([ ...@@ -165,40 +239,45 @@ const distribution = ref([
value: 80, value: 80,
text: "1626", text: "1626",
unit: "个", unit: "个",
change: "较上个月+3", change: "较上月+3",
path: '/billHome' path: '/billHome',
color: ['#9AC8FF', '#BCDCFF', '#E7F4FF', '#0F5EDB']
}, },
{ {
titlle: "行政令", titlle: "行政令",
value: 20, value: 20,
text: "1626", text: "1626",
unit: "个", unit: "个",
change: "较上个月+1", change: "较上月+1",
path: '/decree' path: '/decree',
color: ['#FDE19A', '#FEECBD', '#FFFBE6', '#D68E16']
}, },
{ {
titlle: "科技智库", titlle: "科技智库",
value: 10, value: 10,
text: "66", text: "66",
unit: "次", unit: "次",
change: "较上个月+2", change: "较上月+2",
path: '/thinkTank' path: '/thinkTank',
color: ['#C9AAF0', '#DFCAF6', '#FAF1FF', '#531DAC']
}, },
{ {
titlle: "出口管制", titlle: "出口管制",
value: 33, value: 33,
text: "66", text: "66",
unit: "次", unit: "次",
change: "较上个月+1", change: "较上月+1",
path: '/exportControl' path: '/exportControl',
color: ['#96DFDD', '#BCEFEC', '#E7FFFB', '#006E75']
}, },
{ {
titlle: "投融资限制", titlle: "投融资限制",
value: 80, value: 80,
text: "119", text: "119",
unit: "次", unit: "次",
change: "较上个月+1", change: "较上月+1",
path: '/finance' path: '/finance',
color: ['#F5BEBC', '#F7D3D0', '#FEF1F0', '#C64C4E']
}, },
{ {
titlle: "市场准入", titlle: "市场准入",
...@@ -206,7 +285,8 @@ const distribution = ref([ ...@@ -206,7 +285,8 @@ const distribution = ref([
text: "223", text: "223",
unit: "次", unit: "次",
change: "较上个月+1", change: "较上个月+1",
path: '/marketAccessRestrictions' path: '/marketAccessRestrictions',
color: ['#FFE3B9', '#FFEDCE', '#FFF7E6', '#D46B08']
} }
]); ]);
...@@ -361,6 +441,7 @@ onMounted(() => { ...@@ -361,6 +441,7 @@ onMounted(() => {
} }
.title-text { .title-text {
width: 280px;
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
line-height: 42px; line-height: 42px;
...@@ -467,4 +548,11 @@ onMounted(() => { ...@@ -467,4 +548,11 @@ onMounted(() => {
margin-top: calc(50% - 24px); margin-top: calc(50% - 24px);
} }
} }
.legend-icon {
width: 14px;
height: 14px;
border-radius: 50%;
margin: 0 10px;
}
</style> </style>
src/views/overView/component/Timeline.vue
浏览文件 @ 66bfd322
...@@ -14,11 +14,12 @@ ...@@ -14,11 +14,12 @@
<!-- 卡片：放到线右侧 --> <!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)"> <div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)">
<div class="title"> <div class="time">
{{ item.time }} {{ item.time }}
</div> </div>
<div class="title"> <div class="title">
{{ item.title }} {{ item.title }}
<img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;"></img>
</div> </div>
<div class="content"> <div class="content">
{{ item.content }} {{ item.content }}
...@@ -199,9 +200,10 @@ export default { ...@@ -199,9 +200,10 @@ export default {
font-size: 14px; font-size: 14px;
} }
.title { .time {
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
font-size: 18px; font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 26px; line-height: 26px;
letter-spacing: 0px; letter-spacing: 0px;
...@@ -210,6 +212,7 @@ export default { ...@@ -210,6 +212,7 @@ export default {
.title { .title {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 26px; line-height: 26px;
...@@ -219,6 +222,7 @@ export default { ...@@ -219,6 +222,7 @@ export default {
.content { .content {
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
......
src/views/overView/component/WaveBall.vue
浏览文件 @ 66bfd322
...@@ -43,29 +43,37 @@ const makeOption = () => { ...@@ -43,29 +43,37 @@ const makeOption = () => {
{ value: p, direction: 'right' }, { value: p, direction: 'right' },
{ value: p, direction: 'left' } // 两层波浪反向 { 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, waveAnimation: true,
animationEasingUpdate: 'cubicOut', animationEasingUpdate: 'cubicOut',
outline: { outline: {
show: true, show: true,
borderDistance: 4, // 第一层边框 borderDistance: 2, // 第一层边框
itemStyle: { itemStyle: {
borderWidth: 3, shadowBlur: 0, // 同样设为 0
borderColor: `hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${0.5})` borderWidth: 1,
borderColor: `${props.color[0]}`,
shadowColor: 'transparent'
} }
}, },
backgroundStyle: { // 1. 关掉波浪的阴影
color: '#ffffff', itemStyle: {
shadowColor: '#fff', //阴影 shadowBlur: 0, // 关键：阴影范围设为 0
shadowBlur: 0, //阴影模糊 shadowColor: 'transparent'
},
backgroundStyle: {
color: `${props.color[2]}`,
borderWidth: 1,
borderColor: `${props.color[1]}`, // 中间区域保持透明
shadowBlur: 0
}, },
label: { label: {
show: true, show: true,
formatter: `${props.data.text}` + `${props.data.unit}`, formatter: `${props.data.text}` + `${props.data.unit}`,
fontSize: 24, fontSize: 24,
color: `hsla(${props.color[0]}, ${props.color[1]}%, ${props.color[2]}%, ${1})`, color: `${props.color[3]}`,
// insideColor: '#fff' insideColor: `${props.color[3]}`,
} }
}] }]
} }
......
src/views/overView/index.vue
浏览文件 @ 66bfd322
...@@ -377,6 +377,8 @@ onMounted(() => { }); ...@@ -377,6 +377,8 @@ onMounted(() => { });
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: Microsoft YaHei;
background-color: #ffffff;
.content-title { .content-title {
height: 64px; height: 64px;
......
src/views/overView/js/barChart2.js
浏览文件 @ 66bfd322
...@@ -13,13 +13,13 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -13,13 +13,13 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
return { return {
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { top: '10%', right: '3%', bottom: '15%', left: '3%', containLabel: true }, grid: { top: '10%', right: '3%', bottom: '15%', left: '3%', containLabel: true },
legend: { data: ['中国', '美国'], top: 0 }, // legend: { data: ['中国', '美国'], top: 0 },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: nameList, data: nameList,
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { rotate: 45, color: '#666', fontSize: 12 } axisLabel: { color: '#666', fontSize: 12 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
......
src/views/overView/js/multiLineChart1.js
浏览文件 @ 66bfd322
...@@ -14,15 +14,15 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => { ...@@ -14,15 +14,15 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
grid: { grid: {
top: '8%', top: '8%',
right: '5%', right: '5%',
bottom: '5%', bottom: '15%',
left: '5%', left: '5%',
containLabel: true containLabel: true
}, },
legend: { // legend: {
data: ['中国', '美国'], // data: ['中国', '美国'],
show: true // show: true
}, // },
color: ['#AED6FF', '#FF7875'], color: ['#0958D9', '#FF7875'],
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
......
src/views/overView/js/radarChart.js
浏览文件 @ 66bfd322
...@@ -3,15 +3,16 @@ import * as echarts from "echarts"; ...@@ -3,15 +3,16 @@ import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => { const getBarChart = (nameList, valueList, isPer) => {
const option = { const option = {
title: { text: '' }, title: { text: '' },
legend: { // legend: {
icon: 'circle', // icon: 'circle',
orient: 'vertical', // 纵向排列 // orient: 'vertical', // 纵向排列
right: 0, // 贴右边 // right: 0, // 贴右边
top: 'center', // 垂直居中 // top: 'center', // 垂直居中
align: 'left', // 文字在图标左侧 // align: 'left', // 文字在图标左侧
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入'] // data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
}, // },
radar: { radar: {
radius: '50%', // 关键：缩小整个雷达
indicator: [ indicator: [
{ name: '能源', max: 6500 }, { name: '能源', max: 6500 },
{ name: '集成电路', max: 16000 }, { name: '集成电路', max: 16000 },
......
src/views/overView/js/radarChart2.js
浏览文件 @ 66bfd322
...@@ -3,15 +3,16 @@ import * as echarts from "echarts"; ...@@ -3,15 +3,16 @@ import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => { const getBarChart = (nameList, valueList, isPer) => {
const option = { const option = {
title: { text: '' }, title: { text: '' },
legend: { // legend: {
icon: 'circle', // icon: 'circle',
orient: 'vertical', // 纵向排列 // orient: 'vertical', // 纵向排列
right: 0, // 贴右边 // right: 0, // 贴右边
top: 'center', // 垂直居中 // top: 'center', // 垂直居中
align: 'left', // 文字在图标左侧 // align: 'left', // 文字在图标左侧
data: ['中国', '美国'] // data: ['中国', '美国']
}, // },
radar: { radar: {
radius: '50%', // 关键：缩小整个雷达
indicator: [ indicator: [
{ name: '能源', max: 6500 }, { name: '能源', max: 6500 },
{ name: '集成电路', max: 16000 }, { name: '集成电路', max: 16000 },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论