From 7f6fa75678e36a992f3037ce530d0226f0dd2128 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期二, 08 四月 2025 17:56:30 +0800
Subject: [PATCH] 比例修改
---
src/views/directory/index.vue | 97 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 74 insertions(+), 23 deletions(-)
diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue
index 9ff6048..d906433 100644
--- a/src/views/directory/index.vue
+++ b/src/views/directory/index.vue
@@ -22,7 +22,16 @@
<!-- 鍥捐〃鏄剧ず -->
<div class="charts-main" v-if="activeTabs == 'chart'">
<div class="radial-tree-container">
- <div ref="chart" style="width: 100%; height: 600px"></div>
+ <div ref="chart" style="width: 100%; height: 70vh"></div>
+ </div>
+
+ <div class="legend">
+ <div class="tagItem" v-for="(item, index) in legendList" :key="index">
+ <div class="tagColor" :style="{ background: item.color }"></div>
+ <div class="tagText" :style="{ color: item.color }">
+ {{ item.name }}
+ </div>
+ </div>
</div>
<transition name="el-fade-in-linear">
<div class="tooltipBox" v-show="tooltipShow">
@@ -36,6 +45,10 @@
text-align: center;
"
>
+ <div class="closeBtn" @click="tooltipShow = false">
+ <i class="el-icon-close"></i>
+ </div>
+
<div style="display: flex">
<div
style="
@@ -111,7 +124,10 @@
<!-- 鍒楄〃鏄剧ず -->
<div class="page-main" v-if="activeTabs == 'list'">
<div v-for="(item, index) in universityList" :key="index">
- <div class="table-title" v-if="item.studentList && item.studentList.length > 0">
+ <div
+ class="table-title"
+ v-if="item.studentList && item.studentList.length > 0"
+ >
<div class="table-title-left">
<p class="table-title-name">{{ item.name }}</p>
<p class="table-title-degree">{{ item.degree }}</p>
@@ -121,7 +137,10 @@
<img :src="[item.isShow ? topIcon : bottomIcon]" alt="" />
</div>
</div>
- <table cellpadding="100" v-if="item.studentList && item.studentList.length > 0 && item.isShow">
+ <table
+ cellpadding="100"
+ v-if="item.studentList && item.studentList.length > 0 && item.isShow"
+ >
<tr class="table-heading">
<th>濮撳悕</th>
<th>鎬у埆</th>
@@ -338,6 +357,28 @@
chartData: treeData,
currentNodeInfo: {},
tooltipShow: false,
+ legendList: [
+ {
+ color: "#87A7B9",
+ name: "鍖椾含涓尰澶у",
+ },
+ {
+ color: "#C48787",
+ name: "鍖椾含甯堣寖澶у",
+ },
+ {
+ color: "#6F8F5A",
+ name: "涓浗涓尰绉戝闄�",
+ },
+ {
+ color: "#937950",
+ name: "骞垮窞涓尰鑽ぇ瀛�",
+ },
+ {
+ color: "#8D77B3",
+ name: "鎷滃笀寮熷瓙",
+ },
+ ],
};
},
@@ -400,12 +441,12 @@
},
},
textStyle: {
- color: "#bc1c00" // 璁剧疆鏁翠綋瀛椾綋棰滆壊涓虹孩鑹�
+ color: "#bc1c00", // 璁剧疆鏁翠綋瀛椾綋棰滆壊涓虹孩鑹�
},
edgeLabel: {
normal: {
- color: "#bc1c00" // 璁剧疆绾挎潯鐨勯鑹蹭负绾㈣壊
- }
+ color: "#bc1c00", // 璁剧疆绾挎潯鐨勯鑹蹭负绾㈣壊
+ },
},
series: [
{
@@ -452,22 +493,10 @@
};
this.chart.setOption(option);
-
- this.chart.on(
- "showTip",
- debounce((event) => {
- console.log("鏄剧ず鏃剁殑鍥炶皟", event);
- this.tooltipShow = true;
- }, 500)
- );
-
- this.chart.on(
- "hideTip",
- debounce((event) => {
- console.log("闅愯棌鏃剁殑鍥炶皟", event);
- this.tooltipShow = false;
- }, 500)
- );
+ this.chart.on("click", (params) => {
+ console.log("鐐瑰嚮鏃剁殑鍥炶皟", params);
+ this.tooltipShow = true;
+ });
},
handleResize() {
if (this.chart) {
@@ -627,7 +656,29 @@
max-width: 500px;
background-color: #fdf8f0;
position: absolute;
- bottom: -60px;
right: 40px;
+ top: 12vh;
+}
+.closeBtn {
+ position: absolute;
+ top: 10px;
+ right: 0;
+ cursor: pointer;
+}
+.legend {
+ position: absolute;
+ bottom: 300px;
+ left: 100px;
+}
+.tagItem {
+ display: flex;
+ margin-top: 20px;
+}
+.tagColor {
+ width: 20px;
+ height: 20px;
+}
+.tagText {
+ margin-left: 30px;
}
</style>
--
Gitblit v1.9.1