From f4c14c24cb6cf1ed1c09cab760f6b9c8381df557 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期二, 30 四月 2024 17:44:27 +0800
Subject: [PATCH] 图谱和传承
---
src/pages/character/index.vue | 137 ++++++++++++++++++++-------------------------
1 files changed, 60 insertions(+), 77 deletions(-)
diff --git a/src/pages/character/index.vue b/src/pages/character/index.vue
index a8ae2b7..e58ea8a 100644
--- a/src/pages/character/index.vue
+++ b/src/pages/character/index.vue
@@ -269,24 +269,46 @@
// window.addEventListener("resize", this.relation);
this.innt();
},
+ onLoad(options) {
+ this.searchKey = options.keyword;
+ },
methods: {
getData() {
- getPersonList({
- keywords: "", //鎼滅储妗嗘绱�
- name: "", //濮撳悕
- alias: "", //鍒悕
- nativePlace: "", //鏈哄叧
- tagId: null, //鑱屼笟id
- official: "", //鑱屽畼
- genderType: null, //鎬у埆
- dynasty: null, //鏈濅唬鍚�
- dynastyId: null, //鏈濅唬id
- institution: "", //鏈烘瀯
- bookId: null, //鏉ユ簮id
- page: 1,
- pageSize: 100
+ getFuzzySearch({
+ keyword: this.searchKey ? this.searchKey : ""
}).then((res) => {
- console.log(res);
+ this.nodes = [];
+ this.relationships = [];
+ if (res.success && res.list) {
+ res.list.forEach((item, index) => {
+ let exists1 = this.nodes.some(
+ (node) => node.id === item.identifier1 && node.name === item.name1
+ );
+ let exists2 = this.nodes.some(
+ (node) => node.id === item.identifier2 && node.name === item.name2
+ );
+ // 璇佹槑涓嶅瓨鍦�
+ if (exists1 !== true) {
+ this.nodes.push({
+ name: item.name1,
+ id: item.identifier1
+ });
+ }
+ if (exists2 !== true) {
+ this.nodes.push({
+ name: item.name2,
+ id: item.identifier2
+ });
+ }
+ let obj = {
+ source: item.name1,
+ target: item.name2,
+ relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓�
+ };
+ this.relationships.push(obj);
+ });
+ }
+ this.relation();
});
},
// 鍏崇郴鍥捐氨
@@ -347,10 +369,8 @@
padding: [3, 8],
borderRadius: 30,
position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
- // bottom: -(FontSize+10),
- z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
- // offset: [0, 15] ,// 寰�涓嬬Щ鍔� 10 鍍忕礌
- distance: -(Distance + 1) // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+ // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
+ distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
}
});
}
@@ -361,31 +381,14 @@
return {
name: node.name,
id: node.id,
- x: Math.random() * 2000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
- y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
itemStyle: {
- color: getColorByIndex(), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
+ color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
borderWidth: BorderWidth,
- borderColor: getColorByIndex()
+ borderColor: "#996f9f"
}
};
});
- // 璁剧疆棰滆壊
- function getColorByIndex() {
- // 鐢熸垚闅忔満鐨� R銆丟銆丅 鍒嗛噺鍊硷紝闄愬埗鍦ㄦ洿楂樼殑鑼冨洿鍐�
- var r = Math.floor(Math.random() * 106) + 150; // 150 鍒� 255 涔嬮棿鐨勯殢鏈烘暟
- var g = Math.floor(Math.random() * 106) + 150; // 150 鍒� 255 涔嬮棿鐨勯殢鏈烘暟
- var b = Math.floor(Math.random() * 106) + 150; // 150 鍒� 255 涔嬮棿鐨勯殢鏈烘暟
- // 灏� R銆丟銆丅 鍒嗛噺鍊艰浆鎹负鍗佸叚杩涘埗锛屽苟纭繚姣忎釜鍒嗛噺鍊奸兘鏄袱浣嶆暟
- var hexR = r.toString(16).padStart(2, "0"); // 浣跨敤 padStart 鏂规硶纭繚鐢熸垚鐨勫崄鍏繘鍒舵暟涓轰袱浣�
- var hexG = g.toString(16).padStart(2, "0");
- var hexB = b.toString(16).padStart(2, "0");
- // 鎷兼帴鍗佸叚杩涘埗棰滆壊鍊�
- var color = "#" + hexR + hexG + hexB;
- return color;
- }
- console.log(links);
- console.log(nodeData);
+
var option;
option = {
title: {
@@ -414,7 +417,7 @@
series: [
{
type: "graph",
- layout: "none",
+ layout: "force",
roam: true,
symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
label: {
@@ -422,7 +425,7 @@
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
},
- edgeSymbol: ["circle"],
+ edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
data: nodeData,
links: links,
@@ -430,6 +433,18 @@
opacity: 0.9,
width: 2,
curveness: 0.3
+ },
+ emphasis: {
+ focus: "adjacency",
+ lineStyle: {
+ width: 10
+ }
+ },
+ force: {
+ initLayout: null,
+ // gravity: 0
+ repulsion: 800,
+ edgeLength: 400
}
}
]
@@ -437,9 +452,10 @@
// 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓�
option.series[0].links = links;
// 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
+ myChart.off("click");
myChart.on("click", (params) => {
- // menuNav2 = !menuNav1
- if (params.componentType === "series") {
+ console.log(params);
+ if (params.dataType === "node") {
this.spaceTimeArr(params.data.id);
}
});
@@ -448,40 +464,7 @@
// 鍩虹鎼滅储
onSearch(val) {
this.searchKey = val.text;
- getFuzzySearch({ keyword: val.text }).then((res) => {
- if (res.list) {
- this.nodes = [];
- this.relationships = [];
- res.list.forEach((item, index) => {
- let exists1 = this.nodes.some(
- (node) => node.id === item.identifier1 && node.name === item.name1
- );
- let exists2 = this.nodes.some(
- (node) => node.id === item.identifier2 && node.name === item.name2
- );
- // 璇佹槑涓嶅瓨鍦�
- if (exists1 !== true) {
- this.nodes.push({
- name: item.name1,
- id: item.identifier1
- });
- }
- if (exists2 !== true) {
- this.nodes.push({
- name: item.name2,
- id: item.identifier2
- });
- }
- let obj = {
- source: item.name1,
- target: item.name2,
- relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓�
- };
- this.relationships.push(obj);
- });
- }
- this.relation();
- });
+ this.getData();
},
// 楂樼骇鎼滅储
onSubmit(val) {
--
Gitblit v1.9.1