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 492d229..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="
@@ -344,12 +357,33 @@
chartData: treeData,
currentNodeInfo: {},
tooltipShow: false,
+ legendList: [
+ {
+ color: "#87A7B9",
+ name: "鍖椾含涓尰澶у",
+ },
+ {
+ color: "#C48787",
+ name: "鍖椾含甯堣寖澶у",
+ },
+ {
+ color: "#6F8F5A",
+ name: "涓浗涓尰绉戝闄�",
+ },
+ {
+ color: "#937950",
+ name: "骞垮窞涓尰鑽ぇ瀛�",
+ },
+ {
+ color: "#8D77B3",
+ name: "鎷滃笀寮熷瓙",
+ },
+ ],
};
},
mounted() {
this.initChart();
-
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
@@ -362,10 +396,15 @@
changeTab(key) {
this.activeTabs = key;
console.log(this.activeTabs, "activeTabs");
+ if (key == "chart") {
+ this.$nextTick(() => {
+ this.initChart();
+ window.addEventListener("resize", this.handleResize);
+ });
+ }
},
initChart() {
this.chart = echarts.init(this.$refs.chart);
-
const option = {
tooltip: {
trigger: "item",
@@ -402,12 +441,12 @@
},
},
textStyle: {
- color: "#bc1c00" // 璁剧疆鏁翠綋瀛椾綋棰滆壊涓虹孩鑹�
+ color: "#bc1c00", // 璁剧疆鏁翠綋瀛椾綋棰滆壊涓虹孩鑹�
},
edgeLabel: {
normal: {
- color: "#bc1c00" // 璁剧疆绾挎潯鐨勯鑹蹭负绾㈣壊
- }
+ color: "#bc1c00", // 璁剧疆绾挎潯鐨勯鑹蹭负绾㈣壊
+ },
},
series: [
{
@@ -454,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) {
@@ -574,10 +601,12 @@
/* 绉婚櫎鏈�鍚庝竴琛岀殑涓嬭竟妗� */
}
}
+
.charts-main {
// background-color: #000;
position: relative;
}
+
.table-title {
display: flex;
align-items: center;
@@ -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