提交 430e1e1d authored 作者: huhuiqing's avatar huhuiqing

科研资助图表样式优化

上级 fd527c8e
......@@ -664,6 +664,18 @@ onMounted(async () => {
}
.content {
display: -webkit-box;
-webkit-line-clamp: 2;
/* 限制显示两行 */
-webkit-box-orient: vertical;
/* 垂直排列内容 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 显示省略号 */
/* Text */
width: 862px;
height: 48px;
margin-top: 8px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......
......@@ -17,10 +17,8 @@
</el-select>
</div>
<div class="left-main">
<div class="left-main-echarts" ref="leftChartRef" v-show="radio1 === true">资助经费</div>
<div class="left-main-echarts" ref="leftChartRef1" v-show="radio1 === false">资助项目</div>
</div>
</div>
<div class="left">
......@@ -41,18 +39,25 @@
<div class="right-title">
<img src="./assets/icon02.png" alt="" />
<div class="tit">资助经费变化情况</div>
<div :class="radio2 === true ? 'btn-select' : 'btn'" style=" right:250px;" @click="changeradio2()">
资助经费
</div>
<div :class="radio2 === false ? 'btn-select' : 'btn'" style=" right: 150px;" @click="changeradio2()">
资助项目
</div>
<el-select v-model="value" placeholder="Select" class="select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="right-main">
<div class="right-main-echarts" ref="rightChartRef"></div>
<div class="right-main-echarts" ref="rightChartRef" v-show="radio2 === true"></div>
<div class="right-main-echarts" ref="rightChartRef1" v-show="radio2 === false"></div>
<div class="right-main-tit">亿美元</div>
</div>
</div>
<div class="right">
<div class="right-title">
<img src="./assets/icon03.png" alt="" />
<img src="./assets/icon04.png" alt="" />
<div class="tit">项目资助强度分布</div>
<el-select v-model="value3" placeholder="Select" class="select">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
......@@ -213,6 +218,12 @@ const initLeftDonut = (rawData, show) => {
};
const rightChartRef = ref(null);
const rightChartRef1 = ref(null);
const radio2 = ref(true)
const changeradio2 = () => {
radio2.value ? handlegetCountryFundingChange() : handlegetCountryFundProjectChange()
radio2.value = !radio2.value
}
// 资助体系v2.0:资助经费变化情况:资助经费
const handlegetCountryFundingChange = async () => {
try {
......@@ -229,8 +240,6 @@ const handlegetCountryFundingChange = async () => {
}
};
//资助体系v2.0:资助经费变化情况:资助项目
// getCountryFundProjectChange
const fundProjectChange = ref([])
const handlegetCountryFundProjectChange = async () => {
try {
let params = {
......@@ -411,17 +420,16 @@ const initBoxPlot = (data) => {
let leftChart;
let leftChart1;
let rightChart;
// let rightChart;
// let rightChart1;
let leftSankey;
let boxplotChart;
//资助经费变化情况
const initRightLine = (data) => {
if (!rightChartRef.value) return;
if (rightChart) rightChart.dispose();
rightChart = echarts.init(rightChartRef.value);
const initRightLine = (data, show) => {
const colorMap = [
"rgba(20, 89, 187, 1)",
"rgba(206, 79, 81, 1)",
......@@ -512,7 +520,15 @@ const initRightLine = (data) => {
},
series: series
};
rightChart.setOption(option);
if (show == true) {
let rightChart = echarts.init(rightChartRef.value);
rightChart.setOption(option);
} else {
let rightChart1 = echarts.init(rightChartRef1.value);
rightChart1.setOption(option);
}
};
const leftSankeyRef = ref(null);
......@@ -733,10 +749,8 @@ onMounted(() => {
padding: 52px 60px 78px 61px;
.left-main-echarts {
width: 100%;
/* 确保宽度占满容器 */
height: 400px;
/* 设置一个合适的高度 */
width: 780px;
height: 350px;
}
}
......@@ -816,8 +830,9 @@ onMounted(() => {
position: relative;
.right-main-echarts {
width: 100%;
height: 100%;
/* 矢量 476 */
width: 780px;
height: 350px;
}
.right-main-tit {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论