From 571e12ca122d12f20689e3040a0f368ef1ae8850 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 26 七月 2024 11:16:08 +0800 Subject: [PATCH] 1 --- src/pages/academicGenres/chart.vue | 179 +++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 124 insertions(+), 55 deletions(-) diff --git a/src/pages/academicGenres/chart.vue b/src/pages/academicGenres/chart.vue index 4e8faa4..3cc5b8c 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" @@ -11,7 +11,6 @@ > <view class="flex flex-center flex-column"> <view - class="" style=" font-weight: 900; margin-bottom: 0.2rem; @@ -51,7 +50,6 @@ " > <view - class="" :style="{ background: item.color }" style=" margin-right: 0.07rem; @@ -60,21 +58,39 @@ border-radius: 50%; " ></view> - <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{ + <view style="color: #2c2c2c; font-size: 0.12rem">{{ item.name }}</view> </view> </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() { @@ -136,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 : "") + : "" }; }) : [], @@ -149,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 : "") + : "" }; }) : [], @@ -162,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 : "") + : "" }; }) : [], @@ -175,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 : "") + : "" }; }) : [] @@ -206,34 +238,58 @@ }, 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 + 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 != "浠h〃浜虹墿" && + 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(); }); @@ -271,7 +327,8 @@ series: [ { type: "graph", - layout: "none", + layout: "force", + roam: true, symbolSize: SymbolSize + 20, //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖 roam: true, @@ -282,7 +339,12 @@ }, edgeSymbol: ["circle", "arrow"], edgeSymbolSize: [4, 10], - + emphasis: { + focus: "adjacency", + lineStyle: { + width: 10 + } + }, edgeLabel: { show: true, fontSize: FontSize, //鏇存敼涓よ�呭叧绯荤殑瀛椾綋 @@ -300,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 } } ] @@ -355,6 +421,9 @@ height: 0.24rem; font-size: 0.12rem; padding: 0; + border-radius: 0; + border: 1px solid #9e9e9e; + color: #000; } .Lists { -- Gitblit v1.9.1