Merge branch 'master' of http://172.16.20.1:3000/duanhao/SocialNetworks_duan
This commit is contained in:
qumeng039@126.com
commit
9059e08045
|
|
@ -1,6 +1,28 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
// 引入桥梁节点的图片
|
||||
import defAndyNgo from '@/assets/images/avatar/2/blue_Andy_Ngo.png'
|
||||
import ligAndyNgo from '@/assets/images/avatar/2/light_Andy_Ngo.png'
|
||||
import defEmmMac from '@/assets/images/avatar/2/blue_Emmanuel_Macron.png'
|
||||
import ligEmmMac from '@/assets/images/avatar/2/light_Emmanuel_Macron.png'
|
||||
import defIsrDefFor from '@/assets/images/avatar/2/blue_Israel_Defense_Forces.png'
|
||||
import ligIsrDefFor from '@/assets/images/avatar/2/light_Israel_Defense_Forces.png'
|
||||
import defJacHinUs from '@/assets/images/avatar/2/blue_Jackson_Hinkle_🇺🇸.png'
|
||||
import ligJacHinUs from '@/assets/images/avatar/2/light_Jackson_Hinkle_🇺🇸.png'
|
||||
import defJoeTru from '@/assets/images/avatar/2/blue_Joe_Truzman.png'
|
||||
import ligJoeTru from '@/assets/images/avatar/2/light_Joe_Truzman.png'
|
||||
import defOsiDef from '@/assets/images/avatar/2/blue_OSINTdefender.png'
|
||||
import ligOsiDef from '@/assets/images/avatar/2/light_OSINTdefender.png'
|
||||
import defPaulGol from '@/assets/images/avatar/2/blue_Paul_Golding.png'
|
||||
import ligPaulGol from '@/assets/images/avatar/2/light_Paul_Golding.png'
|
||||
import defPreBidArc from '@/assets/images/avatar/2/blue_President_Biden_Archived.png'
|
||||
import ligPreBidArc from '@/assets/images/avatar/2/light_President_Biden_Archived.png'
|
||||
import defRepMatGae from '@/assets/images/avatar/2/blue_Rep_Matt_Gaetz.png'
|
||||
import ligRepMatGae from '@/assets/images/avatar/2/light_Rep_Matt_Gaetz.png'
|
||||
import defSecAntBli from '@/assets/images/avatar/2/blue_Secretary_Antony_Blinken.png'
|
||||
import ligSecAntBli from '@/assets/images/avatar/2/light_Secretary_Antony_Blinken.png'
|
||||
|
||||
export const useKeyNodeStore2 = defineStore('keyNode2', () => {
|
||||
const allLeaderData = ref([
|
||||
{
|
||||
|
|
@ -238,16 +260,16 @@ export const useKeyNodeStore2 = defineStore('keyNode2', () => {
|
|||
|
||||
const bridgeNodes = ref([
|
||||
// 'Node'是节点编号，Number_of_across_communities是该节点链接社团数量，Community_of_affiliation是该节点所属社团编号，Community_size是该社团大小
|
||||
{postsId: 1, postsName: "President Biden Archive", 'Node': '1349149096909668363','Number_of_across_communities': 226,'Community_of_affiliation': 0, 'Community_size': 5965 },
|
||||
{postsId: 2, postsName: "Joe Truzman", 'Node': '3006348240','Number_of_across_communities': 121,'Community_of_affiliation': 13, 'Community_size': 827 },
|
||||
{postsId: 3, postsName: "OSINTdefender", 'Node': '1457867047334031360','Number_of_across_communities': 81,'Community_of_affiliation': 4, 'Community_size': 2323 },
|
||||
{postsId: 4, postsName: "Paul Golding", 'Node': '455264233','Number_of_across_communities': 80, 'Community_of_affiliation': 17, 'Community_size': 812 },
|
||||
{postsId: 5, postsName: "Rep. Matt Gaetz", 'Node': '818948638890217473','Number_of_across_communities': 97,'Community_of_affiliation': 3, 'Community_size': 3075 },
|
||||
{postsId: 6, postsName: "Israel Defense Forces", 'Node': '18576537','Number_of_across_communities': 349,'Community_of_affiliation': 6, 'Community_size': 1178 },
|
||||
{postsId: 7, postsName: "Andy Ngo", 'Node': '2835451658','Number_of_across_communities': 243,'Community_of_affiliation': 7, 'Community_size': 1170 },
|
||||
{postsId: 8, postsName: "Secretary Antony Blinken", 'Node': '1350150750966603777','Number_of_across_communities': 113,'Community_of_affiliation': 0, 'Community_size': 5965 },
|
||||
{postsId: 9, postsName: "Emmanuel Macron", 'Node': '1976143068','Number_of_across_communities': 240,'Community_of_affiliation': 5, 'Community_size': 1195 },
|
||||
{postsId: 10, postsName: "Jackson Hinkle 🇺🇸", 'Node': '1151913018936053760','Number_of_across_communities': 98,'Community_of_affiliation': 19, 'Community_size': 784 },
|
||||
{postsId: 1, defImg: defPreBidArc, activeImg: ligPreBidArc, postsName: "President Biden Archive", 'Node': '1349149096909668363','Number_of_across_communities': 226,'Community_of_affiliation': 0, 'Community_size': 5965 },
|
||||
{postsId: 2, defImg: defJoeTru, activeImg: ligJoeTru, postsName: "Joe Truzman", 'Node': '3006348240','Number_of_across_communities': 121,'Community_of_affiliation': 13, 'Community_size': 827 },
|
||||
{postsId: 3, defImg: defOsiDef, activeImg: ligOsiDef, postsName: "OSINTdefender", 'Node': '1457867047334031360','Number_of_across_communities': 81,'Community_of_affiliation': 4, 'Community_size': 2323 },
|
||||
{postsId: 4, defImg: defPaulGol, activeImg: ligPaulGol, postsName: "Paul Golding", 'Node': '455264233','Number_of_across_communities': 80, 'Community_of_affiliation': 17, 'Community_size': 812 },
|
||||
{postsId: 5, defImg: defRepMatGae, activeImg: ligRepMatGae, postsName: "Rep. Matt Gaetz", 'Node': '818948638890217473','Number_of_across_communities': 97,'Community_of_affiliation': 3, 'Community_size': 3075 },
|
||||
{postsId: 6, defImg: defIsrDefFor, activeImg: ligIsrDefFor, postsName: "Israel Defense Forces", 'Node': '18576537','Number_of_across_communities': 349,'Community_of_affiliation': 6, 'Community_size': 1178 },
|
||||
{postsId: 7, defImg: defAndyNgo, activeImg: ligAndyNgo, postsName: "Andy Ngo", 'Node': '2835451658','Number_of_across_communities': 243,'Community_of_affiliation': 7, 'Community_size': 1170 },
|
||||
{postsId: 8, defImg: defSecAntBli, activeImg: ligSecAntBli, postsName: "Secretary Antony Blinken", 'Node': '1350150750966603777','Number_of_across_communities': 113,'Community_of_affiliation': 0, 'Community_size': 5965 },
|
||||
{postsId: 9, defImg: defEmmMac, activeImg: ligEmmMac, postsName: "Emmanuel Macron", 'Node': '1976143068','Number_of_across_communities': 240,'Community_of_affiliation': 5, 'Community_size': 1195 },
|
||||
{postsId: 10, defImg: defJacHinUs, activeImg: ligJacHinUs, postsName: "Jackson Hinkle 🇺🇸", 'Node': '1151913018936053760','Number_of_across_communities': 98,'Community_of_affiliation': 19, 'Community_size': 784 },
|
||||
])
|
||||
|
||||
// 当前激活的时间点
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore2 } from "@/store/keyNodeStore2";
|
||||
import { Icon } from "@iconify/vue";
|
||||
|
||||
const store = useKeyNodeStore2();
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { onMounted, onUnmounted } from 'vue';
|
|||
import * as echarts from 'echarts';
|
||||
import bridgeData from '@/assets/json/bridge_neighbors_communities.json';
|
||||
import bridgeNodeHoverBgImg from '@/assets/images/bridge_node_hoverbgimg.png'
|
||||
import { useKeyNodeStore2 } from '@/store/keyNodeStore2'; // 引入store
|
||||
|
||||
let chartInstance = null;
|
||||
|
||||
|
|
@ -15,6 +16,7 @@ const processData = () => {
|
|||
const nodes = [];
|
||||
const links = [];
|
||||
const addedCommunities = new Set();
|
||||
const keyNodeStore2 = useKeyNodeStore2(); // 获取store实例
|
||||
|
||||
// 找出usersNum的最小值和最大值，用于归一化
|
||||
let minUsersNum = Infinity;
|
||||
|
|
@ -34,19 +36,25 @@ const processData = () => {
|
|||
// 添加桥梁节点和社团节点
|
||||
bridgeData.forEach(item => {
|
||||
const bridgeId = item.bridgeId;
|
||||
// 查找对应的桥梁节点图片
|
||||
const bridgeNodeInfo = keyNodeStore2.bridgeNodes.find(node => node.Node === bridgeId);
|
||||
const bridgeNodeImg = bridgeNodeInfo ? bridgeNodeInfo.defImg : '';
|
||||
|
||||
// 添加桥梁节点 - 可以调整这个值来改变桥梁节点大小
|
||||
nodes.push({
|
||||
id: `bridge_${bridgeId}`,
|
||||
name: `桥梁节点 ${bridgeId.substring(0, 5)}...`,
|
||||
// name: `桥梁节点 ${bridgeId.substring(0, 5)}...`,
|
||||
category: 0,
|
||||
value: 20 // 桥梁节点大小（可修改）
|
||||
value: 20, // 桥梁节点大小（可修改）
|
||||
symbol: bridgeNodeImg ? `image://${bridgeNodeImg}` : 'circle', // 使用图片或默认圆形
|
||||
symbolSize: 40 // 调整图片大小
|
||||
});
|
||||
|
||||
// 添加社团节点和边
|
||||
item.bridgeCommunities.forEach(community => {
|
||||
const communityId = community.communityId;
|
||||
const communityKey = `community_${communityId}`;
|
||||
const userNumofCommunity = community.usersNum
|
||||
const communityKey = `community_${communityId}_${userNumofCommunity}`;
|
||||
const usersNum = community.usersNum;
|
||||
|
||||
// 归一化usersNum到节点大小范围
|
||||
|
|
@ -57,9 +65,10 @@ const processData = () => {
|
|||
if (!addedCommunities.has(communityKey)) {
|
||||
nodes.push({
|
||||
id: communityKey,
|
||||
name: `社团 ${communityId} (${usersNum})`,
|
||||
// name: `社团 ${communityId} (${usersNum})`,
|
||||
category: 1,
|
||||
value: size // 根据usersNum动态设置大小
|
||||
value: size, // 根据usersNum动态设置大小
|
||||
symbolSize: size
|
||||
});
|
||||
addedCommunities.add(communityKey);
|
||||
}
|
||||
|
|
@ -113,7 +122,9 @@ const initChart = () => {
|
|||
// 判断节点类型
|
||||
if(params.data.category === 1) {
|
||||
// 社团节点
|
||||
const usersNum = params.data.name.match(/\((\d+)\)/)?.[1] || 0;
|
||||
// const usersNum = params.data.name.match(/\((\d+)\)/)?.[1] || 0;
|
||||
const parts = params.data.id.split('_');
|
||||
const extractedUserNum = parseInt(parts[parts.length - 1], 10);
|
||||
return `<div
|
||||
style = "
|
||||
width: 126px;
|
||||
|
|
@ -129,7 +140,7 @@ const initChart = () => {
|
|||
flex-direction: column;
|
||||
">
|
||||
<div style="color:#fff;letter-spacing: 0.14px;">
|
||||
社团用户数：${usersNum}
|
||||
社团用户数：${extractedUserNum}
|
||||
</div>
|
||||
</div>`;
|
||||
}else {
|
||||
|
|
@ -199,14 +210,27 @@ const initChart = () => {
|
|||
{
|
||||
name: '桥梁节点',
|
||||
itemStyle: {
|
||||
color: '#ff7300'
|
||||
// 节点颜色
|
||||
color: '#ff7300',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '社团节点',
|
||||
itemStyle: {
|
||||
color: '#1890ff'
|
||||
}
|
||||
// 节点颜色
|
||||
color: new echarts.graphic.RadialGradient(0.97, 0.38, 0.8, [
|
||||
{ offset: 0, color: "#49c3ed" }, // 最右侧
|
||||
{ offset: 0.5, color: "#5fa3e0" }, // 中间
|
||||
{ offset: 1, color: "#7286d4" } // 最左侧
|
||||
]),
|
||||
// 边框样式
|
||||
borderColor: '#2AB9FE',
|
||||
borderWidth: 1,
|
||||
borderType: 'dashed',
|
||||
borderImageSource: 'linear-gradient(90deg, #2AB9FE 12.25%, #52FFF3 100.6%)',
|
||||
borderImageSlice: 1,
|
||||
},
|
||||
symbolSize: 18
|
||||
}
|
||||
],
|
||||
roam: true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user