{{ item.name }}:
@@ -28,7 +28,6 @@
import { defineProps, ref, defineEmits, watch } from "vue";
import CommunityNode from "./communityNode.vue";
import DetailNode from "./detailNode.vue";
-import { Icon } from "@iconify/vue";
import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index";
import { storeToRefs } from "pinia";
diff --git a/src/views/keyNodeRecognition3/components/anchorPost.vue b/src/views/keyNodeRecognition3/components/anchorPost.vue
index 5e634ad..b4eb5d5 100644
--- a/src/views/keyNodeRecognition3/components/anchorPost.vue
+++ b/src/views/keyNodeRecognition3/components/anchorPost.vue
@@ -74,6 +74,7 @@ const getInfluenceWidth = (influence) => {
};
const handleLeaderPost = (item) => {
emit("click:openDialog", item);
+ console.log(item);
};
const listRef = ref(null);
diff --git a/src/views/keyNodeRecognition3/components/communityNode.vue b/src/views/keyNodeRecognition3/components/communityNode.vue
index 89f49fb..90ed362 100644
--- a/src/views/keyNodeRecognition3/components/communityNode.vue
+++ b/src/views/keyNodeRecognition3/components/communityNode.vue
@@ -108,17 +108,46 @@ const initChart = async () => {
.filter(Boolean);
const data = { nodes, links };
+ console.log(data);
const categories = [
- { name: "普通社团", color: "#669cdc" },
- { name: "含锚点社团", color: "#91f7ee" }
+ { name: "普通社团", category: 0 },
+ { name: "含锚点社团", category: 1 }
];
// // 初始选项
const option = {
//图例配置
legend: [
{
- data: categories,
+ data: categories.map((c) => ({
+ name: c.name,
+ itemStyle: {
+ color:
+ c.category === 0
+ ? new echarts.graphic.LinearGradient(
+ 1,
+ 0,
+ 0,
+ 0, // 从左到右渐变（x0=1, x1=0）
+ [
+ { offset: 0, color: "#49c3ed" }, // 起始色（最右）
+ { offset: 0.5, color: "#5fa3e0" }, // 中间色
+ { offset: 1, color: "#7286d4" } // 结束色（最左）
+ ]
+ ) // 分类0的渐变
+ : new echarts.graphic.LinearGradient(
+ 1,
+ 0,
+ 0,
+ 0, // 从左到右渐变 (x0=1, x1=0)
+ [
+ { offset: 0, color: "#7ff2c1" },
+ { offset: 0.37, color: "#85e7d2" },
+ { offset: 1, color: "#8bdbe4" }
+ ]
+ ) // 分类1的渐变
+ }
+ })),
right: 15,
bottom: 13,
icon: "circle",
diff --git a/src/views/keyNodeRecognition3/components/detailNode.vue b/src/views/keyNodeRecognition3/components/detailNode.vue
index 35d4371..0b67371 100644
--- a/src/views/keyNodeRecognition3/components/detailNode.vue
+++ b/src/views/keyNodeRecognition3/components/detailNode.vue
@@ -87,13 +87,33 @@ const initChart = async () => {
const data = { nodes, links };
console.log(data);
- const categories = [{ name: "邻居账号" }, { name: "锚点账号" }];
+ const categories = [
+ { name: "邻居账号", category: 0 },
+ { name: "锚点账号", category: 1 }
+ ];
const option = {
//图例配置
legend: [
{
- data: categories.map((c) => c.name),
+ data: categories.map((c) => ({
+ name: c.name,
+ itemStyle: {
+ color:
+ c.category === 0
+ ? new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ { offset: 0, color: "#49c3ed" },
+ { offset: 0.5, color: "#5fa3e0" },
+ { offset: 1, color: "#7286d4" }
+ ])
+ : "#cccccc" // 锚点账号用灰色纯色（默认头像常用色）
+ },
+ // 锚点账号用圆形头像，普通账号保持默认
+ icon:
+ c.category === 1
+ ? "path://M50 50 m -50 0 a 50 50 0 1 0 100 0 a 50 50 0 1 0 -100 0 Z" // 精确圆形路径
+ : "circle" // 普通账号用ECharts内置circle
+ })),
right: 15,
bottom: 13,
icon: "circle",
@@ -159,8 +179,8 @@ const initChart = async () => {