From d5f572496c5fb12fec2fe346b847bf58331299c9 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 17 七月 2024 15:56:51 +0800
Subject: [PATCH] 1
---
src/pages/academicGenres/chart.vue | 171 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 120 insertions(+), 51 deletions(-)
diff --git a/src/pages/academicGenres/chart.vue b/src/pages/academicGenres/chart.vue
index 5136fb3..afae207 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,14 +65,32 @@
</li>
</ul>
</view>
- <view class="contentBox">
- <view id="main" style="width: 100%; height: 100%"></view>
+ <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>
</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() {
@@ -134,11 +152,15 @@
return {
content: item.content,
source:
- "鍑哄锛氥��" +
+ res.object.bookList &&
res.object.bookList.find((citem) => citem.id == item.bookId)
- .name +
- "銆� P" +
- item.pageNo
+ ? "鍑哄锛氥��" +
+ res.object.bookList.find(
+ (citem) => citem.id == item.bookId
+ ).name +
+ "銆� " +
+ (item.pageNo ? "P " + item.pageNo : "")
+ : ""
};
})
: [],
@@ -147,11 +169,15 @@
return {
content: item.content,
source:
- "鍑哄锛氥��" +
+ res.object.bookList &&
res.object.bookList.find((citem) => citem.id == item.bookId)
- .name +
- "銆� P" +
- item.pageNo
+ ? "鍑哄锛氥��" +
+ res.object.bookList.find(
+ (citem) => citem.id == item.bookId
+ ).name +
+ "銆� " +
+ (item.pageNo ? "P " + item.pageNo : "")
+ : ""
};
})
: [],
@@ -160,11 +186,15 @@
return {
content: item.content,
source:
- "鍑哄锛氥��" +
+ res.object.bookList &&
res.object.bookList.find((citem) => citem.id == item.bookId)
- .name +
- "銆� P" +
- item.pageNo
+ ? "鍑哄锛氥��" +
+ res.object.bookList.find(
+ (citem) => citem.id == item.bookId
+ ).name +
+ "銆� " +
+ (item.pageNo ? "P " + item.pageNo : "")
+ : ""
};
})
: [],
@@ -173,11 +203,15 @@
return {
content: item.content,
source:
- "鍑哄锛氥��" +
+ res.object.bookList &&
res.object.bookList.find((citem) => citem.id == item.bookId)
- .name +
- "銆� P" +
- item.pageNo
+ ? "鍑哄锛氥��" +
+ res.object.bookList.find(
+ (citem) => citem.id == item.bookId
+ ).name +
+ "銆� " +
+ (item.pageNo ? "P " + item.pageNo : "")
+ : ""
};
})
: []
@@ -204,33 +238,58 @@
},
symbolSize: 100
});
- searchSchoolPerson({
- keyword: item
- }).then((res) => {
- 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
+ schoolAtlas(Number(this.idIndex)).then((res) => {
+ if (res.list) {
+ for (let i = 0; i < res.list.length; i++) {
+ const citem = res.list[i];
+ 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();
});
@@ -268,7 +327,8 @@
series: [
{
type: "graph",
- layout: "none",
+ layout: "force",
+ roam: true,
symbolSize: SymbolSize + 20,
//鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
roam: true,
@@ -279,7 +339,12 @@
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
-
+ emphasis: {
+ focus: "adjacency",
+ lineStyle: {
+ width: 10
+ }
+ },
edgeLabel: {
show: true,
fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋
@@ -297,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
}
}
]
--
Gitblit v1.9.1