Skip to content

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

实力对比

上级 2958656f
隐藏空白字符变更
内嵌 并排
正在显示 包含 446 行增加 和 1 行删除
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ 8981f339
<!--科技要闻-->
<!--ZM博弈概况-->
<template>
<div class="content-wrapper">
<div class="card-box">
......@@ -6,7 +6,36 @@
<img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.png" />
</div>
<div style="display: flex;height: 650px;width: 100%;">
<div style="width: 50%;">
<div>
数据来源
</div>
<div style="width: 672px;height: 486px;" id="char"></div>
</div>
<div style="width: 50%;">
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
<el-table-column prop="name" label="指标名称" sortable width="350" />
<el-table-column prop="percent" label="中国">
<template #default="scope">
<div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px', marginLeft: '20px' }">
<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="left-progress"
:show-text="false" />
</div>
</template>
</el-table-column>
<el-table-column prop="percent" label="美国">
<template #default="scope">
<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="right-progress"
:show-text="false" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<div class="card-box" style="margin-top: 16px;">
<div class="card-title">
......@@ -22,7 +51,10 @@
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";
import radarChart from './radarChart3.js'
const course = ref([
{
"time": "2025-01-15",
......@@ -74,6 +106,135 @@ const course = ref([
"tag": "对华打压遏制"
}
]);
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(() => {
const dom = document.getElementById('char');
const myChart = echarts.init(dom);
// 2. 传入容器，生成配置
const option = radarChart(
[
"创新资源",
"知识创造",
"企业创新",
"创新绩效",
"创新环境"
],
[
[4200, 3000, 20000, 35000, 50000, 18000],
[1000, 42000, 32000, 35000, 50000, 18000]
]
);
myChart.setOption(option);
// setChart(option, "char7");
});
const tableData = ref([
{
id: 1,
name: '综合创新指数',
percent: [60, 40],
children: []
},
{
id: 2,
name: '创新资源',
percent: [50, 50],
children: []
},
{
id: 3,
name: '研发人力',
percent: [70, 30],
children: [
{
id: 31,
name: '每万名就业人员中R&D人员全时当量',
percent: [65, 35],
children: []
},
{
id: 32,
name: '研究人员占R&D人员比例',
percent: [55, 45],
children: []
},
{
id: 33,
name: '科学与工程类毕业生比例',
percent: [70, 30],
children: []
}
]
},
{
id: 4,
name: '研发经费',
percent: [60, 40],
children: [
{
id: 41,
name: 'R&D经费支出总额(购买力平价)',
percent: [65, 35],
children: []
},
{
id: 42,
name: 'R&D经费支出占GDP比重',
percent: [55, 45],
children: []
},
{
id: 43,
name: '基础研究经费占R&D经费比重',
percent: [45, 55],
children: []
}
]
},
{
id: 5,
name: '科研条件',
percent: [60, 40],
children: [
{
id: 51,
name: '国家级重大科技基础设施数量',
percent: [50, 50],
children: []
}
]
}
]);
</script>
<style lang="scss" scoped>
......@@ -113,4 +274,91 @@ const course = ref([
}
}
}
/* ========== 公共外壳 ========== */
.progress-wrapper {
position: relative;
flex: 1;
height: 10px;
}
/* 文字居中在彩色条内 */
.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 {
transform: scaleX(-1);
}
.left-progress :deep(.el-progress-bar__outer) {
border-radius: 0;
clip-path: inset(0 0 0 0);
background: rgba(231, 243, 255, 1);
overflow: hidden;
/* 读行内传进来的变量 */
height: var(--i) !important;
margin-left: var(--j) !important
}
.left-progress :deep(.el-progress-bar__inner) {
border-radius: 0;
/* 移除圆角 */
clip-path: inset(0 0 0 0);
/* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */
background: #055FC2;
/* 读行内传进来的变量 */
height: var(--i) !important;
margin-left: var(--j) !important;
}
/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
.right-progress :deep(.el-progress-bar__outer) {
border-radius: 0;
clip-path: inset(0 0 0 0);
background: #ffccc7;
overflow: hidden;
height: var(--i) !important;
}
.right-progress :deep(.el-progress-bar__inner) {
border-radius: 0;
clip-path: inset(0 0 0 0);
background: #CE4F51;
height: var(--i) !important;
}
:deep(.el-table .cell) {
padding: 0;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
</style>
src/views/ZMOverView/components/gameProfile/radarChart3.js 0 → 100644
浏览文件 @ 8981f339
import * as echarts from 'echarts';
/**
* 生成动态雷达图配置
* @param {string[]} nameList 指标名称（与 indicator 顺序保持一致）
* @param {number[][]} valueList 数据值数组，每组数据为一个数组
*/
const radarChart = (nameList, valueList) => {
// 计算最大值以设置雷达图的max值
const maxValue = Math.max(...valueList.map(values => Math.max(...values)));
const colorList = [
[5, 96, 195], // 蓝色
[208, 85, 87] // 红色
];
// 1. 基础雷达图配置
const option = {
title: { text: '' },
radar: {
radius: '75%', // 雷达图本身占容器 75%
indicator: nameList.map(name => ({
name: name,
max: maxValue * 1.2 // 设置最大值为数据最大值的120%
})),
axisName: {
color: '#ffffff',
fontSize: 18,
fontWeight: 700,
backgroundColor: '#0560C3',
borderRadius: 20,
padding: [8, 20],
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br);
}
},
splitLine: {
lineStyle: { color: 'rgba(200,200,200,.6)' }
},
splitArea: {
show: true,
areaStyle: {
color: [
`#ffffff`,
`#F7F8F9`
]
}
},
},
series: valueList.map((values, index) => ({
name: `组${index + 1}`,
type: 'radar',
data: [
{
value: values,
name: `组${index + 1}`,
areaStyle: {
color: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 0.2)` // 填充颜色
},
itemStyle: {
color: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 1)`, // 圆环颜色
borderWidth: 1, // 边框宽度
backgroundColor: '#ffffff',
borderColor: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 1)` // 边框颜色
},
}
]
}))
};
return option;
};
export default radarChart;
src/views/ZMOverView/components/gameProfile/tableShow.vue 0 → 100644
浏览文件 @ 8981f339
<template>
<div>
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
<el-table-column prop="date" label="Date" sortable />
<el-table-column prop="name" label="Name" sortable />
<el-table-column prop="address" label="Address" sortable />
</el-table>
<el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column prop="date" label="Date" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="address" label="Address" />
</el-table>
</div>
</template>
<script lang="ts" setup>
interface User {
id: number
date: string
name: string
address: string
hasChildren?: boolean
children?: User[]
}
const load = (
row: User,
treeNode: unknown,
resolve: (data: User[]) => void
) => {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
])
}, 1000)
}
const tableData: User[] = [
{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
children: [
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
],
},
{
id: 4,
date: '2016-05-03',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
]
const tableData1: User[] = [
{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
hasChildren: true,
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 4,
date: '2016-05-03',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论