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

echarts组件使用参考：https://blog.csdn.net/weixin_50450473/article/details/121510438

目录

图例一

图例二

---

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

图例二：

图例一

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

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