From 077feba634b75aee3c1fc8e561b2d2aeb95e3305 Mon Sep 17 00:00:00 2001
From: y505174330 <505174330@qq.com>
Date: 星期六, 18 五月 2024 15:37:00 +0800
Subject: [PATCH] 1
---
src/pages/inherit/index.vue | 75 +++++++++++++++++++++----------------
1 files changed, 42 insertions(+), 33 deletions(-)
diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue
index 615cdc6..44f026c 100644
--- a/src/pages/inherit/index.vue
+++ b/src/pages/inherit/index.vue
@@ -71,7 +71,7 @@
</div>
<div class="contentBox">
<!-- echarts鍥� -->
- <div class="barChart" ref="barChart"></div>
+ <div class="barChart" ref="barChart" ></div>
<div
class="toolBox"
v-if="showTool"
@@ -88,7 +88,7 @@
import * as echarts from "echarts";
import {
inheritMedicalSataStatistics,
- inheritMedicalList
+ inheritMedicalList,
} from "@/api/index.js";
export default {
data() {
@@ -96,15 +96,15 @@
// 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
keyword: "",
idIndex: 0,
- activeId: "",
+ activeId: 28,
conditionId: "",
- searchType: "KEYWORD",
+ searchType: "DYNASTY",
dynasty: [],
nodeData: [],
showTool: false,
toolTop: 0,
toolLeft: 0,
- toolInfo: {}
+ toolInfo: {},
};
},
onLoad(options) {
@@ -113,21 +113,23 @@
},
mounted() {
this.getStatistics();
- this.getData();
},
methods: {
getStatistics() {
inheritMedicalSataStatistics().then((res) => {
this.dynasty = res.object;
+ this.getData();
});
},
getData() {
this.nodeData = [];
+ // const defaultDynasty = this.dynasty.find(f.dynasty == "瀹�");
+ // this.activeId = defaultDynasty.dynastyId
inheritMedicalList({
keywords: this.keyword,
dynastyId: this.activeId,
searchType: this.searchType,
- path: this.conditionId
+ path: this.conditionId,
}).then((res) => {
console.log(res);
for (let i = 0; i < res.object.nodeList.length; i++) {
@@ -140,8 +142,8 @@
itemStyle: {
color: "#F8E2D7",
borderColor: "#F3AA78",
- borderWidth: "3"
- }
+ borderWidth: "3",
+ },
});
}
}
@@ -155,18 +157,18 @@
//閫氳繃 $ref 杩涜鎸傝浇
let myChart = echarts.init(this.$refs.barChart);
- let FontSize = 12; // 瀛椾綋澶у皬
+ let FontSize = 18; // 瀛椾綋澶у皬
let BorderWidth = 2; // 杈规澶у皬
let SymbolSize = 80; // 灏哄璺濈
let Distance = 10;
// 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
- FontSize = 28;
+ FontSize = 20;
BorderWidth = 5;
SymbolSize = 100;
Distance = 33;
} else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
- FontSize = 28;
+ FontSize = 20;
BorderWidth = 4;
SymbolSize = 90;
Distance = 22;
@@ -179,14 +181,14 @@
let option = {
title: {
- text: [""]
+ text: [""],
},
backgroundColor: {
type: "image",
image: "/static/image/WMBg.png",
repeat: "repeat-x", // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat'
size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱�
- position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
+ position: "center center", // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
},
tooltip: {},
animationDurationUpdate: 1500,
@@ -195,13 +197,13 @@
{
type: "graph",
layout: "force",
- symbolSize: 120,
+ symbolSize: 100,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
roam: true,
label: {
show: true,
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
- fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
+ fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
@@ -216,7 +218,7 @@
// params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚�
// 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚�
return params.data.relationName; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨��
- }
+ },
},
//鍚勪釜鑺傜偣
data: this.nodeData,
@@ -224,20 +226,25 @@
color: "#000000",
opacity: 0.9,
width: 2,
- curveness: 0
+ curveness: 0,
},
force: {
// initLayout: 'circular',
// gravity: 0
friction: 0.1,
repulsion: 500,
- edgeLength: 6
- }
- }
- ]
+ edgeLength: 6,
+ },
+ },
+ ],
};
//杩涜娓叉煋
myChart.setOption(option);
+ myChart.getZr().on("click", (params) => {
+ if (!params.target) {
+ this.showTool = false;
+ }
+ });
myChart.on("click", (params) => {
console.log(params.event.offsetX, params.event.offsetY);
if (params.componentType === "series") {
@@ -246,8 +253,10 @@
this.toolLeft = params.event.offsetX + "px";
this.toolInfo = {
id: params.data.identifier,
- name: encodeURIComponent(params.data.name)
+ name: encodeURIComponent(params.data.name),
};
+ } else {
+ this.showTool = false;
}
});
},
@@ -255,7 +264,7 @@
switch (type) {
case 1:
uni.navigateTo({
- url: "/pages/character/detail?id=" + this.toolInfo.id
+ url: "/pages/character/detail?id=" + this.toolInfo.id,
});
break;
case 2:
@@ -266,7 +275,7 @@
"&id=" +
this.toolInfo.id +
"&name=" +
- this.toolInfo.name
+ this.toolInfo.name,
});
break;
case 3:
@@ -277,7 +286,7 @@
"&id=" +
this.toolInfo.id +
"&name=" +
- this.toolInfo.name
+ this.toolInfo.name,
});
break;
}
@@ -317,8 +326,8 @@
this.keyword = "";
}
this.getData();
- }
- }
+ },
+ },
};
</script>
<style scoped>
@@ -419,8 +428,8 @@
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1rem;
- height: 0.25rem;
+ width: 1.4rem;
+ height: 0.3rem;
margin-left: 0.2rem;
border-radius: 0.13rem;
float: left;
@@ -433,8 +442,8 @@
box-shadow: 1px 1px 5px #888888;
align-items: center;
justify-content: center;
- width: 1.3rem;
- height: 0.25rem;
+ width: 1.6rem;
+ height: 0.3rem;
float: left;
margin-left: 0.2rem;
border-radius: 0.13rem;
@@ -454,7 +463,7 @@
}
.filterText {
margin-left: 10px;
- font-size: 16px;
+ font-size: 0.16rem;
}
.fontColor {
color: #827e44 !important;
--
Gitblit v1.9.1