Skip to content

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

update

上级 aa49f594 b4781ba4
隐藏空白字符变更
内嵌 并排
正在显示 包含 176 行增加 和 65 行删除
src/views/scientificFunding/components/dataSub/index.vue
浏览文件 @ f489e272
...@@ -49,16 +49,8 @@ ...@@ -49,16 +49,8 @@
</el-select> </el-select>
</div> </div>
<div class="right-main1"> <div class="right-main1">
<div class="uni-item" v-for="(item, index) in universityData" :key="index"> <div class="right-boxplot-echarts" ref="boxplotChartRef"></div>
<div class="uni-left"> <div class="right-main1-tit">单位：亿美元</div>
<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> </div>
</div> </div>
</div> </div>
...@@ -66,7 +58,7 @@ ...@@ -66,7 +58,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import NSF from "./assets/NSF.png"; import NSF from "./assets/NSF.png";
import DARPA from "./assets/DARPA.png"; import DARPA from "./assets/DARPA.png";
...@@ -157,9 +149,148 @@ const options1 = [ ...@@ -157,9 +149,148 @@ const options1 = [
const leftChartRef = ref(null); const leftChartRef = ref(null);
const rightChartRef = ref(null); const rightChartRef = ref(null);
const leftSankeyRef = ref(null); const leftSankeyRef = ref(null);
const boxplotChartRef = ref(null);
let leftChart; let leftChart;
let rightChart; let rightChart;
let leftSankey; 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 = () => { const initLeftDonut = () => {
if (!leftChartRef.value) return; if (!leftChartRef.value) return;
...@@ -582,12 +713,16 @@ const handleResize = () => { ...@@ -582,12 +713,16 @@ const handleResize = () => {
if (leftChart) leftChart.resize(); if (leftChart) leftChart.resize();
if (rightChart) rightChart.resize(); if (rightChart) rightChart.resize();
if (leftSankey) leftSankey.resize(); if (leftSankey) leftSankey.resize();
if (boxplotChart) boxplotChart.resize();
}; };
onMounted(() => { onMounted(() => {
initLeftDonut(); nextTick(() => {
initRightLine(); initLeftDonut();
initLeftSankey(); initRightLine();
initLeftSankey();
initBoxPlot();
});
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
...@@ -604,6 +739,10 @@ onBeforeUnmount(() => { ...@@ -604,6 +739,10 @@ onBeforeUnmount(() => {
leftSankey.dispose(); leftSankey.dispose();
leftSankey = null; leftSankey = null;
} }
if (boxplotChart) {
boxplotChart.dispose();
boxplotChart = null;
}
}); });
</script> </script>
...@@ -748,56 +887,28 @@ onBeforeUnmount(() => { ...@@ -748,56 +887,28 @@ onBeforeUnmount(() => {
color: rgb(132, 136, 142); color: rgb(132, 136, 142);
} }
} }
.right-main1 { .right-main1 {
width: 792px; width: 792px;
height: 421px; height: 421px;
padding: 43px 29px 45px 20px; padding: 20px 20px;
display: flex; position: relative;
flex-direction: column; box-sizing: border-box;
justify-content: space-between; .right-boxplot-echarts {
.uni-item { width: 100%;
width: 100%; height: 100%;
height: 24px; min-height: 300px;
display: flex; }
align-items: center; .right-main1-tit {
.uni-left { position: absolute;
width: 280px; top: 18px;
display: flex; right: 31px;
align-items: center; font-size: 14px;
.uni-img { font-weight: 400;
width: 24px; font-family: "Microsoft YaHei";
height: 24px; line-height: 22px;
margin-right: 15px; color: rgb(132, 136, 142);
} z-index: 10;
.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;
}
}
.uni-right {
width: 50px;
text-align: right;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
}
} }
} }
} }
......
src/views/scientificFunding/index.vue
浏览文件 @ f489e272
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
搜索 搜索
</div> </div>
</div> </div>
<!-- <div class="search-center"> <div class="search-center">
<div class="search-item"> <div class="search-item">
<div class="search-item-num">18</div> <div class="search-item-num">18</div>
<div class="search-item-name">科研资助机构</div> <div class="search-item-name">科研资助机构</div>
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<div class="search-item-num">15,556</div> <div class="search-item-num">15,556</div>
<div class="search-item-name">经费总额(亿美元)</div> <div class="search-item-name">经费总额(亿美元)</div>
</div> </div>
</div> --> </div>
<div class="search-bottom"> <div class="search-bottom">
<div class="btn" @click="scrollToTop('position1')"> <div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">最新动态</div> <div class="btn-text">最新动态</div>
...@@ -224,7 +224,7 @@ const dataList = ref([ ...@@ -224,7 +224,7 @@ const dataList = ref([
.search { .search {
width: 960px; width: 960px;
height: 168px; height: 168px;
margin: 0 auto 52px auto; margin: 0 auto 122px auto;
.search-main { .search-main {
display: flex; display: flex;
padding-right: 3px; padding-right: 3px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论