From a2855e092413f3f29d4e56a2312ae963a66ab680 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期六, 11 五月 2024 21:01:57 +0800
Subject: [PATCH] 引用
---
src/pages/inherit/list.vue | 1047 ++++++++++++++++++++++-----------------------------------
1 files changed, 409 insertions(+), 638 deletions(-)
diff --git a/src/pages/inherit/list.vue b/src/pages/inherit/list.vue
index b91593e..3d759f3 100644
--- a/src/pages/inherit/list.vue
+++ b/src/pages/inherit/list.vue
@@ -1,647 +1,418 @@
<template>
- <view class="">
- <headNav :idIndex="idIndex" :searchBg="false" text="涓尰涓栧尰浼犳壙鏁版嵁搴�" bg="/static/image/topBg1.png"
- bg1="/static/image/line1.png" />
+ <view>
+ <headNav
+ idIndex="2"
+ :searchBg="false"
+ text="涓尰涓栧尰浼犳壙鏁版嵁搴�"
+ bg="/static/image/topBg1.png"
+ bg1="/static/image/line1.png"
+ />
- <view class="flex" style="padding: .24rem 1.21rem ;background-color: #f0f0f0;">
- <view class="flex">
- <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button>
- <h3 style="margin-left: .22rem;font-size: .28erm;font-weight: 500;">閭电櫥鐎�</h3>
- </view>
- <ul class="flex Lists">
- <li style="background-color: #DA7A2B;color: #fff;">涓栧尰浼犳壙</li>
- <!-- /pages/AcademicHistory/AcademicHistory -->
- <li @click="ListClick" style="background-color: #fff;color: #DA7A2B;" >涓栧尰鏂囧寲</li>
- </ul>
- <view class="" style="width: 1rem;"></view>
- </view>
- <!-- echarts鍥� -->
- <div class="barChart" ref="barChart"></div>
- </view>
+ <view
+ class="flex"
+ style="padding: 0.24rem 1.21rem; background-color: #f0f0f0"
+ >
+ <view class="flex">
+ <el-button class="MiddeBack flex flex-center" @click="goBack"
+ >杩斿洖</el-button
+ >
+ <h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500">
+ {{ mainName }}
+ </h3>
+ </view>
+ <ul class="flex tabBox">
+ <li
+ :class="['tabItem', showType == 1 ? 'active' : ''].join(' ')"
+ @click="changeType(1)"
+ >
+ 涓栧尰浼犳壙
+ </li>
+ <li
+ :class="['tabItem', showType == 2 ? 'active' : ''].join(' ')"
+ @click="changeType(2)"
+ >
+ 涓栧尰鏂囧寲
+ </li>
+ </ul>
+ <view style="width: 1rem"></view>
+ </view>
+ <view v-if="showType == 1" class="legendBox">
+ <view class="socialMappingBox" @click="showSocialMapping">
+ <view
+ class="icon"
+ :style="{ background: socialMapping ? '#244a7b' : '#9e9e9e' }"
+ ></view>
+ <view>绀句細鍏崇郴锛歿{ socialMapping ? "寮�" : "鍏�" }}</view>
+ </view>
+ <view class="legend">
+ <view class="icon" style="background: #da7a2b"></view>
+ <view>涓栧尰浼犳壙</view>
+ </view>
+ <view class="legend">
+ <view class="icon" style="background: #244a7b"></view>
+ <view>绀句細鍏崇郴</view>
+ </view>
+ </view>
+ <!-- echarts鍥� -->
+ <div v-if="showType == 1" class="barChart" id="barChart"></div>
+ <view v-if="showType == 2" class="cultureBox">
+ <view class="cultureItem">
+ <view class="imgBox">
+ <img src="@/static/image/inherit/icon1.png" alt="" />
+ </view>
+ <p>
+ 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆�
+ </p>
+ <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4>
+ </view>
+ <view class="cultureItem">
+ <view class="imgBox">
+ <img src="@/static/image/inherit/icon2.png" alt="" />
+ </view>
+ <p>鐎曟箹涓栧剴锛屽吋浠ラ啱槌达紝涓�闁�鐖跺瓙鍏勫紵瀵屾湁钁楄堪锛屾鐗硅涓�鏂戣�炽��</p>
+ <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4>
+ </view>
+ <view class="cultureItem">
+ <view class="imgBox">
+ <img src="@/static/image/inherit/icon3.png" alt="" />
+ </view>
+ <p>
+ 鐥呭潑鍒荤�曟箹銆婃湰鑽夈�嬩箣鍥犱粛瑷涜锛岀埌閲嶇埐閸ユ澘銆傜稉濮嬫柤鐧告湭鍏湀锛岃縿涔欓厜浜旀湀锛岄柋浜屾锛岀硿宸ユ暩钀紝涔冨厠钁充簨銆傚叾鏍＄悊瑷涜锛岀洠鐫ｅ墳鍔傦紝鍛藉厭瀛愬腑鐝嶃�佸＋鐟溿�佸＋鐝╁垎浠讳箣锛涘晢姒锋柟鍔戯紝鍗�鍒ュ搧褰欙紝閱＋鐜嬪悰閺″爞涔嬪姏鐖插锛涘弮浠ラ嵕鍚涘彈鐧斤紱鑰岀稉绱�鍏朵簨锛屽绲備笉鎳堣�咃紝鍓囪寖鍚涢潨瀛樹篃銆傛澶栧鐢板悰鎾扮暟銆佹浌鍚涙櫞宄�佺唺鍚涗徊灞便�佺縼鍚涢惖姊呫�侀花鍚涘辜闆层�佸嫉鍚涜搏涔嬨�佺▼鍚涢仈涓夈�侀櫝鍚涙尟閬犮�佽ū鍚涘姛鐢�佹湵鍚涜椈鑷ｃ�佹垨鍙冩牎璁愶紝鎴栧徃缍滄牳锛屾垨鑱峰湒绻紝璎瑰倷鏇镐箣
+ </p>
+ <h4>鈥斺�斻�婂鍏湇鑰冦�婸 3</h4>
+ </view>
+ </view>
+ </view>
</template>
<script>
- import * as echarts from "echarts";
- export default {
- data() {
- return {
- // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
- idIndex: 0,
- activeIndex: 1
- }
- },
- onLoad(options) {
- this.idIndex = options.id
- console.log('optionsoptionsoptions', options.id);
- },
- mounted() {
- // 鍒濆鍖� echarts
- this.initBarChart();
- },
- methods: {
- initBarChart() {
- // WMBg
- //閫氳繃 $ref 杩涜鎸傝浇
- let myChart = echarts.init(this.$refs.barChart);
+import * as echarts from "echarts";
+import {
+ inheritMedicalCultureList,
+ inheritMedicalRelationList
+} from "@/api/index.js";
- 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
- }
+export default {
+ data() {
+ return {
+ // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ idIndex: 0,
+ mainName: "",
+ activeIndex: 1,
+ dataList: [],
+ links: [],
+ socialMapping: true,
+ showType: "1"
+ };
+ },
+ onLoad(options) {
+ this.idIndex = options.id;
+ this.mainName = decodeURIComponent(options.name);
+ this.type = options.type;
+ },
+ mounted() {
+ if (this.type) {
+ this.changeType(this.type);
+ }
+ 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 == this.idIndex
+ ? linkItem.startId
+ : linkItem.endId)
+ );
+ if (linkItem.relationType == "浜插睘鍏崇郴") {
+ data.nodeList[index].linkType = 1;
+ data.nodeList[index].color = "#F8E2D7";
+ data.nodeList[index].borderColor = "#F3AA78";
+ }
+ if (linkItem.relationType == "绀句細鍏崇郴") {
+ data.nodeList[index].linkType = 2;
+ data.nodeList[index].color = "#ecf4fe";
+ data.nodeList[index].borderColor = "#597aa5";
+ }
+ this.links.push({
+ source: data.nodeList.find(
+ (item) => item.identifier == linkItem.startId
+ ).name,
+ target: data.nodeList.find(
+ (item) => item.identifier == linkItem.endId
+ ).name,
+ relationType: linkItem.relationType,
+ label: {
+ show: true,
+ formatter: function (params) {
+ // 浣跨敤鍑芥暟鍔ㄦ�佺敓鎴愭爣绛惧唴瀹�
+ // return relationships.find(rel => rel.source === nodes[params.data
+ // .source] && rel.target === nodes[params.data.target])
+ // .relation;
+ return linkItem.relation;
+ }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent"
+ color: "#2C2C2C",
+ fontSize: 16,
+ backgroundColor: "rgba(255, 255, 255, 1)",
+ padding: [3, 8],
+ borderRadius: 30,
+ position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
+ // z: -1, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
+ distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+ }
+ });
+ }
+ 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);
+ console.log(this.links);
+ this.initBarChart(this.dataList, this.links);
+ });
- let option = {
- title: {
- text: [""],
- },
- backgroundColor: {
- type: 'image',
- image: '/static/image/WMBg.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 + 20,
- //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
- roam: false,
- label: {
- show: true,
- color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
- fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
- },
- edgeSymbol: ["circle", "arrow"],
- edgeSymbolSize: [4, 10],
+ // 涓栧尰鏂囧寲
+ inheritMedicalCultureList({
+ identifier: this.idIndex
+ }).then((res) => {
+ console.log(res, "res");
+ });
+ },
+ showSocialMapping() {
+ this.socialMapping = !this.socialMapping;
+ let newDataList = [];
+ let newLinks = [];
+ if (this.socialMapping) {
+ newDataList = [...this.dataList];
+ newLinks = [...this.links];
+ } else {
+ newDataList = this.dataList.filter((item) => item.color !== "#ecf4fe");
+ newLinks = [...this.links];
+ }
+ this.initBarChart(newDataList, newLinks);
+ },
+ changeType(type) {
+ this.showType = type;
+ if (type == 1) {
+ setTimeout(() => {
+ this.socialMapping = true;
+ this.initBarChart(this.dataList, this.links);
+ }, 50);
+ }
+ },
+ initBarChart(dataList, links) {
+ // WMBg
+ //閫氳繃 $ref 杩涜鎸傝浇
+ var barChart = document.getElementById("barChart");
+ let myChart = echarts.init(barChart);
- 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: [{
- 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",
- },
- },
- ],
- lineStyle: {
- color: "#000000",
- opacity: 0.9,
- width: 2,
- curveness: 0,
- },
- }, ],
- };
- //杩涜娓叉煋
- myChart.setOption(option);
- },
- // 杩斿洖鎸夐挳
- goBack() {
- // uuni.redirectTo();
- uni.redirectTo({
- url: '/pages/index/index'
- })
- },
- }
- }
+ 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;
+ }
+
+ let option = {
+ backgroundColor: {
+ type: "image",
+ image: "./static/image/WMBg.png",
+ repeat: "repeat-x", // 鏄惁骞抽摵锛屽彲浠ユ槸 'repeat-x', 'repeat-y', 'no-repeat'
+ size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱�
+ position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
+ },
+ tooltip: {},
+ animationEasingUpdate: "quinticInOut",
+ series: [
+ {
+ type: "graph",
+ layout: "force",
+ symbolSize: SymbolSize + 20,
+ //鏄惁鍏佽鐢ㄦ埛鎷栧姩鍥剧墖
+ roam: true,
+ label: {
+ show: true,
+ color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
+ fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
+ },
+ edgeSymbol: ["circle", "arrow"],
+ edgeSymbolSize: [4, 10],
+ data: dataList,
+ links: links,
+ lineStyle: {
+ opacity: 0.9,
+ width: 2,
+ curveness: 0.3
+ },
+ emphasis: {
+ focus: "adjacency",
+ lineStyle: {
+ width: 10
+ }
+ },
+ force: {
+ initLayout: null,
+ // gravity: 0
+ repulsion: 600,
+ edgeLength: 400
+ }
+ }
+ ]
+ };
+ //杩涜娓叉煋
+ myChart.setOption(option);
+ },
+ // 杩斿洖鎸夐挳
+ goBack() {
+ this.$router.go(-1);
+ }
+ }
+};
</script>
<style scoped>
- .Lists {
- li {
- /* background-color: #e4ebf3;
- border: 1rpx solid #5778a2;
- padding: 5rpx 10rpx;
- font-size: 18rpx; */
- width: 0.96rem;
- height: .3rem;
- border: 1px solid #DA7A2B;
- line-height: .3rem;
- text-align: center;
- font-size: .14rem;
- }
- }
- .MiddeBack {
- width: 0.6rem;
- height: 0.24rem;
- font-size: .12rem;
- padding: 0;
-
- }
- .barChart {
- width: 100vw;
- height: 80vh;
- }
-</style>
\ No newline at end of file
+.tabBox .tabItem {
+ width: 0.96rem;
+ height: 0.3rem;
+ border: 1px solid #da7a2b;
+ line-height: 0.3rem;
+ text-align: center;
+ font-size: 0.14rem;
+ background-color: #fff;
+ color: #da7a2b;
+ cursor: pointer;
+}
+
+.tabBox .tabItem.active {
+ background-color: #da7a2b;
+ color: #fff;
+}
+
+.MiddeBack {
+ width: 0.6rem;
+ height: 0.24rem;
+ font-size: 0.12rem;
+ padding: 0;
+}
+.barChart {
+ width: 100vw;
+ height: 80vh;
+}
+
+/* 鍥句緥 */
+.legendBox {
+ width: 100%;
+ height: 0.6rem;
+ position: relative;
+ padding-top: 0.1rem;
+ display: flex;
+ justify-content: center;
+}
+.socialMappingBox {
+ position: absolute;
+ left: 1.2rem;
+ display: flex;
+ align-items: center;
+ padding: 0.06rem 0.2rem;
+ background: #fff;
+ box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.5);
+ border-radius: 90px;
+ cursor: pointer;
+}
+
+.socialMappingBox .icon {
+ width: 0.12rem;
+ height: 0.12rem;
+ border-radius: 50%;
+ margin-right: 0.06rem;
+}
+
+.legend {
+ display: flex;
+ align-items: center;
+ margin: 0 0.1rem;
+}
+
+.legend .icon {
+ width: 0.12rem;
+ height: 0.12rem;
+ border-radius: 50%;
+ margin-right: 0.06rem;
+}
+
+.cultureBox {
+ width: 100%;
+ height: 80vh;
+ background: url("@/static/image/WMBg.png");
+ background-size: 100% 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.cultureItem {
+ width: 6.6rem;
+ margin-top: 0.4rem;
+ background: #fff;
+ border: 2px solid #d8d8d8;
+ display: flex;
+ position: relative;
+ padding: 0.16rem 0.16rem 0.4rem;
+}
+
+.cultureItem .imgBox {
+ width: 0.8rem;
+ margin-right: 0.4rem;
+}
+
+.cultureItem img {
+ width: 100%;
+ height: auto;
+}
+
+.cultureItem p {
+ flex: 1;
+ overflow: hidden;
+ line-height: 1.5;
+ font-size: 0.14rem;
+}
+
+.cultureItem h4 {
+ position: absolute;
+ bottom: 0.16rem;
+ right: 0.12rem;
+}
+</style>
--
Gitblit v1.9.1