From 13a727c58400a256af3f7582b62d8237b227329e Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期一, 29 四月 2024 19:05:42 +0800
Subject: [PATCH] 人物详情和地图
---
src/pages/character/detail.vue | 776 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 456 insertions(+), 320 deletions(-)
diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue
index 3fa9ea9..984d3b5 100644
--- a/src/pages/character/detail.vue
+++ b/src/pages/character/detail.vue
@@ -1,12 +1,14 @@
<template>
<view class="relative">
- <headNav :idIndex="1" text="涓尰浜虹墿鏁版嵁搴�" />
+ <headNav :idIndex="1 + ''" text="涓尰浜虹墿鏁版嵁搴�" />
<view class="Midde flex">
<el-button class="MiddeBack flex flex-center" @click="goBack"
>杩斿洖</el-button
>
<view style="width: 70%" class="flex flex-center flex-column">
- <view style="font-weight: bold; font-size: 0.2rem">鏉庢椂鐝�</view>
+ <view style="font-weight: bold; font-size: 0.2rem">{{
+ detailInfo.NAME
+ }}</view>
<ul class="flex" style="line-height: 1.2; margin: 0.15rem 0">
<li
v-for="item in 4"
@@ -32,8 +34,7 @@
letter-spacing: 0.03rem;
"
>
- 鏉庢椂鐝�(1518骞�-1593骞�)锛屽瓧:
- 涓滅挧锛屾椂浜鸿皳涔�:鏉庝笢鐠с�傚彿婵掓箹锛屾櫄骞磋嚜鍙锋繏婀栧北浜猴紝婀栧寳钖窞(浠婃箹鍖楃渷榛勫唸甯傝柂鏄ュ幙钖窞闀�)浜猴紝姹夋棌锛岀敓浜庢槑姝﹀畻姝ｅ痉鍗佷笁骞�(鍏厓1518骞�)锛屽崚浜庣瀹椾竾鍘嗕簩鍗佷簩骞�(鍏厓1593骞�)銆傛槸涓浗鏄庝唬涓庝竾瀵嗘枊榻愬悕鐨勫尰瀛﹀銆佽嵂鐗╁瀹躲�佸崥鐗╁瀹躲�佽憲杩板銆傛潕鏃剁弽瀵归亾瀹跺尰瀛︾殑缁ф壙鏄鏂归潰鐨勶紝鏇惧弬鑰冨巻浠ｆ湁鍏冲尰鑽強鍏跺鏈功绫嶅叓鐧句綑绉嶏紝缁撳悎鑷韩缁忛獙鍜岃皟鏌ョ爺绌讹紝鍘嗘椂27骞寸紪鎴愩�婃湰鑽夌翰鐩�嬩竴涔︼紝鏄垜鍥藉彜浠ｈ嵂鐗╁鐨勬�荤粨鎬у法钁楋紝鍦ㄥ浗鍐呭鍧囨湁寰堥珮鐨勮瘎浠凤紝宸叉湁鍑犵鏂囧瓧鐨勮瘧鏈垨鑺傝瘧鏈紝鍏惰憲鏈夈�婃繏婀栬剦瀛︺��
+ {{ biogData.length ? biogData[0].content : "-" }}
</view>
<view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0">
<view>
@@ -42,6 +43,7 @@
<img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button
>
</view>
+ <!-- v-if="biogData.length > 1" -->
<view
style="font-size: 0.12rem; color: #244a7b; cursor: pointer"
@click="ProfileClick"
@@ -80,7 +82,7 @@
<img
src="@/static/image/fangda.png"
@click="fangdaClick(1)"
- style="width: 0.18rem; height: 0.18rem"
+ style="width: 0.18rem; height: 0.18rem; cursor: pointer"
alt=""
/>
</div>
@@ -103,8 +105,7 @@
<img
src="@/static/image/fangda.png"
@click="fangdaClick(2)"
- style="width: 0.18rem; height: 0.18rem"
- alt=""
+ style="width: 0.18rem; height: 0.18rem; cursor: pointer"
/>
</div>
<view
@@ -127,8 +128,18 @@
class="font-family"
style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem"
>
- <li>1.銆婃槑鍙猜峰嵎浜岀櫨涔濆崄涔澛峰垪浣滃搧. p52</li>
- <li>2.銆婅繘(鏈崏绾茬洰)鐤忋�� p52</li>
+ <li
+ style="
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ "
+ v-for="(item, index) in sourceDataList"
+ :key="index"
+ :title="item"
+ >
+ {{ index + 1 }}.{{ item }}
+ </li>
</ul>
</el-card>
</div>
@@ -156,20 +167,39 @@
>
<el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="浠ｈ〃钁椾綔" data-id="1" name="representative">
- <Table1 :data="tableData" :columns="tableColumns" />
+ <Table1
+ :data="tableData1"
+ :columns="tableColumns1"
+ :height="400"
+ />
</el-tab-pane>
<el-tab-pane label="浜插睘鍏崇郴" data-id="2" name="family ">
- 浜插睘鍏崇郴
+ <Table1
+ :data="tableData2"
+ :columns="tableColumns2"
+ :height="400"
+ />
</el-tab-pane>
<el-tab-pane label="甯堟壙鍏崇郴" data-id="3" name="mentoring "
- >甯堟壙鍏崇郴</el-tab-pane
- >
- <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society"
- >绀句細鍏崇郴</el-tab-pane
- >
- <el-tab-pane label="娲诲姩骞磋氨" data-id="5" name="activity"
- >娲诲姩骞磋氨</el-tab-pane
- >
+ ><Table1
+ :data="tableData3"
+ :columns="tableColumns2"
+ :height="400"
+ /></el-tab-pane>
+ <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society">
+ <Table1
+ :data="tableData4"
+ :columns="tableColumns2"
+ :height="400"
+ />
+ </el-tab-pane>
+ <el-tab-pane label="娲诲姩骞磋氨" data-id="5" name="activity">
+ <Table1
+ :data="tableData5"
+ :columns="tableColumns3"
+ :height="400"
+ />
+ </el-tab-pane>
</el-tabs>
</el-card>
<el-card style="margin-bottom: 0.2rem">
@@ -185,10 +215,10 @@
</div>
<view class="flex">
<el-image
- v-for="item in 4"
+ v-for="item in imageList"
:key="item"
style="width: 2.05rem; height: 1.4rem"
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+ :src="item"
fit="fill"
></el-image>
</view>
@@ -241,6 +271,7 @@
<view class="ProfileNav flex flex-center"> 涓汉灏忎紶 </view>
<view style="padding: 0.44rem 0.3rem; min-height: 7.32rem">
<view
+ v-for="item in biogData"
style="
margin-bottom: 0.2rem;
background-color: #f0f0f0;
@@ -251,12 +282,12 @@
"
>
<view style="color: #2c2c2c">
- 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆�
+ {{ item.content }}
</view>
<view class="flex">
<view></view>
<view style="font-weight: 700; color: #2c2c2c"
- >鈥斺�斻�婂鍏湇鑰冦�婸 3</view
+ >鈥斺�攞{ item.pageNo }}</view
>
</view>
</view>
@@ -271,6 +302,7 @@
import { loadBMap } from "@/static/map.js";
import Table1 from "@/components/table1/table1.vue";
import {
+ getFuzzySearch,
getPersonInfo,
getSource,
getPersonImages,
@@ -279,6 +311,8 @@
getPersonRelationAtSchool,
getSpaceTime
} from "@/api/index.js";
+import { getImg } from "@/static/tool.js";
+
export default {
components: {
Table1
@@ -290,107 +324,76 @@
detailInfo: {},
sourceDataList: [],
imageList: [],
- biogData: "",
- writingsList: [],
- relationshipData: [],
+ biogData: [],
// -------
// 灏忎紶
isProfile: false,
// 鍏崇郴鍥捐氨
activeName: "representative",
// 鍩虹淇℃伅
- tableArr: [
- {
- list: [
- {
- name: "鍒悕",
- value: "鏉庝笢鐠с�佽嵂鍦ｃ�佹潕涓変竷"
- },
- {
- name: "瀛�",
- value: "涓滅挧"
- },
- {
- name: "鍙�",
- value: "棰戞箹灞变汉"
- },
- {
- name: "鎵�澶勬椂鏈�",
- value: "鏄庢湞"
- },
- {
- name: "姘戞棌",
- value: "166g"
- }
- ]
- },
- {
- list: [
- {
- name: "绫嶈疮",
- value: "榛勫窞搴滆柂宸� (浠婃箹鍖楃渷钖槬鍘�)"
- },
- {
- name: "鎬у埆",
- value: "鐢�"
- },
- {
- name: "鑱屽畼",
- value: "澶尰闄㈠垽"
- },
- {
- name: "娴佹淳",
- value: "鍖荤粡瀛︽淳"
- },
- {
- name: "瀛︽湳鐗圭偣",
- value: "鑰冨彜璇佷粖銆佺┓绌剁墿鐞�"
- }
- ]
- }
- ],
+ tableArr: [],
// 浠ｈ〃钁椾綔
- tableColumns: [
+ tableColumns1: [
{
- prop: "worksName",
- label: "浣滃搧鍚�"
+ prop: "a",
+ label: "姝ｄ功鍚�"
},
{
- prop: "works",
- label: "浣滃搧"
+ prop: "b",
+ label: "钁椾綔骞�"
},
{
- prop: "literature",
- label: "鏂囩尞鍏崇郴"
+ prop: "c",
+ label: "钁椾綔鏂瑰紡"
},
{
- prop: "epoch",
- label: "钁椾綔鏃朵唬"
- },
- {
- prop: "category",
- label: "绫诲埆"
+ prop: "d",
+ label: "鎬荤洰鍒嗙被"
}
- // { type: 'button', action: 'edit', label: 'Edit' }
],
- tableData: [
+ tableColumns2: [
{
- worksName: "鏈崏绾茬洰",
- works: "鏉庝簩鐗�",
- literature: "浣滆��",
- epoch: "鐜颁唬",
- category: "涓尰瀛�",
- id: 1
+ prop: "a",
+ label: "鍏崇郴浜�"
},
{
- worksName: "鏈崏绾茬洰",
- works: "鏉庝簩鐗�",
- literature: "浣滆��",
- epoch: "鐜颁唬",
- category: "涓尰瀛�",
- id: 1
+ prop: "b",
+ label: "鍏崇郴绫诲瀷"
+ },
+ {
+ prop: "c",
+ label: "鑰冩嵁"
+ },
+ {
+ prop: "d",
+ label: "鍑哄"
}
- ]
+ ],
+ tableColumns3: [
+ {
+ prop: "a",
+ label: "娲诲姩鏃堕棿鍖洪棿"
+ },
+ {
+ prop: "b",
+ label: "娲诲姩鍚嶇О"
+ },
+ {
+ prop: "c",
+ label: "娲诲姩鍦扮偣"
+ },
+ {
+ prop: "d",
+ label: "娲诲姩鎻忚堪"
+ }
+ ],
+ tableData1: [],
+ tableData2: [],
+ tableData3: [],
+ tableData4: [],
+ tableData5: [],
+ nodes: [],
+ relationships: []
};
},
onLoad(options) {
@@ -398,25 +401,20 @@
},
mounted() {
// 鑾峰彇浜虹墿璇︽儏
- // this.getData();
+ this.getData();
// 鑾峰彇鏉ユ簮
- // this.getSourceData();
+ this.getSourceData();
// 鑾峰彇鐩稿叧鍥捐〃
- // this.getImages();
+ this.getImages();
// 鑾峰彇涓汉浜嬭抗
- // this.getBiog();
+ this.getBiog();
// 鑾峰彇钁椾綔
- // this.getWritings();
+ this.getWritings();
// 鑾峰彇浜虹墿鍏崇郴
- // this.getRelationship();
+ this.getRelationship();
// 鑾峰彇鏃剁┖鍦板浘
- // this.getMapInfo();
- // 鍏崇郴鍥捐氨
- this.relation();
- // 鏃剁┖鍦板浘
- loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => {
- this.spaceTime();
- });
+ this.getMapInfo();
+
this.$nextTick(() => {
// 鑾峰彇绗竴涓�夐」鍗＄殑 DOM 鍏冪礌
const firstTab = this.$refs.tabs.$el.querySelector(
@@ -430,58 +428,200 @@
},
methods: {
getData() {
+ // 鍩烘湰淇℃伅
getPersonInfo({
- id: this.detailId
+ id: this.detailId,
+ type: "PERSON_BASIC"
}).then((res) => {
- console.log(res);
- this.detailInfo = res;
+ const obj = {};
+ if (
+ res.object &&
+ res.object.personFieldList &&
+ res.object.personFieldList.length
+ ) {
+ for (let i = 0; i < res.object.personFieldList.length; i++) {
+ const fieldItem = res.object.personFieldList[i];
+ obj[fieldItem.fieldName] = fieldItem.content2
+ ? fieldItem.content2
+ : fieldItem.content1;
+ }
+ }
+ console.log(obj);
+ this.tableArr = [
+ {
+ list: [
+ {
+ name: "鍒悕",
+ value: obj.WEAK_NAME || "-"
+ },
+ {
+ name: "瀛�",
+ value: obj.ALIAS || "-"
+ },
+ {
+ name: "鍙�",
+ value: obj.ALIAS || "-"
+ },
+ {
+ name: "鎵�澶勬椂鏈�",
+ value: obj.PERIOD || "-"
+ },
+ {
+ name: "姘戞棌",
+ value: obj.ETHNIC || "-"
+ }
+ ]
+ },
+ {
+ list: [
+ {
+ name: "绫嶈疮",
+ value: obj.NATIVE_PLACE || "-"
+ },
+ {
+ name: "鎬у埆",
+ value: obj.GENDER
+ ? obj.GENDER == "UNKNOWN"
+ ? "鏈煡"
+ : "-"
+ : "-"
+ },
+ {
+ name: "鑱屽畼",
+ value: obj.MEDICAL_BRANCH || "-"
+ },
+ {
+ name: "娴佹淳",
+ value: obj.MEDICAL_BRANCH || "-"
+ },
+ {
+ name: "瀛︽湳鐗圭偣",
+ value: obj.MEDICAL_EXPERTISE || "-"
+ }
+ ]
+ }
+ ];
+ this.detailInfo = obj;
+ // 鍏崇郴鍥捐氨
+ this.getMappingData(this.detailInfo.NAME);
+ });
+ // 娲诲姩骞磋氨
+ getPersonInfo({
+ id: this.detailId,
+ type: "PERSON_SPACE_TIME"
+ }).then((res) => {
+ this.tableData5 = res.object.personSpaceTimeList.map((item) => {
+ return {
+ a: item.time,
+ b: item.activityName,
+ c: item.activityAddrOld,
+ d: "-" // 杩欓噷缂哄皯娲诲姩鎻忚堪瀛楁
+ };
+ });
});
},
getSourceData() {
getSource({
personId: this.detailId
}).then((res) => {
- console.log(res);
- this.sourceDataList = res;
+ this.sourceDataList = res.list;
});
},
getImages() {
getPersonImages({
personId: this.detailId
}).then((res) => {
- console.log(res);
- this.imageList = res;
+ this.imageList = res.list.map((item) => getImg(item.filePath));
});
},
getBiog() {
getPersonBiog({
personId: this.detailId
}).then((res) => {
- console.log(res);
- this.biogData = res;
+ this.biogData = res.list.map((item) => {
+ return {
+ content: item.content1,
+ pageNo: "銆�" + item.pageNo + "銆� " + "P " + item.pageNo // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚�
+ };
+ });
});
},
getWritings() {
getPersonWritings({
personId: this.detailId
}).then((res) => {
- console.log(res);
- this.writingsList = res;
+ this.tableData1 = res.list.map((item) => {
+ return {
+ a: item.name,
+ b: item.dynasty,
+ c: item.writeWay,
+ d: item.classify
+ };
+ });
});
},
getRelationship() {
getPersonRelationAtSchool({
personId: this.detailId
+ // relationSearchTypeEO: "SOCIAL"
}).then((res) => {
- console.log(res);
- this.relationshipData = res;
+ console.log(res, "getPersonRelationAtSchool");
+ // 杩欓噷鎺ュ彛鏈夐棶棰�
+ });
+ },
+ getMappingData(name) {
+ getFuzzySearch({
+ keyword: name
+ }).then((res) => {
+ this.nodes = [];
+ this.relationships = [];
+ if (res.success && res.list) {
+ res.list.forEach((item, index) => {
+ let exists1 = this.nodes.some(
+ (node) => node.id === item.identifier1 && node.name === item.name1
+ );
+ let exists2 = this.nodes.some(
+ (node) => node.id === item.identifier2 && node.name === item.name2
+ );
+ // 璇佹槑涓嶅瓨鍦�
+ if (exists1 !== true) {
+ this.nodes.push({
+ name: item.name1,
+ id: item.identifier1
+ });
+ }
+ if (exists2 !== true) {
+ this.nodes.push({
+ name: item.name2,
+ id: item.identifier2
+ });
+ }
+ let obj = {
+ source: item.name1,
+ target: item.name2,
+ relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓�
+ };
+ this.relationships.push(obj);
+ });
+ }
+ this.relation();
});
},
getMapInfo() {
getSpaceTime({
personId: this.detailId
}).then((res) => {
- console.log(res);
+ console.log(res,'getSpaceTime');
+ const data = res.list.map(item=>{
+ return {
+ name: item.activityName,
+ value: [item.xcoord,item.ycoord]
+ }
+ })
+ // 鏃剁┖鍦板浘
+ loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
+ this.spaceTime(data);
+ });
});
},
@@ -489,7 +629,7 @@
fangdaClick(index) {
if (index == 1) {
uni.navigateTo({
- url: "/pages/character/index"
+ url: "/pages/character/index?keyword=" + this.detailInfo.NAME
});
} else if (index == 2) {
uni.navigateTo({
@@ -540,79 +680,94 @@
relation() {
var chartDom = document.getElementById("relation");
var myChart = echarts.init(chartDom);
-
// 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁
- var nodes = ["鏉庢椂鐝�", "鎴愬氨", "浼犳壙", "浜插弸", "钁椾綔"];
- var relationships = [
- {
- source: "鏉庢椂鐝�",
- target: "鎴愬氨"
- },
- {
- source: "鏉庢椂鐝�",
- target: "浼犳壙"
- },
- {
- source: "鏉庢椂鐝�",
- target: "浜插弸"
- },
- {
- source: "鏉庢椂鐝�",
- target: "钁椾綔"
- }
- // 鍏朵粬鍏崇郴...
- ];
+ var nodes = this.nodes;
+ var relationships = this.relationships;
- // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾�
- var links = [];
- relationships.forEach(function (relationship) {
- var sourceIndex = nodes.indexOf(relationship.source);
- var targetIndex = nodes.indexOf(relationship.target);
- if (sourceIndex !== -1 && targetIndex !== -1) {
- links.push({
- source: sourceIndex,
- target: targetIndex
- });
- }
- });
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((relationship, i) => {
+ var sourceIndex = nodes.findIndex(
+ (node) => node.name === relationship.source
+ );
+ var targetIndex = nodes.findIndex(
+ (node) => node.name === relationship.target
+ );
+ if (relationship.relation) {
+ if (sourceIndex !== -1 && targetIndex !== -1) {
+ links.push({
+ source: sourceIndex,
+ target: targetIndex,
+ label: {
+ show: true,
+ formatter: function (params) {
+ return relationship.relation;
+ }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent"
+ color: "#2C2C2C",
+ fontSize: FontSize - 2,
+ backgroundColor: "rgba(255, 255, 255, 1)",
+ padding: [3, 8],
+ borderRadius: 30,
+ position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
+ // bottom: -(FontSize+10),
+ z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
+ distance: -(Distance + 1) // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+ }
+ });
+ }
+ }
+ });
// 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹�
var nodeData = nodes.map(function (node, index) {
return {
- name: node,
- x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
+ name: node.name,
+ id: node.id,
+ x: Math.random() * 2000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
itemStyle: {
- color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
+ color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
borderWidth: BorderWidth,
- borderColor: getColorByIndex(index + 1)
+ borderColor: "#996f9f"
}
};
});
- // 璁剧疆棰滆壊
- function getColorByIndex(index) {
- var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍
- return colors[index % colors.length];
- }
-
var option;
option = {
+ title: {
+ left: "center",
+ top: FontSize + 10,
+ subtextStyle: {
+ fontSize: FontSize, // 璁剧疆鍓爣棰樻枃瀛楀ぇ灏忎负 14px
+ color: "#2C2C2C"
+ }
+ },
+ backgroundColor: {
+ type: "image",
+ image: "/static/image/characterRelationBg.png",
+ size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱�
+ position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮
+ },
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: "quinticInOut",
@@ -620,6 +775,7 @@
{
type: "graph",
layout: "none",
+ roam: true,
symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
label: {
show: true,
@@ -628,144 +784,74 @@
},
edgeSymbol: ["circle"],
edgeSymbolSize: [4, 10],
- edgeLabel: {
- fontSize: 40
- },
data: nodeData,
- links: [
- {
- source: 0,
- target: 1,
- symbolSize: [5, 20]
- },
- {
- source: "Node 2",
- target: "Node 1"
- },
- {
- source: "Node 1",
- target: "Node 3"
- },
- {
- source: "Node 2",
- target: "Node 3"
- },
- {
- source: "Node 2",
- target: "Node 4"
- },
- {
- source: "Node 1",
- target: "Node 4"
- }
- ],
+ links: links,
lineStyle: {
opacity: 0.9,
width: 2,
- curveness: 0
+ curveness: 0.3
+ },
+ emphasis: {
+ focus: "adjacency",
+ lineStyle: {
+ width: 10
+ }
}
}
]
};
-
// 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓�
option.series[0].links = links;
+ // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
+ myChart.on("click", (params) => {
+ // menuNav2 = !menuNav1
+ if (params.componentType === "series") {
+ this.spaceTimeArr(params.data.id);
+ }
+ });
option && myChart.setOption(option);
},
// 鏃剁┖鍦板浘
- spaceTime() {
+ spaceTime(data) {
var chartDom = document.getElementById("spaceTime");
var myChart = echarts.init(chartDom);
var option;
- const data = [
- {
- name: "娴烽棬",
- value: 9
- },
- {
- name: "閲戞槍",
- value: 19
- },
- {
- name: "娉夊窞",
- value: 21
- },
- {
- name: "琛㈠窞",
- value: 177
- },
- {
- name: "寤婂潑",
- value: 193
- },
- {
- name: "鑿忔辰",
- value: 194
- },
- {
- name: "鍚堣偉",
- value: 229
- },
- {
- name: "姝︽眽",
- value: 273
- },
- {
- name: "澶у簡",
- value: 279
- }
- ];
- const geoCoordMap = {
- 娴烽棬: [121.15, 31.89],
- 閯傚皵澶氭柉: [109.781327, 39.608266],
- 鎷涜繙: [120.38, 37.35],
- 骞抽《灞�: [113.29, 33.75],
- 閭㈠彴: [114.48, 37.05],
- 寰峰窞: [116.29, 37.45],
- 娴庡畞: [116.59, 35.38],
- 鑽嗗窞: [112.239741, 30.335165],
- 瀹滄槍: [111.3, 30.7],
- 涔変箤: [120.06, 29.32],
- 涓芥按: [119.92, 28.45],
- 娲涢槼: [112.44, 34.7],
- 绉︾殗宀�: [119.57, 39.95],
- 鏍床: [113.16, 27.83],
- 鐭冲搴�: [114.48, 38.03],
- 鑾辫姕: [117.67, 36.19],
- 甯稿痉: [111.69, 29.05],
- 淇濆畾: [115.48, 38.85],
- 婀樻江: [112.91, 27.87],
- 閲戝崕: [119.64, 29.12],
- 宀抽槼: [113.09, 29.37],
- 闀挎矙: [113, 28.21],
- 琛㈠窞: [118.88, 28.97],
- 寤婂潑: [116.7, 39.53],
- 鑿忔辰: [115.480656, 35.23375],
- 鍚堣偉: [117.27, 31.86],
- 姝︽眽: [114.31, 30.52],
- 澶у簡: [125.03, 46.58]
- };
- const convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value)
- });
- }
- }
- return res;
- };
+ // const data = [
+ // {
+ // name: "娴烽棬",
+ // value: [121.15, 31.89]
+ // },
+ // {
+ // name: "閯傚皵澶氭柉",
+ // value: [109.781327, 39.608266]
+ // },
+ // {
+ // name: "鎷涜繙",
+ // value: [120.38, 37.35]
+ // },
+ // {
+ // name: "鑸熷北",
+ // value: [122.207216, 29.985295]
+ // },
+ // {
+ // name: "榻愰綈鍝堝皵",
+ // value: [123.97, 47.33]
+ // }
+ // ];
option = {
+ title: {
+ text: "",
+ subtext: "",
+ sublink: "",
+ left: "center"
+ },
tooltip: {
trigger: "item"
},
bmap: {
- center: [104.114129, 37.550339],
- zoom: 1,
+ center: data[0].value,
+ zoom: 8,
roam: true,
mapStyle: {
styleJson: [
@@ -773,28 +859,91 @@
featureType: "water",
elementType: "all",
stylers: {
- color: "#d1d1d1"
+ color: "#86a1ac"
}
},
{
featureType: "land",
elementType: "all",
stylers: {
- color: "#f3f3f3"
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "railway",
+ elementType: "all",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "highway",
+ elementType: "all",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "highway",
+ elementType: "labels",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "arterial",
+ elementType: "geometry",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "arterial",
+ elementType: "geometry.fill",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "poi",
+ elementType: "all",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "green",
+ elementType: "all",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "subway",
+ elementType: "all",
+ stylers: {
+ visibility: "off"
}
},
{
featureType: "manmade",
elementType: "all",
stylers: {
- color: "#d1d1d1"
+ color: "#f1d99d"
}
},
{
featureType: "local",
elementType: "all",
stylers: {
- color: "#d1d1d1"
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "local",
+ elementType: "labels",
+ stylers: {
+ visibility: "off"
}
},
{
@@ -808,21 +957,21 @@
featureType: "boundary",
elementType: "all",
stylers: {
- color: "#fefefe"
+ color: "#f1d99d"
}
},
{
featureType: "building",
elementType: "all",
stylers: {
- color: "#d1d1d1"
+ color: "#f1d99d"
}
},
{
featureType: "label",
elementType: "labels.text.fill",
stylers: {
- color: "#999999"
+ color: "#000"
}
}
]
@@ -830,18 +979,13 @@
},
series: [
{
- name: "pm2.5",
+ name: "",
type: "scatter",
coordinateSystem: "bmap",
- data: convertData(data),
- symbolSize: function (val) {
- return val[2] / 10;
- },
+ data: data,
+ symbolSize: 0,
encode: {
value: 2
- },
- credits: {
- enabled: false
},
label: {
formatter: "{b}",
@@ -855,19 +999,11 @@
}
},
{
- name: "Top 5",
+ name: "",
type: "effectScatter",
coordinateSystem: "bmap",
- data: convertData(
- data
- .sort(function (a, b) {
- return b.value - a.value;
- })
- .slice(0, 6)
- ),
- symbolSize: function (val) {
- return val[2] / 10;
- },
+ data: data,
+ symbolSize: 20,
encode: {
value: 2
},
@@ -878,20 +1014,20 @@
label: {
formatter: "{b}",
position: "right",
- show: true
+ show: false
},
itemStyle: {
+ color: "#ec7b43",
shadowBlur: 10,
shadowColor: "#333"
},
emphasis: {
- scale: true
+ scale: false
},
zlevel: 1
}
]
};
-
option && myChart.setOption(option);
}
}
--
Gitblit v1.9.1