vue实现【echarts中 “2种” Graph关系图图例】的组件封装及调用
1、安装echartsnpm install echarts --save2、在需要的页面引入import * as echarts from "echarts"3、创建组件graphChart.vue<template><div><div id="graphs"></div></div></template><scri
·
echarts组件使用参考：https://blog.csdn.net/weixin_50450473/article/details/121510438
目录
图例一：随机文字颜色和字号
图例二：随机文字颜色字号节点，节点大小是字号的2-3倍，节点颜色是文字颜色的透明度
图例三：
图例一
let colorList = [
'#CF4645', '#B580B2', '#29008A', '#146A90', '#8956FF',
'#bfbfbf', '#595959', '#07beb8', '#17c3b2', '#48cae4',
'#40a9ff', '#1890ff', '#ffd53e', '#ffda3d', '#adf7b6',
'#ffd666', '#ffc53d', '#ffc53d', '#ffc069', '#ffa940',
'#eccbd9', '#ffadad', '#ff6392', '#ffc09f', '#ffcb77',
'#91e5f6', '#80ed99', '#9381ff', '#ffe066', '#83bcff',
'#70C9A8', '#97d2fb', '#a0e8af', '#fa8c16' ];
let colorListLen = colorList.length;
let fontSizeList = [
12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 17.5, 18, 18.5, 19,
19.5, 20, 20.5, 21, 22, 23, 24
];
let fontSizeListLen = fontSizeList.length;
let canDraggable = false;
let nodes = [
{ id: '0', name: 'ENFJ' },
{ id: '1', name: '气宇不凡' },
{ id: '2', name: '善劝服' },
{ id: '3', name: '心胸宽阔' },
{ id: '4', name: '坚持不懈' },
{ id: '5', name: '教导型' },
{ id: '6', name: '井然有序' },
{ id: '7', name: '责任感正能量开心果' }
];
let links = [
{ source: '0', target: '0' },
{ source: '1', target: '0' },
{ source: '2', target: '0' },
{ source: '3', target: '0' },
{ source: '4', target: '0' },
{ source: '5', target: '0' },
{ source: '6', target: '0' },
{ source: '7', target: '0' }
];
nodes.forEach((n, index) => {
if (index === 0) {
n.draggable = canDraggable;
n.label = {
color: '#000',
fontSize: 30,
fontWeight: 'bold'
};
} else {
n.draggable = canDraggable;
n.label = {
color: colorList[Math.floor(Math.random() * colorListLen)],
fontSize: fontSizeList[Math.floor(Math.random() * fontSizeListLen)]
};
}
});
option = {
title: {
show: true,
text: '教导型——谆谆善诱地引导他人',
x: 'center',
y: 'top',
color: '#666',
fontSize: 24
},
series: [
{
type: 'graph',
layout: 'force',
force: {
edgeLength: 30, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
repulsion: 300 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
},
roam: 'scale',
symbolSize: 0.1,
label: {
show: true,
color: 'auto',
fontSize: 14
},
lineStyle: {
width: 0
},
links: links,
data: nodes
}
]
};图例二
let colorList = [
'#CF4645', '#B580B2', '#29008A', '#146A90',
'#836f6f', '#437289', '#07beb8', '#17c3b2',
'#40a9ff', '#d7a800', '#2c776d', '#237feb',
'#c36d63', '#ffc53d', '#ffa940', '#48cae4',
'#ff589f', '#ed8b43', '#950c35', '#fb7f3e',
'#91e5f6', '#80ed99', '#9381ff', '#8956FF',
'#70C9A8', '#97d2fb', '#52c96b', '#fa8c16'];
let colorListLen = colorList.length;
let fontSizeList = [
12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 17.5, 18, 18.5, 19, 19.5, 20
];
let fontSizeListLen = fontSizeList.length;
let canDraggable = false;
let nodes = [
{ id: '0', name: '高层' },
{ id: '1', name: '国家' },
{ id: '2', name: '格式' },
{ id: '3', name: '测量' },
{ id: '4', name: '国家' },
{ id: '5', name: '里面' },
{ id: '6', name: '格式' },
{ id: '7', name: '水准' }
];
let links = [
{ source: '0', target: '0' },
{ source: '1', target: '0' },
{ source: '2', target: '0' },
{ source: '3', target: '0' },
{ source: '4', target: '0' },
{ source: '5', target: '0' },
{ source: '6', target: '0' },
{ source: '7', target: '0' }
];
nodes.forEach((n, index) => {
if (index === 0) {
n.draggable = canDraggable;
n.label = {
color: state.colorList[Math.floor(Math.random() * state.colorListLen)],
fontSize: 28,
fontWeight: 'bold'
};
n.symbolSize = n.label.fontSize * 2.8
n.itemStyle = {
color: hexToRgba(n.label.color,0.3)
}
} else {
n.draggable = canDraggable;
n.label = {
color: colorList[Math.floor(Math.random() * colorListLen)],
fontSize: fontSizeList[Math.floor(Math.random() * fontSizeListLen)]
};
n.symbolSize = n.label.fontSize * 2.8
n.itemStyle = {
color: hexToRgba(n.label.color,0.3)
}
}
});
const hexToRgba = (hex, alpha) => {
let r = 0, g = 0, b = 0;
// 3 digits
if (hex.length == 4) {
r = "0x" + hex[1] + hex[1];
g = "0x" + hex[2] + hex[2];
b = "0x" + hex[3] + hex[3];
// 6 digits
} else if (hex.length == 7) {
r = "0x" + hex[1] + hex[2];
g = "0x" + hex[3] + hex[4];
b = "0x" + hex[5] + hex[6];
}
return "rgba(" + +r + "," + +g + "," + +b + "," + alpha + ")";
}
option = {
title: {
show: true,
text: '教导型——谆谆善诱地引导他人',
x: 'center',
y: 'top',
color: '#666',
fontSize: 24
},
series: [
{
type: 'graph',
layout: 'force',
force: {
edgeLength: 30, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
repulsion: 300 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
},
roam: 'scale',
symbolSize: 0.1,
label: {
show: true,
color: 'auto',
fontSize: 14
},
lineStyle: {
width: 0
},
links: links,
data: nodes
}
]
};图例三
let datas = [
{ id: '0', name: '学习潜能现实化影响因素', category: 0 },
{ id: '1', name: '认知能力', category: 1 },
{ id: '2', name: '学习自我效能感', category: 2 },
{ id: '3', name: '学习自主性觉醒', category: 3 },
{ id: '4', name: '记忆力', category: 1 },
{ id: '5', name: '思维能力', category: 1 },
{ id: '6', name: '观察能力', category: 1 },
{ id: '7', name: '自我预期', category: 2 },
{ id: '8', name: '学习信念', category: 2 },
{ id: '9', name: '学习信心', category: 2 },
{ id: '10', name: '目标意识', category: 3 },
{ id: '11', name: '监控意识', category: 3 },
{ id: '12', name: '自评反思', category: 3 }
];
let links = [
{ source: '1', target: '0' },
{ source: '2', target: '0' },
{ source: '3', target: '0' },
{ source: '4', target: '1' },
{ source: '5', target: '1' },
{ source: '6', target: '1' },
{ source: '7', target: '2' },
{ source: '8', target: '2' },
{ source: '9', target: '2' },
{ source: '10', target: '3' },
{ source: '11', target: '3' },
{ source: '12', target: '3' }
];
let colorList = ['#75d8c6', '#8c93f7', '#e6ab50', '#78b6ff'];
datas.forEach((da, daIndex) => {
if (da.category === 0) {
da.itemStyle = {
color: colorList[0]
};
da.symbolSize = 180;
} else if (da.category === 1) {
da.itemStyle = {
color: colorList[1]
};
if (daIndex === 1) {
da.symbolSize = 110;
}
} else if (da.category === 2) {
da.itemStyle = {
color: colorList[2]
};
if (daIndex === 2) {
da.symbolSize = 110;
}
} else if (da.category === 3) {
da.itemStyle = {
color: colorList[3]
};
if (daIndex === 3) {
da.symbolSize = 110;
}
}
});
option = {
animationDurationUpdate: 100, // 数据更新动画的时长。
animationEasingUpdate: 'quinticInOut', // 数据更新动画的缓动效果。
color: ['#8c93f7', '#abb2fd', '#78b6ff'],
grid: {
top: '20%',
bottom: '20%',
left: '20%',
right: '20%'
},
series: [
{
type: 'graph', // 类型:关系图
layout: 'force', // 图的布局，类型为力导图
focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
draggable: true, // 指示节点是否可以拖动
symbolSize: 65, // 调整节点的大小
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: ['circle', 'arrow'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
edgeSymbolSize: [2, 10], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
force: {
// 力引导图基本配置
layoutAnimation: true,
// xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项
// yAxisIndex: 0, // y轴坐标
gravity: 0.02, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
// edgeLength: 40, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
// repulsion: 30 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
edgeLength: 40, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
repulsion: 300 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
},
lineStyle: {
normal: {
width: 1,
color: 'target', // 决定边的颜色是与起点相同还是与终点相同
curveness: 0,
type: 'solid' // 'dotted'点型虚线 'solid'实线 'dashed'线性虚线
}
},
label: {
show: true,
formatter: '{b}',
textStyle: {
fontSize: 14,
fontWeight: 600,
color: '#fff'
}
},
// 数据
data: datas,
links: links
}
]
};希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)