Skip to content

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

update UI

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