From e00361c6bcbb1a56f6dcda22b91bdfcb2736e263 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 26 七月 2024 15:56:27 +0800
Subject: [PATCH] 1
---
src/pages/academicGenres/chart.vue | 184 ++++++++++++++++++++++++++++-----------------
1 files changed, 113 insertions(+), 71 deletions(-)
diff --git a/src/pages/academicGenres/chart.vue b/src/pages/academicGenres/chart.vue
index a617464..7d98e9a 100644
--- a/src/pages/academicGenres/chart.vue
+++ b/src/pages/academicGenres/chart.vue
@@ -3,7 +3,7 @@
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"
@@ -65,23 +65,32 @@
</li>
</ul>
</view>
- <view class="contentBox" style="position: relative;">
+ <view class="contentBox" style="position: relative">
<div
- v-if="nodeData.length == 0"
- style="color: #666; text-align: center; font-size: 16px; position: absolute;top: 1rem;left: 0;right: 0;"
- >
- 鏆傛棤鏁版嵁
- </div>
- <view id="main" style="width: 100%; height: 100%">
-
- </view>
-
+ v-if="nodeData.length == 0"
+ style="
+ color: #666;
+ text-align: center;
+ font-size: 16px;
+ position: absolute;
+ top: 1rem;
+ left: 0;
+ right: 0;
+ "
+ >
+ 鏆傛棤鏁版嵁
+ </div>
+ <view id="main" style="width: 100%; height: 100%"> </view>
</view>
</view>
</template>
<script>
-import { getIntroduction, searchSchoolPerson } from "@/api/index.js";
+import {
+ getIntroduction,
+ searchSchoolPerson,
+ schoolAtlas
+} from "@/api/index.js";
import * as echarts from "echarts";
export default {
data() {
@@ -229,34 +238,57 @@
},
symbolSize: 100
});
- searchSchoolPerson({
- keyword: item
- }).then((res) => {
+ schoolAtlas(Number(this.idIndex)).then((res) => {
if (res.list) {
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
+ if (
+ citem.relationType != "浠ｈ〃浜虹墿" &&
+ citem.relationType != "浜虹墿鍏崇郴"
+ ) {
+ // 鑺傜偣
+ if (citem.name1) {
+ this.nodeData.push({
+ name: citem.name1,
+ 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.name1,
+ label: {
+ show: true,
+ formatter: function (params) {
+ // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹�
+ // return relationships.find(rel => rel.source === nodes[params.data
+ // .source] && rel.target === nodes[params.data.target])
+ // .relation;
+ return citem.name2;
+ }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent"
+ color: "#2C2C2C",
+ fontSize: 14,
+ backgroundColor: "rgba(255, 255, 255, 1)",
+ padding: [3, 8],
+ borderRadius: 30,
+ position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
+ // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
+ distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+ }
+ });
}
- });
+ }
}
}
this.init();
@@ -295,7 +327,8 @@
series: [
{
type: "graph",
- layout: "none",
+ layout: "force",
+ roam: true,
symbolSize: SymbolSize + 20,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
roam: true,
@@ -306,7 +339,12 @@
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
-
+ emphasis: {
+ focus: "adjacency",
+ lineStyle: {
+ width: 10
+ }
+ },
edgeLabel: {
show: true,
fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋
@@ -324,10 +362,14 @@
data: this.nodeData, //鍏崇郴杩炴帴
links: this.links,
lineStyle: {
- color: "#000000",
opacity: 0.9,
- width: 2,
- curveness: 0
+ width: 2
+ },
+ force: {
+ // layoutAnimation: false,
+ // friction: 1,
+ repulsion: 800,
+ edgeLength: 400
}
}
]
@@ -347,17 +389,17 @@
.NavTop {
background-color: #0c274c;
padding: 25rpx;
+}
+.NavTop img {
+ width: 30rpx;
+ height: 30rpx;
+ vertical-align: middle;
+}
+
+.NavTop .NavTopr {
img {
- width: 30rpx;
- height: 30rpx;
- vertical-align: middle;
- }
-
- .NavTopr {
- img {
- margin-right: 10rpx;
- }
+ margin-right: 10rpx;
}
}
@@ -369,30 +411,30 @@
padding: 0.18rem 0.23rem 0;
align-items: flex-start;
height: 1.43rem;
+}
- view {
- color: #000;
- }
+.Midde view {
+ color: #000;
+}
- .MiddeBack {
- width: 0.6rem;
- height: 0.24rem;
- font-size: 0.12rem;
- padding: 0;
- border-radius: 0;
- border: 1px solid #9e9e9e;
- color: #000;
- }
+.Midde .MiddeBack {
+ width: 0.6rem;
+ height: 0.24rem;
+ font-size: 0.12rem;
+ padding: 0;
+ border-radius: 0;
+ border: 1px solid #9e9e9e;
+ color: #000;
+}
- .Lists {
- li {
- width: 0.96rem;
- height: 0.3rem;
- border: 1px solid #597aa5;
- line-height: 0.3rem;
- text-align: center;
- font-size: 0.14rem;
- }
+.Midde .Lists {
+ li {
+ width: 0.96rem;
+ height: 0.3rem;
+ border: 1px solid #597aa5;
+ line-height: 0.3rem;
+ text-align: center;
+ font-size: 0.14rem;
}
}
--
Gitblit v1.9.1