343 lines
7.9 KiB
TypeScript
343 lines
7.9 KiB
TypeScript
import { ref } from "vue";
|
||
|
||
// 关系图逻辑
|
||
export const useChartHooks = () => {
|
||
const option = ref({
|
||
title: {
|
||
text: "",
|
||
},
|
||
tooltip: {
|
||
formatter: (params: Record<string, any>) => {
|
||
// params.data包含节点的数据信息
|
||
if (params.data && params.data.raw) {
|
||
// 显示指定字段，这里假设我们要显示raw对象中的特定字段
|
||
// 可以根据实际需求调整要显示的字段
|
||
const rawData = params.data.raw;
|
||
let result = '';
|
||
|
||
// 显示ID（作为唯一标识）
|
||
if (rawData.id) {
|
||
result += `ID: ${rawData.id}<br/>`;
|
||
}
|
||
|
||
// 显示名称
|
||
if (rawData.properties?.name || rawData.name) {
|
||
const displayName = rawData.properties?.name || rawData.name;
|
||
result += `名称: ${displayName}<br/>`;
|
||
}
|
||
|
||
|
||
|
||
// 可以添加更多需要显示的字段
|
||
// 例如：
|
||
// if (rawData.properties?.description) {
|
||
// result += `描述: ${rawData.properties.description}<br/>`;
|
||
// }
|
||
|
||
return result;
|
||
}
|
||
// 回退到默认显示
|
||
return params.name || '未知节点';
|
||
},
|
||
},
|
||
animation: false, // 完全关闭动画
|
||
animationDuration: 0, // 动画时长设为0
|
||
animationDurationUpdate: 0, // 更新动画时长设为0
|
||
animationEasingUpdate: "linear", // 使用线性缓动
|
||
force: {
|
||
repulsion: 1000,
|
||
gravity: 0.1, // 添加重力防止节点飞散
|
||
friction: 0.6, // 添加摩擦力
|
||
layoutAnimation: false, // 关闭力导向布局动画
|
||
},
|
||
// animationDurationUpdate: 100,
|
||
// animationEasingUpdate: "quinticInOut",
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
x: "center",
|
||
show: false,
|
||
// data: ["夫妻", "战友", "亲戚"],
|
||
},
|
||
series: [
|
||
{
|
||
type: "graph",
|
||
layout: "force",
|
||
symbolSize: 60,
|
||
focusNodeAdjacency: true,
|
||
roam: true,
|
||
categories: [
|
||
{
|
||
name: "夫妻",
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: "#009800",
|
||
// },
|
||
// },
|
||
},
|
||
{
|
||
name: "战友",
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: "#4592FF",
|
||
// },
|
||
// },
|
||
},
|
||
{
|
||
name: "亲戚",
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: "#3592F",
|
||
// },
|
||
// },
|
||
},
|
||
],
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
},
|
||
formatter: (e: Record<string, any>) => {
|
||
const name = e.data.raw.properties.name
|
||
return name;
|
||
}
|
||
},
|
||
},
|
||
force: {
|
||
repulsion: 1000,
|
||
},
|
||
edgeSymbolSize: [4, 50],
|
||
edgeLabel: {
|
||
normal: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 10,
|
||
},
|
||
formatter: "{c}",
|
||
},
|
||
},
|
||
data: [
|
||
// {
|
||
// name: "徐贱云",
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "冯可梁",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "邓志荣",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "李荣庆",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "郑志勇",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "赵英杰",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "王承军",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "陈卫东",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "邹劲松",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "赵成",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "陈现忠",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "陶泳",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
// {
|
||
// name: "王德福",
|
||
// category: 1,
|
||
// draggable: true,
|
||
// },
|
||
],
|
||
links: [
|
||
// {
|
||
// source: 0,
|
||
// target: 1,
|
||
// value: "asd",
|
||
// },
|
||
// {
|
||
// source: 0,
|
||
// target: 2,
|
||
// value: "子女",
|
||
// },
|
||
// {
|
||
// source: 0,
|
||
// target: 3,
|
||
// value: "夫妻",
|
||
// },
|
||
// {
|
||
// source: 0,
|
||
// target: 4,
|
||
// value: "父母",
|
||
// },
|
||
// {
|
||
// source: 1,
|
||
// target: 2,
|
||
// value: "表亲",
|
||
// },
|
||
// {
|
||
// source: 0,
|
||
// target: 5,
|
||
// value: "朋友",
|
||
// },
|
||
// {
|
||
// source: 4,
|
||
// target: 5,
|
||
// value: "朋友",
|
||
// },
|
||
// {
|
||
// source: 2,
|
||
// target: 8,
|
||
// value: "叔叔",
|
||
// },
|
||
// {
|
||
// source: 0,
|
||
// target: 12,
|
||
// value: "朋友",
|
||
// },
|
||
// {
|
||
// source: 6,
|
||
// target: 11,
|
||
// value: "爱人",
|
||
// },
|
||
// {
|
||
// source: 6,
|
||
// target: 3,
|
||
// value: "朋友",
|
||
// },
|
||
// {
|
||
// source: 7,
|
||
// target: 5,
|
||
// value: "朋友",
|
||
// },
|
||
// {
|
||
// source: 9,
|
||
// target: 10,
|
||
// value: "朋友",
|
||
// },
|
||
// {
|
||
// source: 3,
|
||
// target: 10,
|
||
// value: "朋友",
|
||
// },
|
||
// {
|
||
// source: 2,
|
||
// target: 11,
|
||
// value: "同学",
|
||
// },
|
||
],
|
||
lineStyle: {
|
||
normal: {
|
||
opacity: 0.9,
|
||
width: 1,
|
||
curveness: 0,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
});
|
||
|
||
/**
|
||
* @desc 描述
|
||
* @auth yjc
|
||
* @created 2025-11-17 15:25
|
||
* @since v1.0.0
|
||
* @param {string} id - 当前数据的唯一标识
|
||
* @param {string} 参数描述
|
||
* @returns {类型} 返回值描述
|
||
*
|
||
* @example
|
||
* functionName(参数)
|
||
*
|
||
* @modified 2025-11-17 15:25
|
||
* @desc 描述
|
||
*/
|
||
|
||
const createLink = (data: Record<string, any>) => {
|
||
return {
|
||
raw: data,
|
||
source: data.parentIndex,
|
||
target: data.index,
|
||
value: data.type,
|
||
itemStyle: data?.itemStyle || null
|
||
}
|
||
}
|
||
|
||
// 构造节点数据
|
||
const createPointData = (data: Record<string, any>, options?: Record<string, any>) => {
|
||
return {
|
||
raw: data,
|
||
id: data.id,
|
||
name: data.name,
|
||
draggable: options?.draggable || false,
|
||
itemStyle: data?.itemStyle || null
|
||
}
|
||
}
|
||
|
||
// 类型
|
||
// const createType = (data: Record<string, any>) => {
|
||
// const colorMap: Record<string, any> = {
|
||
// 夫妻: "#009800",
|
||
// 战友: "#4592FF",
|
||
// 亲戚: "#3592F",
|
||
// }
|
||
|
||
// return {
|
||
// name: data.type,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: colorMap[data.type] || "#009800",
|
||
// }
|
||
// },
|
||
// }
|
||
// }
|
||
|
||
|
||
|
||
return {
|
||
option,
|
||
createLink,
|
||
createPointData,
|
||
};
|
||
};
|