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 | 594 ++++++++++++++++++++++++----------------------------------
1 files changed, 245 insertions(+), 349 deletions(-)
diff --git a/src/pages/academicGenres/chart.vue b/src/pages/academicGenres/chart.vue
index c11e650..7d98e9a 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"
@@ -9,7 +11,6 @@
>
<view class="flex flex-center flex-column">
<view
- class=""
style="
font-weight: 900;
margin-bottom: 0.2rem;
@@ -30,14 +31,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="
@@ -52,7 +50,6 @@
"
>
<view
- class=""
:style="{ background: item.color }"
style="
margin-right: 0.07rem;
@@ -61,25 +58,46 @@
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="Bottom">
- <view id="main" style="width: 100vw; height: 5rem"></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 } from "@/api/index.js";
+import {
+ getIntroduction,
+ searchSchoolPerson,
+ schoolAtlas
+} from "@/api/index.js";
import * as echarts from "echarts";
export default {
data() {
return {
+ detailData: {},
+ nodeData: [],
+ links: [],
// 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
idIndex: 0,
dynasty: [
@@ -103,17 +121,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)
@@ -138,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 : "")
+ : ""
};
})
: [],
@@ -151,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 : "")
+ : ""
};
})
: [],
@@ -164,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 : "")
+ : ""
};
})
: [],
@@ -177,17 +203,97 @@
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 : "")
+ : ""
};
})
: []
};
- 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
+ });
+ 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();
+ });
+ }
},
goBack() {
this.$router.go(-1);
@@ -197,300 +303,80 @@
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: "force",
+ roam: true,
+ 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,
+ edgeSymbol: ["circle", "arrow"],
+ edgeSymbolSize: [4, 10],
+ emphasis: {
+ focus: "adjacency",
lineStyle: {
- opacity: 0.9,
- width: 2,
- curveness: 0.3
+ width: 10
}
+ },
+ 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: {
+ opacity: 0.9,
+ width: 2
+ },
+ force: {
+ // layoutAnimation: false,
+ // friction: 1,
+ repulsion: 800,
+ edgeLength: 400
}
- ]
- };
+ }
+ ]
+ };
- // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓�
- option.series[0].links = links;
- option && myChart.setOption(option);
- });
+ option && myChart.setOption(option);
}
- },
- mounted() {
- this.innt();
}
};
</script>
@@ -503,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;
}
}
@@ -525,31 +411,41 @@
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;
- }
+.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;
}
}
.school1 {
margin: 0 0.2rem;
}
+
+.contentBox {
+ flex: 1;
+ background-image: url("@/static/image/characterRelationBg.png");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+}
</style>
--
Gitblit v1.9.1