Skip to content

R
risk-monitor
提交 c1d8a1e3 authored 作者: caijian's avatar caijian
浏览文件
操作

update UI

上级 e51518ef
隐藏空白字符变更
内嵌 并排
正在显示 包含 227 行增加 和 218 行删除
src/views/scientificFunding/components/dataSub/index.vue
浏览文件 @ c1d8a1e3
......@@ -296,92 +296,128 @@ const initLeftDonut = () => {
if (!leftChartRef.value) return;
if (leftChart) leftChart.dispose();
leftChart = echarts.init(leftChartRef.value);
const data = [
{ name: "集成电路", value: 50 },
{ name: "人工智能", value: 46 },
{ name: "通信网络", value: 40 },
{ name: "能源", value: 32 },
{ name: "先进制造", value: 31 },
{ name: "生物科技", value: 31 },
{ name: "航空航天", value: 30 },
{ name: "新材料", value: 24 }
];
const categories = ["集成电路", "人工智能", "通信网络", "能源", "先进制造", "生物科技", "航空航天", "新材料"];
const usData = [50, 46, 40, 32, 31, 31, 30, 24];
const cnData = [45, 42, 35, 28, 28, 33, 25, 20];
const colors = [
"rgba(105, 177, 255, 1)", // 集成电路
"rgba(255, 192, 105, 1)", // 人工智能
"rgba(135, 232, 222, 1)", // 通信网络
"rgba(89, 126, 247, 1)", // 能源
"rgba(214, 228, 255, 1)", // 先进制造
"rgba(255, 120, 117, 1)", // 生物科技
"rgba(179, 127, 235, 1)", // 航空航天
"rgba(255, 163, 158, 1)" // 新材料
"#D15054", // 红色
"#91CCFF", // 浅蓝
"#FFAB4C", // 橙色
"#975FE4", // 紫色
"#5CDBD3", // 青色
"#005FCB", // 深蓝
"#B37FEB", // 浅紫
"#FFA39E" // 浅红
];
const series = categories.map((name, index) => ({
name: name,
type: 'bar',
stack: 'total',
barWidth: 46,
itemStyle: {
color: colors[index],
borderWidth: 0
},
data: [cnData[index], usData[index]]
}));
// 计算总和用于右侧显示
const usTotal = usData.reduce((a, b) => a + b, 0);
const cnTotal = cnData.reduce((a, b) => a + b, 0);
// 添加一个辅助系列用于显示右侧的总数值
series.push({
name: 'Total',
type: 'bar',
stack: 'total',
itemStyle: {
color: 'transparent'
},
label: {
show: true,
position: 'right',
formatter: (params) => {
const totals = [cnTotal, usTotal];
return `{val|${totals[params.dataIndex]}}{unit| 亿美元}`;
},
rich: {
val: {
fontSize: 18,
color: '#3B414B',
fontWeight: 400,
padding: [0, 0, 0, 15]
},
unit: {
fontSize: 16,
color: '#3B414B'
}
}
},
data: [0.1, 0.1] // 给予极小数值以触发label渲染
});
const option = {
color: colors,
tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
series: [
{
type: "pie",
radius: [96, 120],
center: ["50%", "50%"],
avoidLabelOverlap: true,
itemStyle: { borderWidth: 0 },
label: {
show: true,
position: "outside",
alignTo: "edge",
formatter: ({ name, value, percent }) => `{name|${name}} {value|${value}项} {percent|${percent}%}`,
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
name: {
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 24,
color: "rgb(59, 65, 75)"
},
value: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
},
percent: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
}
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: (params) => {
let res = `${params[0].name}<br/>`;
params.forEach(item => {
if (item.seriesName !== 'Total') {
res += `${item.marker} ${item.seriesName}: ${item.value} 亿美元<br/>`;
}
},
labelLine: {
show: true,
length: 30,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < leftChart.getWidth() / 2;
const points = params.labelLinePoints;
// 导航线终点在标签下方
const lineY = params.labelRect.y + params.labelRect.height;
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
points[2][1] = lineY;
points[1][1] = lineY;
return {
labelLinePoints: points
};
},
data: data.map((d, i) => ({
...d,
labelLine: { lineStyle: { color: colors[i], width: 1 } }
}))
});
return res;
}
]
},
legend: {
data: categories,
left: 20,
top: 0,
itemWidth: 12,
itemHeight: 12,
icon: 'circle',
textStyle: {
color: "#5F656C",
fontSize: 14
}
},
grid: {
left: '5%',
right: '20%',
top: '10%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value',
show: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: {
show: true,
lineStyle: {
color: '#E6E6E6',
type: 'dashed'
}
}
},
yAxis: {
type: 'category',
data: ['中国', '美国'],
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
fontSize: 20,
color: '#3B414B',
margin: 30
}
},
series: series
};
leftChart.setOption(option);
};
......
src/views/scientificFunding/components/resLib/index.vue
浏览文件 @ c1d8a1e3
......@@ -16,18 +16,26 @@
</el-select>
<div class="main">
<div class="left">
<div class="left-ti1"></div>
<div class="left-ti2"></div>
<div class="left-title">项目经费</div>
<div class="left-content">
<div v-for="(item, i) in dataList" :key="item.id" class="left-item">
<input type="checkbox" checked />{{ item.name }}
<div class="left-section">
<div class="left-title-wrapper">
<div class="left-indicator"></div>
<div class="left-title">科技领域</div>
</div>
<div class="left-content">
<div v-for="(item, i) in techFields" :key="item.id" class="left-item">
<input type="checkbox" :checked="i === 0" />{{ item.name }}
</div>
</div>
</div>
<div class="left-title cl1">涉及领域</div>
<div class="left-content">
<div v-for="(item, i) in dataList2" :key="item.id" class="left-item">
<input type="checkbox" :checked="i === 0" />{{ item.name }}
<div class="left-section">
<div class="left-title-wrapper">
<div class="left-indicator"></div>
<div class="left-title">发布时间</div>
</div>
<div class="left-content">
<div v-for="(item, i) in releaseTimes" :key="item.id" class="left-item">
<input type="checkbox" :checked="i === 0" />{{ item.name }}
</div>
</div>
</div>
</div>
......@@ -87,8 +95,8 @@ import NASA from "./assets/NASA.png";
import NIH from "./assets/NIH.png";
import DOE from "./assets/DOE.png";
const navList = ref(["全部限制", "NSF", "DARPA", "NASA", "NIH", "DOE", "NIST"]);
const activeItem = ref("全部限制");
const navList = ref(["全部资助项目", "NSF", "DARPA", "NASA", "NIH", "DOE", "NIST"]);
const activeItem = ref("全部资助项目");
const value = ref("发布时间");
const options = [
......@@ -101,61 +109,31 @@ const options = [
label: "发布日期"
}
];
const dataList = ref([
{
id: 1,
name: ">1亿美元"
},
{
id: 2,
name: ">1000万美元"
},
{
id: 3,
name: ">100万美元"
},
{
id: 4,
name: "<100万美元"
}
const techFields = ref([
{ id: 1, name: "全部领域" },
{ id: 2, name: "人工智能" },
{ id: 3, name: "集成电路" },
{ id: 4, name: "量子科技" },
{ id: 5, name: "新一代信息技术" },
{ id: 6, name: "生物技术" },
{ id: 7, name: "新能源" },
{ id: 8, name: "航空航天" },
{ id: 9, name: "先进制造" },
{ id: 10, name: "海洋" },
{ id: 11, name: "新材料" },
{ id: 12, name: "深海" },
{ id: 13, name: "极地" },
{ id: 14, name: "核" },
{ id: 15, name: "其他" }
]);
const dataList2 = ref([
{
id: 1,
name: "全部领域"
},
{
id: 2,
name: "人工智能"
},
{
id: 3,
name: "集成电路"
},
{
id: 4,
name: "通信网络"
},
{
id: 5,
name: "量子科技"
},
{
id: 6,
name: "能源"
},
{
id: 7,
name: "生物科技"
},
{
id: 8,
name: "航空航天"
},
{
id: 9,
name: "海洋"
}
const releaseTimes = ref([
{ id: 1, name: "全部时间" },
{ id: 2, name: "2025年" },
{ id: 3, name: "2024年" },
{ id: 4, name: "2023年" },
{ id: 5, name: "2022年" },
{ id: 6, name: "2021年" },
{ id: 7, name: "更早" }
]);
const mainList = ref([
{
......@@ -318,85 +296,80 @@ const handlePageChange = p => {
display: flex;
.left {
width: 300px;
height: 565px;
min-height: 565px;
margin-right: 16px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-ti1 {
width: 8px;
height: 16px;
background-color: rgb(5, 95, 194);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 17px;
left: 0px;
}
.left-ti2 {
width: 8px;
height: 16px;
background-color: rgb(5, 95, 194);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 207px;
left: 0px;
}
.left-title {
margin-left: 25px;
color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
margin-top: 13px;
}
.left-content {
width: 253px;
height: 132px;
margin-left: 25px;
margin-top: 13px;
.left-item {
width: 120px;
height: 30px;
margin-bottom: 4px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
margin-right: 8px;
border: 1px solid rgb(200, 204, 210);
border-radius: 4px;
background-color: #fff;
vertical-align: middle;
}
input[type="checkbox"]:checked {
padding: 20px 0;
.left-section {
margin-bottom: 30px;
.left-title-wrapper {
display: flex;
align-items: center;
margin-bottom: 20px;
.left-indicator {
width: 8px;
height: 16px;
background-color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-right: 17px;
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 4px;
height: 8px;
margin: 1px auto 0;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
.left-title {
color: rgb(5, 95, 194);
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
}
}
.left-content {
display: flex;
flex-wrap: wrap;
padding-left: 25px;
.left-item {
width: 50%;
height: 30px;
margin-bottom: 12px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
display: flex;
align-items: center;
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
margin-right: 12px;
border: 1px solid rgb(200, 204, 210);
border-radius: 4px;
background-color: #fff;
cursor: pointer;
position: relative;
}
input[type="checkbox"]:checked {
background-color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 4px;
height: 8px;
position: absolute;
left: 50%;
top: 45%;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: translate(-50%, -50%) rotate(45deg);
}
}
}
}
.cl1 {
margin-top: 21px;
}
}
.right {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论