vue实现【echarts中 “2种” Graph关系图图例】的组件封装及调用

vue实现【echarts中 “2种” Graph关系图图例】的组件封装及调用

echarts组件使用参考：

目录

图例一

图例二

图例一：随机文字颜色和字号

图例二：

图例一

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 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}]
};

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~