Echarts之拓扑图

option = {
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      // params 是当前节点的信息
      if (params.dataType === 'node') {
        // 获取节点的 desc 和 value
        const desc = params.data.desc || '未知描述';
        const value = params.data.value || '未知值';
        // 返回两行文案，数字前面添加绿色小圆点
        return `${desc}<br><span style="display: inline-block; width: 4px; height: 4px; background-color: green; border-radius: 50%; margin-right: 4px;"></span><span style="color: blue;">${value}</span>`;
      }
      return ''; // 如果是 link，不显示 tooltip
    }
  },
  series: [
    {
      type: 'graph',
      layout: 'none',
      symbolSize: 50,
      roam: true,
      label: {
        show: true
      },
      edgeSymbol: [],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 20
      },
      data: [
        {
          name: 'Node 1',
          x: 300,
          y: 300,
          symbol: 'rect',
          symbolSize: 40,
          symbolOffset: [30, 0],
          symbolRotate: 45,
          desc: '这是节点1的描述', // 添加 desc 字段
          value: 100 // 添加 value 字段
        },
        {
          name: 'Node 2',
          x: 700,
          y: 300,
          symbol: 'rect',
          symbolSize: 40,
          symbolOffset: [-30, 0],
          symbolRotate: 45,
          desc: '这是节点2的描述', // 添加 desc 字段
          value: 200 // 添加 value 字段
        },
        {
          name: 'Node 3',
          x: 500,
          y: 100,
          symbol: 'rect',
          symbolSize: 40,
          symbolOffset: [0, 30],
          symbolRotate: 45,
          desc: '这是节点3的描述', // 添加 desc 字段
          value: 300 // 添加 value 字段
        },
        {
          name: 'Node 4',
          x: 500,
          y: 500,
          symbol: 'rect',
          symbolSize: 40,
          symbolOffset: [0, -30],
          symbolRotate: 45,
          desc: '这是节点4的描述', // 添加 desc 字段
          value: 400 // 添加 value 字段
        },
        {
          name: 'Node 5',
          x: 700,
          y: 700,
          symbol: 'rect',
          symbolSize: 40,
          symbolOffset: [0, -30],
          symbolRotate: 45,
          desc: '这是节点5的描述', // 添加 desc 字段
          value: 500 // 添加 value 字段
        },
        {
          name: 'Node 6',
          x: 900,
          y: 500,
          symbol: 'rect',
          symbolSize: 40,
          symbolOffset: [-30, 0],
          symbolRotate: 45,
          desc: '这是节点6的描述', // 添加 desc 字段
          value: 600 // 添加 value 字段
        }
      ],
      links: [
        {
          source: 'Node 1',
          target: 'Node 3',
          tooltip: { show: false } // 禁用 link 的 tooltip
        },
        {
          source: 'Node 2',
          target: 'Node 3',
          tooltip: { show: false } // 禁用 link 的 tooltip
        },
        {
          source: 'Node 2',
          target: 'Node 4',
          tooltip: { show: false } // 禁用 link 的 tooltip
        },
        {
          source: 'Node 1',
          target: 'Node 4',
          tooltip: { show: false } // 禁用 link 的 tooltip
        },
        {
          source: 'Node 4',
          target: 'Node 5',
          tooltip: { show: false } // 禁用 link 的 tooltip
        },
        {
          source: 'Node 5',
          target: 'Node 6',
          tooltip: { show: false } // 禁用 link 的 tooltip
        },
        {
          source: 'Node 6',
          target: 'Node 2',
          tooltip: { show: false } // 禁用 link 的 tooltip
        }
      ],
      lineStyle: {
        opacity: 0.9,
        width: 2,
        curveness: 0
      }
    }
  ]
};