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/academicGenres/chart.vue | 439 +++++++-----------------
src/pages/character/index.vue | 38 -
src/api/index.js | 8
src/pages/inherit/list.vue | 573 +++---------------------------
src/pages/inherit/index.vue | 16
5 files changed, 232 insertions(+), 842 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index 6c25b8c..cfdaad6 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -251,6 +251,14 @@
});
};
+export const searchSchoolPerson = (data) => {
+ return req1({
+ url: "/person/searchSchoolPerson",
+ method: "post",
+ params: data
+ });
+};
+
// 鍖讳簨鍒跺害
// 鏁版嵁缁熻
export const getDataStatistics = () => {
diff --git a/src/pages/academicGenres/chart.vue b/src/pages/academicGenres/chart.vue
index c11e650..4e8faa4 100644
--- a/src/pages/academicGenres/chart.vue
+++ b/src/pages/academicGenres/chart.vue
@@ -1,7 +1,9 @@
<template>
- <view>
+ <view
+ style="width: 100%; height: 100%; display: flex; flex-direction: column"
+ >
<!-- 椤堕儴瀵艰埅 -->
- <headNav :idIndex="3" text="鍘嗕唬瀛︽湳娴佹淳" />
+ <headNav :idIndex="3 + ''" text="鍘嗕唬瀛︽湳娴佹淳" />
<view class="Midde flex">
<!-- <view class="MiddeBack">杩斿洖</view> -->
<el-button class="MiddeBack flex flex-center" @click="goBack"
@@ -30,14 +32,11 @@
</li>
</ul>
</view>
+ <view></view>
</view>
<view class="flex flex-center" style="width: 100%; margin: 0.2rem 0">
<ul class="flex">
- <li
- class="school1"
- v-for="(item, index) in dynasty"
- :key="item.id"
- >
+ <li class="school1" v-for="(item, index) in dynasty" :key="item.id">
<view
class="flex flex-center font-family school"
style="
@@ -68,18 +67,21 @@
</li>
</ul>
</view>
- <view class="Bottom">
- <view id="main" style="width: 100vw; height: 5rem"></view>
+ <view class="contentBox">
+ <view id="main" style="width: 100%; height: 100%"></view>
</view>
</view>
</template>
<script>
-import { getIntroduction } from "@/api/index.js";
+import { getIntroduction, searchSchoolPerson } from "@/api/index.js";
import * as echarts from "echarts";
export default {
data() {
return {
+ detailData: {},
+ nodeData: [],
+ links: [],
// 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
idIndex: 0,
dynasty: [
@@ -103,17 +105,13 @@
},
onLoad(options) {
this.idIndex = options.id;
- this.getData();
+ this.getDetailData();
},
methods: {
- getData() {
+ getDetailData() {
getIntroduction(Number(this.idIndex)).then((res) => {
this.detailData = {
name: res.object.school_NAME[0].content,
- icon:
- res.object.pictureList && res.object.pictureList.length > 0
- ? getImg(res.object.pictureList[0].filePath)
- : "",
character: res.object.important_PEOPLE
? res.object.important_PEOPLE
.map((item) => item.content2)
@@ -186,8 +184,60 @@
})
: []
};
- console.log(this.detailData);
+ this.getData();
});
+ },
+ getData() {
+ this.nodeData = [];
+ this.links = [];
+ const p = this.detailData.character.split("銆�");
+ for (let i = 0; i < p.length; i++) {
+ const item = p[i];
+ // 浠ｈ〃浜虹墿
+ this.nodeData.push({
+ name: item,
+ x: 200 * i,
+ y: 200 * i,
+ itemStyle: {
+ color: "#ecf4fe",
+ borderWidth: 4,
+ borderColor: "#597aa5",
+ borderRadius: 30
+ },
+ symbolSize: 100
+ });
+ searchSchoolPerson({
+ keyword: item
+ }).then((res) => {
+ console.log(res.list, i);
+ for (let i = 0; i < res.list.length; i++) {
+ const citem = res.list[i];
+ // 鑺傜偣
+ this.nodeData.push({
+ name: citem.name2,
+ x: Math.random() * 1000,
+ y: Math.random() * 600,
+ itemStyle: {
+ color: citem.relationType == "浜虹墿钁椾綔" ? "#eee" : "#FDEFE4",
+ borderWidth: 4,
+ borderColor:
+ citem.relationType == "浜虹墿钁椾綔" ? "#9e9e9e" : "#DA7A2B",
+ borderRadius: 30
+ },
+ symbolSize: 100
+ });
+ // 鍏崇郴
+ this.links.push({
+ source: item,
+ target: citem.name2,
+ label: {
+ show: false
+ }
+ });
+ }
+ this.init();
+ });
+ }
},
goBack() {
this.$router.go(-1);
@@ -197,300 +247,70 @@
url: "/pages/academicGenres/detail?id=" + this.idIndex
});
},
- innt() {
- this.$nextTick(() => {
- // var chartDom = document.getElementById('main'); // 鑾峰彇HTML涓殑鍏冪礌锛屾澶勫亣璁炬湁涓�涓猧d涓�'main'鐨勫厓绱犱綔涓哄浘琛ㄥ鍣�
- // var myChart = echarts.init(chartDom); // 鍒濆鍖杄charts瀹炰緥锛屽苟灏嗗叾涓庡浘琛ㄥ鍣ㄧ粦瀹�
- // var option; // 瀹氫箟鍙橀噺option鏉ュ瓨鍌ㄥ浘琛ㄧ殑閰嶇疆椤�
-
- // option = {
- // // title: {
- // // text: 'Basic Graph' // 鍥捐〃鏍囬涓�'Basic Graph'
- // // },
- // tooltip: {}, // 榧犳爣鎮仠鏃舵樉绀虹殑鎻愮ず妗�
- // animationDurationUpdate: 1500, // 鏁版嵁鏇存柊鏃剁殑鍔ㄧ敾鏃堕暱
- // animationEasingUpdate: 'quinticInOut', // 鏁版嵁鏇存柊鏃剁殑鍔ㄧ敾鏁堟灉
- // series: [{
- // type: 'graph', // 鍥捐〃绫诲瀷涓�'graph'
- // layout: 'none', // 鍥捐〃甯冨眬鏂瑰紡涓�'none'锛屽嵆鑺傜偣浣嶇疆鐢眡鍜寉鍧愭爣鎸囧畾
- // symbolSize: 150, // 鑺傜偣鐨勫ぇ灏�
- // roam: false, // 鏄惁寮�鍚极娓革紝鍗冲彲浠ユ嫋鍔ㄥ拰缂╂斁鍥捐〃
- // label: {
- // show: true, // 鏄惁鏄剧ず鑺傜偣涓婄殑鏍囩
- // textStyle: {
- // fontSize: 32, // 璁剧疆瀛椾綋澶у皬涓�12
- // }
- // },
- // edgeSymbol: ['circle', 'arrow'], // 杈圭殑璧峰鍜岀粨鏉熺澶存牱寮�
- // edgeSymbolSize: [10, 10], // 杈圭殑璧峰鍜岀粨鏉熺澶村ぇ灏�
- // edgeLabel: {
- // fontSize: 40, // 杈圭殑鏍囩瀛椾綋澶у皬
-
- // },
- // data: [{
- // name: '閲戝厓鍥涘ぇ瀹�', // 鑺傜偣1鐨勫悕绉�
- // x: 1230, // 鑺傜偣1鐨剎鍧愭爣
- // y: 250, // 鑺傜偣1鐨剏鍧愭爣
- // itemStyle: {
- // color: 'red', // 鑺傜偣1鐨勮儗鏅鑹�
- // },
- // label: {
- // color: 'black' // 鑺傜偣1鐨勫瓧浣撻鑹�
- // }
- // },
- // {
- // name: '鍒樺畬绱�', // 鑺傜偣2鐨勫悕绉�
- // x: 800, // 鑺傜偣2鐨剎鍧愭爣
- // y: 300 // 鑺傜偣2鐨剏鍧愭爣
- // },
- // {
- // name: '鍌峰瘨鐩存牸', // 鑺傜偣3鐨勫悕绉�
- // x: 550, // 鑺傜偣3鐨剎鍧愭爣
- // y: 360 // 鑺傜偣3鐨剏鍧愭爣
- // },
- // {
- // name: '寮犱徊鏅�', // 鑺傜偣4鐨勫悕绉�
- // x: 700, // 鑺傜偣4鐨剎鍧愭爣
- // y: 200 // 鑺傜偣4鐨剏鍧愭爣
- // },
- // {
- // name: '涓夋秷璜�', // 鑺傜偣4鐨勫悕绉�
- // x: 750, // 鑺傜偣4鐨剎鍧愭爣
- // y: 500 // 鑺傜偣4鐨剏鍧愭爣
- // },
- // ],
- // links: [ // 杈圭殑杩炴帴鍏崇郴
- // {
- // source: '閲戝厓鍥涘ぇ瀹�', // 杈圭殑璧峰鑺傜偣绱㈠紩涓�0锛屽嵆鑺傜偣1
- // target: '鍒樺畬绱�', // 杈圭殑缁撴潫鑺傜偣绱㈠紩涓�1锛屽嵆鑺傜偣2
- // symbolSize: [5, 20], // 杈圭殑璧峰鍜岀粨鏉熺澶村ぇ灏�
- // label: {
- // show: true, // 鏄惁鏄剧ず杈圭殑鏍囩
- // formatter: '鍖呭惈',
- // },
- // lineStyle: {
- // width: 5, // 杈圭殑瀹藉害
- // curveness: 0.2 // 杈圭殑鏇插害
-
- // }
- // },
- // {
- // source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 2'
- // target: '鍌峰瘨鐩存牸', // 杈圭殑缁撴潫鑺傜偣涓�'Node 1'
- // label: {
- // show: true, // 鏄惁鏄剧ず杈圭殑鏍囩
- // formatter: '鍑虹増鐗�'
- // },
- // lineStyle: {
- // curveness: 0.2, // 杈圭殑鏇插害
-
- // }
- // },
- // {
- // source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 1'
- // target: '寮犱徊鏅�', // 杈圭殑缁撴潫鑺傜偣涓�'Node 3'
- // label: {
- // show: true, // 鏄惁鏄剧ず杈圭殑鏍囩
- // formatter: '璇勮'
- // },
- // lineStyle: {
- // curveness: 0.2 // 杈圭殑鏇插害
- // }
- // },
- // {
- // source: '鍒樺畬绱�', // 杈圭殑璧峰鑺傜偣涓�'Node 2'
- // target: '涓夋秷璜�', // 杈圭殑缁撴潫鑺傜偣涓�'Node 3'
- // label: {
- // show: true, // 鏄惁鏄剧ず杈圭殑鏍囩
- // formatter: '鍑虹増鐗�'
- // },
- // lineStyle: {
- // curveness: 0.2 // 杈圭殑鏇插害
- // }
- // }
- // ],
- // lineStyle: {
- // opacity: 0.9, // 杈圭殑閫忔槑搴�
- // width: 2, // 杈圭殑瀹藉害
- // curveness: 0 // 杈圭殑鏇插害
- // },
- // textStyle: {
- // fontSize: 14 // 璁剧疆鍏ㄥ眬鏂囧瓧鐨勫瓧浣撳ぇ灏�
- // },
- // }]
- // };
-
- // option && myChart.setOption(option); // 灏嗛厤缃」搴旂敤浜庡浘琛ㄥ疄渚�
- // console.log(myChart);
-
- var chartDom = document.getElementById("main");
- var myChart = echarts.init(chartDom);
- // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁
- var nodes = ["鍒樺畬绱�", "寮犱徊鏅�", "閲戝厓鍥涘ぇ瀹�", "涓夋秷璁�", "浼ゅ瘨鐩存牸"];
- var relationships = [
+ init() {
+ var chartDom = document.getElementById("main");
+ var myChart = echarts.init(chartDom);
+ let FontSize = 12; // 瀛椾綋澶у皬
+ let SymbolSize = 80; // 灏哄璺濈
+ // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
+ if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
+ FontSize = 28;
+ SymbolSize = 100;
+ } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
+ FontSize = 28;
+ SymbolSize = 90;
+ } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
+ FontSize = 18;
+ SymbolSize = 70;
+ }
+ var option;
+ option = {
+ tooltip: {},
+ animationDurationUpdate: 1500,
+ animationEasingUpdate: "quinticInOut",
+ series: [
{
- source: "閲戝厓鍥涘ぇ瀹�",
- target: "鍒樺畬绱�",
- relation: "濮讳翰"
- },
- {
- source: "鍒樺畬绱�",
- target: "寮犱徊鏅�",
- relation: ""
- },
- {
- source: "鍒樺畬绱�",
- target: "浼ゅ瘨鐩存牸",
- relation: ""
- },
- {
- source: "鍒樺畬绱�",
- target: "涓夋秷璁�",
- relation: ""
- }
- // 鍏朵粬鍏崇郴...
- ];
-
- let FontSize = 12; // 瀛椾綋澶у皬
- let BorderWidth = 2; // 杈规澶у皬
- let SymbolSize = 80; // 灏哄璺濈
- let Distance = 10;
- // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
- if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
- FontSize = 28;
- BorderWidth = 5;
- SymbolSize = 100;
- Distance = 33;
- } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
- FontSize = 28;
- BorderWidth = 4;
- SymbolSize = 90;
- Distance = 22;
- } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
- FontSize = 18;
- BorderWidth = 4;
- SymbolSize = 70;
- Distance = 22;
- }
- // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾�
- var links = [];
- relationships.forEach(function (relationship) {
- // console.log(relationship,'relationship');
- var sourceIndex = nodes.indexOf(relationship.source);
- var targetIndex = nodes.indexOf(relationship.target);
- var linkObject = {
- source: sourceIndex,
- target: targetIndex
- };
- if (relationship.relation !== "") {
- linkObject.label = {
+ type: "graph",
+ layout: "none",
+ symbolSize: SymbolSize + 20,
+ //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
+ roam: true,
+ label: {
show: true,
- formatter: function (params) {
- return relationship.relation;
- },
- color: "#2C2C2C",
- fontSize: FontSize - 2,
- backgroundColor: "rgba(255, 255, 255, 1)",
- padding: [11, 20],
- borderRadius: 300,
- position: "middle",
- z: 10,
- distance: -(Distance + 1)
- };
- }
- links.push(linkObject);
- // if (sourceIndex !== -1 && targetIndex !== -1) {
- // links.push({
- // source: sourceIndex,
- // target: targetIndex,
- // label: {
- // show: true,
- // formatter: function(params) { // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹�
- // // console.log(params.data, 'aaaaaaaaaaaa');
- // return relationships.find(rel => rel.source === nodes[
- // params.data
- // .source] && rel.target === nodes[params
- // .data.target])
- // .relation;
- // }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent"
- // color: '#2C2C2C',
- // fontSize: FontSize - 2,
- // backgroundColor: 'rgba(255, 255, 255, 1)',
- // padding: [11, 20],
- // position: 'middle', // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
- // // bottom: -(FontSize+10),
- // z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
- // // offset: [0, 15] ,// 寰�涓嬬Щ鍔� 10 鍍忕礌
- // distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
- // }
- // });
- // }
- });
- // 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹�
- var nodeData = nodes.map(function (node, index) {
- return {
- name: node,
- x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
- y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
- itemStyle: {
- color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
- borderWidth: BorderWidth + 3,
- borderColor: getColorByIndex(index + 1),
- borderRadius: 30
+ color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
+ fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
},
- symbolSize: SymbolSize + 50
- };
- });
- // 璁剧疆棰滆壊
- function getColorByIndex(index) {
- var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍
- return colors[index % colors.length];
- }
- var option;
- option = {
- backgroundColor: {
- type: "image",
- image: "/static/image/characterRelationBg.png",
- repeat: "repeat-x", // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat'
- size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱�
- position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
- },
- tooltip: {},
- animationDurationUpdate: 1500,
- animationEasingUpdate: "quinticInOut",
- series: [
- {
- type: "graph",
- layout: "none",
- symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
- label: {
- show: true,
- color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
- fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
- },
- // edgeSymbol: ['circle'],
- // edgeSymbolSize: [4, 10],
- edgeSymbol: ["circle", "arrow"], // 杈圭殑璧峰鍜岀粨鏉熺澶存牱寮�
- edgeSymbolSize: [20, 20], // 杈圭殑璧峰鍜岀粨鏉熺澶村ぇ灏�
- data: nodeData,
- links: links,
- lineStyle: {
- opacity: 0.9,
- width: 2,
- curveness: 0.3
- }
- }
- ]
- };
+ edgeSymbol: ["circle", "arrow"],
+ edgeSymbolSize: [4, 10],
- // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓�
- option.series[0].links = links;
- option && myChart.setOption(option);
- });
+ edgeLabel: {
+ show: true,
+ fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋
+ position: "middle",
+ //杩欓噷璁剧疆鍏崇郴鏂囧瓧鏄惁鍜岀嚎娈甸噸鍙�
+ // padding: [0, 0], // 璋冩暣鍐呰竟璺濅互纭繚鏍囩涓庣嚎娈电揣瀵嗚创鍚�
+ // verticalAlign: 'middle', // 璁剧疆鏂囨湰鐨勫瀭鐩村榻愭柟寮忎负灞呬腑
+ formatter: function (params) {
+ // params.data 鏄竟鐨勬暟鎹璞★紝浣犲彲浠ュ湪杩欓噷瀹氫箟鍏崇郴鍚�
+ // 渚嬪锛屼綘鍙互鏍规嵁 source 鍜� target 鐨勫悕绉版潵瀹氫箟鍏崇郴鍚�
+ return params.data.relationName; // 濡傛灉瀹氫箟浜� relationName 鍒欐樉绀哄畠锛屽惁鍒欐樉绀衡�滅埗瀛愨��
+ }
+ },
+ //鍚勪釜鑺傜偣
+ data: this.nodeData, //鍏崇郴杩炴帴
+ links: this.links,
+ lineStyle: {
+ color: "#000000",
+ opacity: 0.9,
+ width: 2,
+ curveness: 0
+ }
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
}
- },
- mounted() {
- this.innt();
}
};
</script>
@@ -552,4 +372,11 @@
.school1 {
margin: 0 0.2rem;
}
+
+.contentBox {
+ flex: 1;
+ background-image: url("@/static/image/characterRelationBg.png");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+}
</style>
diff --git a/src/pages/character/index.vue b/src/pages/character/index.vue
index 3ac07c9..e58ea8a 100644
--- a/src/pages/character/index.vue
+++ b/src/pages/character/index.vue
@@ -369,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 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
}
});
}
@@ -383,8 +381,6 @@
return {
name: node.name,
id: node.id,
- x: Math.random() * 2000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
- y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
itemStyle: {
color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
borderWidth: BorderWidth,
@@ -392,20 +388,7 @@
}
};
});
- // 璁剧疆棰滆壊
- 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;
- }
+
var option;
option = {
title: {
@@ -434,7 +417,7 @@
series: [
{
type: "graph",
- layout: "none",
+ layout: "force",
roam: true,
symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
label: {
@@ -442,7 +425,7 @@
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
},
- edgeSymbol: ["circle"],
+ edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
data: nodeData,
links: links,
@@ -456,6 +439,12 @@
lineStyle: {
width: 10
}
+ },
+ force: {
+ initLayout: null,
+ // gravity: 0
+ repulsion: 800,
+ edgeLength: 400
}
}
]
@@ -463,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);
}
});
diff --git a/src/pages/inherit/index.vue b/src/pages/inherit/index.vue
index 4302770..325dcfe 100644
--- a/src/pages/inherit/index.vue
+++ b/src/pages/inherit/index.vue
@@ -1,7 +1,7 @@
<template>
<view class="">
<headNav
- :idIndex="idIndex"
+ idIndex="2"
:searchBg="false"
text="涓尰涓栧尰浼犳壙鏁版嵁搴�"
bg="/static/image/topBg1.png"
@@ -54,12 +54,7 @@
</template>
<script>
import * as echarts from "echarts";
-import {
- inheritMedicalList,
- inheritMedicalSataStatistics,
- inheritMedicalCultureList,
- inheritMedicalRelationList
-} from "@/api/index.js";
+import { inheritMedicalList } from "@/api/index.js";
export default {
data() {
return {
@@ -168,7 +163,6 @@
Distance = 22;
}
- console.log(this.nodeData, "this.nodeData");
let option = {
title: {
text: [""]
@@ -232,7 +226,11 @@
myChart.setOption(option);
myChart.on("click", (params) => {
uni.navigateTo({
- url: "/pages/inherit/list"
+ url:
+ "/pages/inherit/list?id=" +
+ params.data.identifier +
+ "&name=" +
+ encodeURIComponent(params.data.name)
});
});
},
diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index 3093d4b..45f0b2d 100644
--- a/src/pages/inherit/list.vue
+++ b/src/pages/inherit/list.vue
@@ -1,7 +1,7 @@
<template>
<view class="">
<headNav
- :idIndex="idIndex"
+ idIndex="2"
:searchBg="false"
text="涓尰涓栧尰浼犳壙鏁版嵁搴�"
bg="/static/image/topBg1.png"
@@ -17,7 +17,7 @@
>杩斿洖</el-button
>
<h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500">
- 閭电櫥鐎�
+ {{ mainName }}
</h3>
</view>
<ul class="flex tabBox">
@@ -86,515 +86,79 @@
</template>
<script>
import * as echarts from "echarts";
+import {
+ inheritMedicalSataStatistics,
+ inheritMedicalCultureList,
+ inheritMedicalRelationList
+} from "@/api/index.js";
+
export default {
data() {
return {
// 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
idIndex: 0,
+ mainName: "",
activeIndex: 1,
- dataList: [
- {
- name: "钖涢洩",
- x: 300,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "閭电櫥鐎�",
- x: 400,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "閭甸瞾鐬�",
- x: 500,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "閭垫槬娉�",
- x: 600,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "寰愰敠",
- x: 650,
- y: 400,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "閭典笝鎵�",
- x: 700,
- y: 300,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "鍐鑺�",
- x: 720,
- y: 400,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鏉庨缚绔�",
- x: 740,
- y: 500,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3"
- }
- },
- {
- name: "閭垫櫙灏�",
- x: 800,
- y: 200,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "閭垫櫙搴�",
- x: 800,
- y: 400,
- itemStyle: {
- color: "#F8E2D7",
- borderColor: "#F3AA78",
- borderWidth: "3"
- }
- },
- {
- name: "椴嶆槆",
- x: 750,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鏂囬緳",
- x: 850,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鍌呭簡璐�",
- x: 950,
- y: 50,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鎴愬厑",
- x: 950,
- y: 100,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鑳＄帀鍧�",
- x: 950,
- y: 150,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "瑁曠",
- x: 950,
- y: 200,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "闄嗕箖鏄�",
- x: 950,
- y: 250,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鍒樹紶绁�",
- x: 950,
- y: 300,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "閭佃瘹",
- x: 950,
- y: 350,
- itemStyle: {
- color: "#DCE7EB",
- borderColor: "#5F81A4",
- borderWidth: "3"
- }
- },
- {
- name: "鏇惧浗钘�",
- x: 1050,
- y: 200,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3"
- }
- },
- {
- name: "鏇惧浗钘�01",
- x: 1050,
- y: 50,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3"
- }
- },
- {
- name: "鏇惧浗钘�02",
- x: 1050,
- y: 350,
- itemStyle: {
- color: "#E1E1E1",
- borderColor: "#888888",
- borderWidth: "3"
- }
- }
- ],
- links: [
- {
- source: "钖涢洩",
- target: "閭电櫥鐎�",
- relationName: "甯堝緬",
- hasArrow: "true"
- },
- {
- source: "閭电櫥鐎�",
- target: "閭甸瞾鐬�",
- relationName: "鐖跺瓙"
- },
- {
- source: "閭甸瞾鐬�",
- target: "閭垫槬娉�",
- relationName: "鐖跺瓙"
- },
- {
- source: "閭垫槬娉�",
- target: "閭典笝鎵�",
- relationName: "鍙斾緞"
- },
- //鏇茬嚎
- {
- source: "閭垫槬娉�",
- target: "寰愰敠",
- relationName: "鏈嬪弸",
- //杩欓噷璁剧疆涓轰笉甯︾澶�
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭典笝鎵�",
- target: "閭垫櫙灏�",
- relationName: "鐖跺瓙"
- },
- {
- source: "閭典笝鎵�",
- target: "閭垫櫙搴�",
- relationName: "鐖跺瓙"
- },
- //鏇茬嚎
- {
- source: "閭典笝鎵�",
- target: "鍐鑺�",
- relationName: "鏈嬪弸",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- //鏇茬嚎
- {
- source: "閭典笝鎵�",
- target: "椴嶆槆",
- relationName: "甯堝緬",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: 0.2
- }
- },
- //鏇茬嚎
- {
- source: "鍐鑺�",
- target: "鏉庨缚绔�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "閭垫櫙搴�",
- relationName: "鍏勫紵"
- },
- {
- source: "閭垫櫙搴�",
- target: "閭垫櫙灏�",
- relationName: "鍏勫紵"
- },
- {
- source: "閭垫櫙灏�",
- target: "椴嶆槆",
- relationName: "濮讳翰",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鏂囬緳",
- relationName: "鏈嬪弸",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: 0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鍌呭簡璐�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.1
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鎴愬厑",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鑳＄帀鍧�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "瑁曠",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "闄嗕箖鏄�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "鍒樹紶绁�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "閭垫櫙灏�",
- target: "閭佃瘹",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1",
- curveness: -0.2
- }
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鑳＄帀鍧�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "瑁曠",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "闄嗕箖鏄�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鍒樹紶绁�",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鎴愬厑",
- target: "鏇惧浗钘�",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "鍌呭簡璐�",
- target: "鏇惧浗钘�01",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- },
- {
- source: "閭佃瘹",
- target: "鏇惧浗钘�02",
- relationName: "鍚屽儦",
- symbol: ["none", "none"],
- lineStyle: {
- color: "#6584B1"
- }
- }
- ],
+ dataList: [],
+ links: [],
socialMapping: true,
showType: "1"
};
},
onLoad(options) {
this.idIndex = options.id;
+ this.mainName = decodeURIComponent(options.name);
console.log("optionsoptionsoptions", options.id);
},
mounted() {
- // 鍒濆鍖� echarts
- this.initBarChart(this.dataList, this.links);
+ this.getData();
},
methods: {
+ getData() {
+ inheritMedicalRelationList({
+ identifier: this.idIndex,
+ socialFlag: true
+ }).then((res) => {
+ console.log(res);
+ let data = res.object;
+ // 澶勭悊鑺傜偣棰滆壊
+ this.links = [];
+ for (let i = 0; i < data.edgeList.length; i++) {
+ const linkItem = data.edgeList[i];
+ const index = data.nodeList.findIndex(
+ (item) => item.identifier == linkItem.endId
+ );
+ if (linkItem.relationType == "浜插睘鍏崇郴") {
+ data.nodeList[index].linkType = 1;
+ data.nodeList[index].color = "#DCE7EB";
+ data.nodeList[index].borderColor = "#5F81A4";
+ }
+ if (linkItem.relationType == "绀句細鍏崇郴") {
+ data.nodeList[index].linkType = 2;
+ data.nodeList[index].color = "#E1E1E1";
+ data.nodeList[index].borderColor = "#888888";
+ }
+ this.links.push({
+ source: this.mainName,
+ target: data.nodeList[index].name,
+ relationName: linkItem.relation
+ });
+ }
+ this.dataList = [];
+ this.dataList = data.nodeList.map((item) => {
+ return {
+ ...item,
+ itemStyle: {
+ color: item.identifier == this.idIndex ? "#F8E2D7" : item.color,
+ borderColor: item.identifier == this.idIndex ? "#F3AA78" : item.borderColor,
+ borderWidth: "3"
+ }
+ };
+ });
+ console.log(this.dataList,this.links);
+ this.initBarChart();
+ });
+ },
showSocialMapping() {
this.socialMapping = !this.socialMapping;
let newDataList = [];
@@ -619,7 +183,7 @@
}, 50);
}
},
- initBarChart(dataList, links) {
+ initBarChart() {
// WMBg
//閫氳繃 $ref 杩涜鎸傝浇
var barChart = document.getElementById("barChart");
@@ -648,9 +212,6 @@
}
let option = {
- title: {
- text: [""]
- },
backgroundColor: {
type: "image",
image: "./static/image/WMBg.png",
@@ -663,16 +224,16 @@
series: [
{
type: "graph",
- layout: "none",
+ layout: "force",
symbolSize: SymbolSize + 20,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
- roam: false,
+ roam: true,
label: {
show: true,
color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
},
- edgeSymbol: ["circle", "arrow"],
+ edgeSymbol: ["circle"],
edgeSymbolSize: [4, 10],
edgeLabel: {
@@ -689,13 +250,19 @@
}
},
//鍚勪釜鑺傜偣
- data: dataList, //鍏崇郴杩炴帴
- links: links,
+ data: this.dataList, //鍏崇郴杩炴帴
+ links: this.links,
lineStyle: {
color: "#000000",
opacity: 0.9,
width: 2,
curveness: 0
+ },
+ force: {
+ initLayout: null,
+ // gravity: 0
+ repulsion: 600,
+ edgeLength: 400
}
}
]
--
Gitblit v1.9.1