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) => {
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/MeansAnalysis.vue
浏览文件 @ 66bfd322
......@@ -94,13 +94,13 @@ const course = ref([
unit: "0"
},
{
time: "2025-08-19",
time: "2025-08-20",
title: "中国加速成熟制程产能扩张引发欧美担忧",
content: "中国在成熟制程半导体(28nm及以上)的产能正急剧扩张。此举引发美国和欧洲联盟的...",
unit: "0"
},
{
time: "2025-10-17",
time: "2025-08-17",
title: "美国进一步收紧对华AI芯片出口限制",
content: "美国商务部工业和安全局(BIS)宣布更新“先进计算芯片规则”，大幅收紧对向中...",
unit: "2"
......
src/views/gjOverView/component/Timeline.vue
浏览文件 @ 66bfd322
......@@ -3,13 +3,14 @@
<button class="year-box">2025</button>
<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 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.title }}</div>
<div class="content">{{ item.content }}</div>
......@@ -28,9 +29,14 @@ export default {
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)}%` };
return { left: `${(i * 100) / (this.data.length - 1)}vw` };
},
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) {
......@@ -50,7 +56,10 @@ export default {
display: flex;
align-items: center;
width: 100%;
padding: 0 40px
padding: 0 40px;
width: calc(100vw - 300px);
overflow: auto;
}
.year-box {
......@@ -66,7 +75,8 @@ export default {
.timeline-box {
flex: 1;
position: relative;
margin-left: 15px
margin-left: 15px;
}
.line {
......@@ -120,9 +130,8 @@ export default {
.card {
position: absolute;
width: 15vw;
height: 180px;
padding: 8px 12px;
padding: 8px 20px;
font-size: 14px;
cursor: pointer
}
......
src/views/gjOverView/js/multiLineChart1.js
浏览文件 @ 66bfd322
......@@ -2,38 +2,74 @@
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5, dataY6) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
trigger: "axis",
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: {
data: ['科技法案', '出口管制', '科技政令', '合作限制', '市场准入', '人才限制'],
icon: 'circle', // 圆点图例
data: ["科技法案", "出口管制", "科技政令", "合作限制", "市场准入", "人才限制"],
icon: "circle", // 圆点图例
itemWidth: 10,
itemHeight: 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: 30,
style: { text: '次', font: '12px sans-serif', fill: '#666' }
}],
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', emphasis: { focus: 'series' }, data: dataY1 },
{ name: '出口管制', type: 'line', emphasis: { focus: 'series' }, data: dataY2 },
{ name: '科技政令', type: 'line', emphasis: { focus: 'series' }, data: dataY3 },
{ name: '合作限制', type: 'line', emphasis: { focus: 'series' }, data: dataY4 },
{ name: '市场准入', type: 'line', emphasis: { focus: 'series' }, data: dataY5 },
{ name: '人才限制', type: 'line', emphasis: { focus: 'series' }, data: dataY6 }
{
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
\ No newline at end of file
};
};
export default getMultiLineChart;
src/views/gjOverView/js/pictorialBarChar.js
浏览文件 @ 66bfd322
......@@ -5,7 +5,8 @@ const getColumnChart = (nameList, valueList, isPer) => {
grid: {
top: 30,
height: 300, // 关键：压矮整个图
bottom: 40 // 给 X 轴文字留位置
bottom: 40, // 给 X 轴文字留位置
left: 40
},
xAxis: [
{
......@@ -18,7 +19,7 @@ const getColumnChart = (nameList, valueList, isPer) => {
],
axisLabel: {
color: "#84888F",
fontSize: 10,
fontSize: 16,
},
axisTick: {
......@@ -43,7 +44,8 @@ const getColumnChart = (nameList, valueList, isPer) => {
}
},
axisLabel: {
color: "#84888F"
color: "#84888F",
fontSize: 14,
}
}
],
......@@ -51,7 +53,7 @@ const getColumnChart = (nameList, valueList, isPer) => {
type: 'text',
right: 20,
top: 10,
style: { text: '单位：次', font: '12px sans-serif', fill: '#666' }
style: { text: '单位：次', font: '14px sans-serif', fill: '#666' }
}],
// 使用内部缩放（滚轮缩放、鼠标拖着左右滑动）
dataZoom: [
......@@ -77,7 +79,7 @@ const getColumnChart = (nameList, valueList, isPer) => {
position: 'top',
distance: 4, // 与柱顶距离
color: 'rgba(5, 95, 194, 1)', // 字体颜色
fontSize: 11
fontSize: 16
},
// 默认样式
itemStyle: {
......
src/views/gjOverView/js/radarChart.js
浏览文件 @ 66bfd322
......@@ -9,15 +9,15 @@ const getBarChart = (nameList, valueList, isPer) => {
top: 0, // 图上方
left: 'center', // 水平居中
textStyle: {
fontSize: 16 // 字号，按需调整
fontSize: 14 // 字号，按需调整
},
grid: { top: 60 },
data: ['美国', '欧盟', '英国', '日本', '韩国', '加拿大']
},
radar: {
radius: '50%', // 关键：缩小整个雷达
center: ['50%', '45%'], // 可选：再往下挪一点，避免图例挤在一起
radius: '60%', // 关键：缩小整个雷达
center: ['50%', '60%'], // 可选：再往下挪一点，避免图例挤在一起
indicator: [
{ name: '能源', max: 6500 },
{ name: '集成电路', max: 16000 },
......@@ -29,7 +29,7 @@ const getBarChart = (nameList, valueList, isPer) => {
axisName: {
formatter: '{value}',
color: 'rgba(59, 65, 75, 1)',
fontSize: 16,
fontSize: 14,
fontWeight: 400
}
},
......
src/views/overView/component/ResourceSupport.vue
浏览文件 @ 66bfd322
<!-- 中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
浏览文件 @ 66bfd322
<!-- 打压遏制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
浏览文件 @ 66bfd322
......@@ -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
浏览文件 @ 66bfd322
......@@ -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
浏览文件 @ 66bfd322
......@@ -377,6 +377,8 @@ onMounted(() => { });
width: 100%;
height: 100%;
overflow: hidden;
font-family: Microsoft YaHei;
background-color: #ffffff;
.content-title {
height: 64px;
......
src/views/overView/js/barChart2.js
浏览文件 @ 66bfd322
......@@ -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
浏览文件 @ 66bfd322
......@@ -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
浏览文件 @ 66bfd322
......@@ -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
浏览文件 @ 66bfd322
......@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论