From 0326804dd7bf985d1912abbab10dec84923acef6 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 12 七月 2024 18:02:15 +0800
Subject: [PATCH] 1
---
src/pages/inherit/index.vue | 79 +++++++++++++++++++++++++++++----------
1 files changed, 58 insertions(+), 21 deletions(-)
diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue
index 370cf29..998d145 100644
--- a/src/pages/inherit/index.vue
+++ b/src/pages/inherit/index.vue
@@ -95,7 +95,7 @@
</div>
</div>
</div>
- <div style="padding-left: 0.5rem; margin-top: 20px">
+ <div style="padding-left: 0.5rem; margin-top: 0.1rem">
鍏� {{ totalCount }}涓笘鍖�
</div>
</div>
@@ -122,7 +122,13 @@
:style="{ top: toolTop, left: toolLeft }"
>
<div class="toolItem" @click="gotoDetail(1)">涓汉淇℃伅</div>
- <div class="toolItem" @click="gotoDetail(2)">涓栧尰鏂囧寲</div>
+ <div
+ class="toolItem"
+ style="position: relative; top: -40px"
+ @click="gotoDetail(2)"
+ >
+ 涓栧尰鏂囧寲
+ </div>
<div class="toolItem" @click="gotoDetail(3)">涓栧尰浼犳壙</div>
</div>
</div>
@@ -288,29 +294,59 @@
friction: 0.1,
repulsion: 500,
edgeLength: 6
+ },
+ selectedMode: "single",
+ select: {
+ itemStyle: {
+ color: "#e8f3ff",
+ borderColor: "#284e74",
+ borderWidth: "3"
+ }
}
}
]
};
+ let selectData = [];
//杩涜娓叉煋
myChart.setOption(option);
- myChart.getZr().on("click", (params) => {
- if (!params.target) {
+ // myChart.getZr().on("click", (params) => {
+ // console.log(params);
+ // console.log(selectData);
+ // if (!params.target) {
+ // this.showTool = false;
+ // }
+ // });
+ myChart.on("click", (params) => {
+ if (selectData.length > 0) {
+ let x = params.event.target.transform[4];
+ let y = params.event.target.transform[5];
+ if (params.componentType === "series") {
+ this.showTool = true;
+ this.toolTop = y - 70 + "px";
+ this.toolLeft = x - 163 + "px";
+ this.toolInfo = {
+ id: params.data.identifier,
+ name: encodeURIComponent(params.data.name)
+ };
+ } else {
+ this.showTool = false;
+ }
+ }
+ });
+ myChart.on("selectchanged", (params) => {
+ if (params.fromAction == "select") {
+ selectData = params.selected[0].dataIndex;
+ } else {
+ selectData = [];
this.showTool = false;
}
});
- myChart.on("click", (params) => {
- if (params.componentType === "series") {
- this.showTool = true;
- this.toolTop = params.event.offsetY + "px";
- this.toolLeft = params.event.offsetX + "px";
- this.toolInfo = {
- id: params.data.identifier,
- name: encodeURIComponent(params.data.name)
- };
- } else {
- this.showTool = false;
- }
+ myChart.on("graphroam", (params) => {
+ this.showTool = false;
+ myChart.dispatchAction({
+ type: "unselect",
+ dataIndex: selectData
+ });
});
},
gotoDetail(type) {
@@ -421,6 +457,7 @@
font-size: 0.12rem;
cursor: pointer;
background-color: #fff;
+ display: inline-block;
}
.toolItem:hover {
background-color: #efefef;
@@ -464,12 +501,12 @@
display: flex;
margin-top: 0.2rem;
width: 100%;
- padding: 0.1rem 0.5rem;
+ padding: 0 0.5rem;
}
.condition {
display: flex;
width: 100%;
- padding: 0.1rem 0.5rem;
+ padding: 0 0.5rem;
}
.filterList {
flex: 1;
@@ -482,7 +519,6 @@
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1.4rem;
height: 0.3rem;
margin-left: 0.2rem;
border-radius: 0.13rem;
@@ -490,13 +526,14 @@
margin-top: 0.02rem;
margin-bottom: 0.1rem;
cursor: pointer;
+ padding: 0 0.1rem;
}
.conditionItem {
display: flex;
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1.6rem;
+ padding: 0 0.1rem;
height: 0.3rem;
float: left;
margin-left: 0.2rem;
@@ -517,7 +554,7 @@
}
.filterText {
margin-left: 10px;
- font-size: 0.16rem;
+ font-size: 0.14rem;
}
.fontColor {
color: #827e44 !important;
--
Gitblit v1.9.1