Skip to content

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

科研资助体系

上级 2dda3480
显示空白字符变更
内嵌 并排
正在显示 包含 167 行增加 和 56 行删除
src/views/scientificFunding/components/dataSub/index.vue
浏览文件 @ da7eba75
......@@ -49,16 +49,8 @@
</el-select>
</div>
<div class="right-main1">
<div class="uni-item" v-for="(item, index) in universityData" :key="index">
<div class="uni-left">
<img :src="item.img" class="uni-img" />
<div class="uni-name">{{ item.name }}</div>
</div>
<div class="uni-middle">
<div class="uni-bar" :style="{ width: (item.value / 24) * 100 + '%', background: item.color }"></div>
</div>
<div class="uni-right">{{ item.value }}项</div>
</div>
<div class="right-boxplot-echarts" ref="boxplotChartRef"></div>
<div class="right-main1-tit">单位：亿美元</div>
</div>
</div>
</div>
......@@ -66,7 +58,7 @@
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import NSF from "./assets/NSF.png";
import DARPA from "./assets/DARPA.png";
......@@ -157,9 +149,148 @@ const options1 = [
const leftChartRef = ref(null);
const rightChartRef = ref(null);
const leftSankeyRef = ref(null);
const boxplotChartRef = ref(null);
let leftChart;
let rightChart;
let leftSankey;
let boxplotChart;
const initBoxPlot = () => {
if (!boxplotChartRef.value) {
console.warn("boxplotChartRef is null");
return;
}
if (boxplotChart) boxplotChart.dispose();
boxplotChart = echarts.init(boxplotChartRef.value);
const categories = ["人工智能", "通信网络", "生物科技", "能源"];
const dataUS = [
[28, 40, 60, 72, 82],
[22, 32, 42, 50, 55],
[52, 65, 85, 96, 105],
[18, 30, 52, 62, 72]
];
const dataCN = [
[30, 35, 58, 80, 95],
[15, 20, 22, 30, 31],
[55, 58, 82, 105, 118],
[20, 25, 48, 72, 85]
];
const option = {
legend: {
data: ["美国", "中国"],
left: 20,
top: 0,
itemWidth: 12,
itemHeight: 12,
icon: 'circle',
textStyle: {
color: "#5F656C",
fontSize: 14
}
},
tooltip: {
trigger: "item",
axisPointer: {
type: "shadow"
}
},
grid: {
left: 50,
right: 20,
top: 60,
bottom: 40
},
xAxis: {
type: "category",
data: categories,
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#E6E6E6"
}
},
axisTick: {
show: false
},
axisLabel: {
color: "#5F656C",
fontSize: 14,
margin: 15
},
splitLine: {
show: false
}
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#F0F2F5",
type: "solid"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#5F656C",
fontSize: 14
}
},
series: [
{
name: "美国",
type: "boxplot",
data: dataUS,
boxWidth: 30,
itemStyle: {
color: "#fff",
borderColor: "#1890FF",
borderWidth: 1
},
emphasis: {
itemStyle: {
borderWidth: 2,
shadowBlur: 5,
shadowOffsetX: 1,
shadowColor: "rgba(0,0,0,0.2)"
}
}
},
{
name: "中国",
type: "boxplot",
data: dataCN,
boxWidth: 30,
itemStyle: {
color: "#fff",
borderColor: "#D15054",
borderWidth: 1
},
emphasis: {
itemStyle: {
borderWidth: 2,
shadowBlur: 5,
shadowOffsetX: 1,
shadowColor: "rgba(0,0,0,0.2)"
}
}
}
]
};
boxplotChart.setOption(option);
};
const initLeftDonut = () => {
if (!leftChartRef.value) return;
......@@ -582,12 +713,16 @@ const handleResize = () => {
if (leftChart) leftChart.resize();
if (rightChart) rightChart.resize();
if (leftSankey) leftSankey.resize();
if (boxplotChart) boxplotChart.resize();
};
onMounted(() => {
nextTick(() => {
initLeftDonut();
initRightLine();
initLeftSankey();
initBoxPlot();
});
window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
......@@ -604,6 +739,10 @@ onBeforeUnmount(() => {
leftSankey.dispose();
leftSankey = null;
}
if (boxplotChart) {
boxplotChart.dispose();
boxplotChart = null;
}
});
</script>
......@@ -751,52 +890,24 @@ onBeforeUnmount(() => {
.right-main1 {
width: 792px;
height: 421px;
padding: 43px 29px 45px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
.uni-item {
padding: 20px 20px;
position: relative;
box-sizing: border-box;
.right-boxplot-echarts {
width: 100%;
height: 24px;
display: flex;
align-items: center;
.uni-left {
width: 280px;
display: flex;
align-items: center;
.uni-img {
width: 24px;
height: 24px;
margin-right: 15px;
}
.uni-name {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
}
.uni-middle {
flex: 1;
height: 8px;
display: flex;
align-items: center;
padding-left: 20px;
.uni-bar {
height: 8px;
border-radius: 4px;
}
height: 100%;
min-height: 300px;
}
.uni-right {
width: 50px;
text-align: right;
font-size: 16px;
.right-main1-tit {
position: absolute;
top: 18px;
right: 31px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
line-height: 22px;
color: rgb(132, 136, 142);
z-index: 10;
}
}
}
......
src/views/scientificFunding/index.vue
浏览文件 @ da7eba75
......@@ -20,7 +20,7 @@
搜索
</div>
</div>
<!-- <div class="search-center">
<div class="search-center">
<div class="search-item">
<div class="search-item-num">18</div>
<div class="search-item-name">科研资助机构</div>
......@@ -37,7 +37,7 @@
<div class="search-item-num">15,556</div>
<div class="search-item-name">经费总额(亿美元)</div>
</div>
</div> -->
</div>
<div class="search-bottom">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">最新动态</div>
......@@ -224,7 +224,7 @@ const dataList = ref([
.search {
width: 960px;
height: 168px;
margin: 0 auto 52px auto;
margin: 0 auto 122px auto;
.search-main {
display: flex;
padding-right: 3px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论