Skip to content

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

首页

上级 63a21e28
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 530 行增加 和 45 行删除
src/views/overView/component/strengthComparison.vue 0 → 100644
浏览文件 @ 2cf6d83f
<!-- 中M博弈概览页 -->
<template>
<div class="resource-box">
<img class="title-img" src="@/assets/images/bg/概览页模块标题3.png"></img>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width:100%; display: flex;">
<div style="width: 50%;height: 100%;" id="char7">
</div>
<div style="width: 50%;height: 100%;text-align: center;">
<div v-for="value in data">
<div>{{ value.name }}</div>
<div class="progress-row">
<div class="progress-wrapper left">
<el-progress :percentage="value.value[0]" :stroke-width="20" class="left-progress" />
<span class="inner-text">{{ value.value[0] }}%</span>
</div>
<!-- 右侧进度条 -->
<div class="progress-wrapper right">
<el-progress :percentage="value.value[1]" :stroke-width="20" class="right-progress" />
<span class="inner-text">{{ value.value[0] }}%</span>
</div>
</div>
</div>
<!-- 左侧进度条 -->
</div>
<div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import radarChart3 from '../js/radarChart3.js'
// 绘制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 data = ref([
{
name: '竞争潜力',
value: [81.7, 75.4]
}, {
name: '研究人员总数',
value: [81.7, 75.4]
}, {
name: '研发经费投入总额',
value: [81.7, 75.4]
}, {
name: '研发经费占GDP的比重',
value: [81.7, 75.4]
}, {
name: '每万人研发经费投入额',
value: [81.7, 75.4]
}, {
name: '每万研究人员经费投入额',
value: [81.7, 75.4]
}, {
name: '每万人研究人员数',
value: [81.7, 75.4]
}
])
onMounted(() => {
let char7 = radarChart3()
setChart(char7, "char7");
});
</script>
<style lang="scss" scoped>
/* ========== 一行两个 ========== */
.progress-row {
display: flex;
gap: 16px;
align-items: center;
padding: 10px;
}
/* ========== 公共外壳 ========== */
.progress-wrapper {
position: relative;
flex: 1;
height: 20px;
}
/* 文字居中在彩色条内 */
.inner-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: #fff;
font-weight: bold;
z-index: 2;
}
/* ========== 左侧：右侧斜切 + 左侧圆角 ========== */
/* 左侧文字 */
.left-text {
font-size: 12px;
color: #333;
margin-right: 8px;
white-space: nowrap;
}
.left-progress :deep(.el-progress-bar__outer) {
border-radius: 10px 0 0 10px;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
background: #aed6ff;
overflow: hidden;
}
.left-progress :deep(.el-progress-bar__inner) {
border-radius: 10px 0 0 10px;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
background: #aed6ff;
}
/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
.right-progress :deep(.el-progress-bar__outer) {
border-radius: 0 10px 10px 0;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
background: #ffccc7;
overflow: hidden;
}
.right-progress :deep(.el-progress-bar__inner) {
border-radius: 0 10px 10px 0;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
background: #ff7875;
}
.resource-box {
height: 700px;
}
.title-text {
font-size: 32px;
font-weight: 700;
line-height: 42px;
margin: 40px;
text-align: center;
}
.title-img {
width: 100%;
height: 42px;
}
.resource-content {
/* 容器 480 */
width: 100%;
height: 450px;
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);
.item-header {
height: 48px;
width: 100%;
display: flex;
.item-header-icon {
width: 20px;
height: 20px;
margin: 15px;
}
.item-header-text {
width: 250px;
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-right {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
line-height: 48px;
text-align: right;
width: calc(100% - 350px);
.item-header-right-icon {
/* 容器 704 */
width: 14px;
height: 16px;
}
}
}
.item-header-divider {
/* 矩形 249 */
width: 100%;
height: 1px;
background: #eaecee;
}
}
</style>
src/views/overView/js/barChart2.js 0 → 100644
浏览文件 @ 2cf6d83f
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: '15%', left: '3%', containLabel: true },
legend: { data: ['中国', '美国'], top: 0 },
xAxis: {
type: 'category',
data: nameList,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { rotate: 45, 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: 16,
label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: gradBlue }
},
{
name: '美国',
type: 'bar',
data: series2,
barWidth: 16,
label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: gradCyan }
}
]
}
}
export default getColumnChart
\ No newline at end of file
src/views/overView/js/multiLineChart1.js 0 → 100644
浏览文件 @ 2cf6d83f
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
data: ['中国', '美国'],
show: true
},
color: ['#AED6FF', '#FF7875'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '中国',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0958D9' // 起始颜色
}, {
offset: 1,
color: 'rgba(22, 119, 255, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
{
name: '美国',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FF7875' // 起始颜色
}, {
offset: 1,
color: 'rgba(255, 172, 77, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY2
}
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/overView/js/radarChart.js
浏览文件 @ 2cf6d83f
import * as echarts from "echarts"; import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => { const getBarChart = (nameList, valueList, isPer) => {
const option = { const option = {
title: { title: { text: '' },
text: ""
},
// grid: {
// top: 100
// },
legend: { legend: {
top: 0, icon: 'circle',
icon: "circle", orient: 'vertical', // 纵向排列
data: ["能源", "集成电路", "人工智能", '通信网络', '量子科技', '生物科技'] right: 0, // 贴右边
top: 'center', // 垂直居中
align: 'left', // 文字在图标左侧
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
}, },
radar: { radar: {
// shape: 'circle',
indicator: [ indicator: [
{ name: "能源", max: 6500 }, { name: '能源', max: 6500 },
{ name: "集成电路", max: 16000 }, { name: '集成电路', max: 16000 },
{ name: "人工智能", max: 30000 }, { name: '人工智能', max: 30000 },
{ name: "通信网络", max: 38000 }, { name: '通信网络', max: 38000 },
{ name: "量子科技", max: 52000 }, { name: '量子科技', max: 52000 },
{ name: "生物科技", max: 25000 } { name: '生物科技', max: 25000 }
], ],
axisName: { axisName: {
formatter: "{value}", formatter: '{value}',
color: "rgba(59, 65, 75, 1)", color: 'rgba(59, 65, 75, 1)',
fontSize: 16, fontSize: 16,
fontWeight: 700 fontWeight: 700
} }
}, },
series: [ series: [
{ {
name: "Budget vs spending", name: 'Budget vs spending',
type: "radar", type: 'radar',
data: [ data: [
{ {
value: [4200, 3000, 20000, 35000, 50000, 18000], value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "法案", name: '法案',
areaStyle: { areaStyle: { color: 'rgba(10, 87, 166, 0.2)' }
color: "rgba(10, 87, 166, 0.2)"
}
}, },
{ {
value: [5000, 14000, 28000, 26000, 42000, 21000], value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "行政令", name: '行政令',
areaStyle: { areaStyle: { color: 'rgba(206, 79, 81, 0.2)' }
color: "rgba(206, 79, 81, 0.2)"
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "科技智库", name: '科技智库',
areaStyle: { areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
color: "rgba(250, 140, 22, 0.2)"
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "出口管制", name: '出口管制',
areaStyle: { areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
color: "rgba(250, 140, 22, 0.2)"
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "投融资限制", name: '投融资限制',
areaStyle: { areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
color: "rgba(250, 140, 22, 0.2)"
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "市场准入", name: '市场准入',
areaStyle: { areaStyle: { color: 'rgba(250, 140, 22, 0.2)' }
color: "rgba(250, 140, 22, 0.2)"
}
} }
] ]
} }
......
src/views/overView/js/radarChart2.js 0 → 100644
浏览文件 @ 2cf6d83f
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: ['中国', '美国']
},
radar: {
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: 16,
fontWeight: 700
}
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
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)' }
},
]
}
]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/overView/js/radarChart3.js 0 → 100644
浏览文件 @ 2cf6d83f
import * as echarts from "echarts";
const getBarChart = (nameList, valueList, isPer) => {
const option = {
title: { text: '' },
legend: {
show: false,
icon: 'circle',
orient: 'vertical',
right: 0,
top: 'center',
align: 'left',
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
},
radar: {
shape: 'circle', // ① 参考线变弧线
indicator: [
{ name: '研究人员总数', max: 6500 },
{ name: '每万人研究人员数', max: 16000 },
{ name: '每万研究人员研发经费投入额', max: 30000 },
{ name: '每万人研发经费投入额', max: 38000 },
{ name: '研发经费占GDP的比重', max: 52000 },
{ name: '研发经费投入总额', max: 25000 }
],
axisName: {
// ② 文字在线上方 + 自动换两行
formatter: function (txt) {
// 按字数 10 左右自动断行
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br);
},
rich: {
a: { lineHeight: 20 } // 行高
},
color: 'rgba(59, 65, 75, 1)',
fontSize: 14,
fontWeight: 600
},
splitLine: {
lineStyle: {
color: 'rgba(200,200,200,.6)'
}
},
splitArea: { show: false },
axisLine: { show: false }
},
series: [{
name: 'Budget vs spending',
type: 'radar',
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(22, 180, 120, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '投融资限制', areaStyle: { color: 'rgba(120, 100, 200, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '市场准入', areaStyle: { color: 'rgba(255, 100, 150, 0.2)' } }
]
}],
// ③ 最外层弧线加粗：用 graphic 画一个圆环覆盖在最外层
graphic: [{
type: 'circle',
shape: { cx: 300, cy: 300, r: '65%' },
style: { stroke: '#333', lineWidth: 30, fill: 'transparent' },
z: 1000
}]
};
return option
}
export default getBarChart
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论