元素-标签-文本换行与背景颜色

标签 | G6 图可视化引擎复制https://g6.antv.antgroup.com/examples/element/label#word-wrap标签 | G6 图可视化引擎复制https://g6.antv.antgroup.com/examples/element/label/#background

通过设置 labelMaxLines 属性可以控制展示的文字段落数，如果超出，它会自动补充省略号

labelWordWrap: true,
labelMaxLines: 2

通过 labelFill 与 labelBackgroundFill 可以控制标签文本字体颜色与背景颜色

labelFill: '#1890ff',
labelBackground: true,
labelBackgroundFill: 'linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',

【完整代码】

// 文本换行：https://g6.antv.antgroup.com/examples/element/label/#word-wrap
// 背景颜色：https://g6.antv.antgroup.com/examples/element/label/#background

import { Graph } from "@antv/g6";

const data = {
  nodes: [
    {
      id: 'node-1',
      style: {
        x: 100,
        y: 150,
        size: 100
      },
      data: {
        label: 'node-1 This label is too long to be displayed'
      }
    },
    {
      id: 'node-2',
      style: {
        x: 400,
        y: 150,
        size: 150
      },
      data: {
        label: 'node-2 This label is too long to be displayed'
      }
    },
  ],
  edges: [
    {
      source: 'node-1',
      target: 'node-2',
      data: {
        label: 'edge-1-2 This label is too long long long long to be displayed'
      }
    }
  ]
}

const graph = new Graph({
  container: 'container',
  // fitCenter: true,
  data,
  node: {
    type: 'rect',
    style: {
      labelOffsetY: -10,
      labelPlacement: 'top',
      labelText: d => d.data.label,
      labelMaxWidth: '90%',
      labelFill: '#e66465', // 文本字色
      labelBackground: true,
      labelBackgroundFill: 'linear-gradient(#e66465, #9198e5)', // 背景颜色
      labelBackgroundFillOpacity: 0.9,
      labelBackgroundRadius: 4,
      labelWordWrap: true,
      labelMaxLines: 2
    }
  },
  edge: {
    style: {
      labelOffsetY: -12,
      labelTextBaseline: 'bottom',
      labelText: d => d.data.label,
      labelMaxWidth: '80%',
      labelFill: '#1890ff',
      labelBackground: true,
      labelBackgroundFill: 'linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',
      labelBackgroundFillOpacity: 0.3,
      labelBackgroundRadius: 4,
      labelWordWrap: true,
      labelMaxLines: 3,
      startArrow: true,
      endArrow: true,
    }
  },
  behaviors: ['drag-element']
})

graph.render()

---

 项目的创建参考 G6 详细教程，注意，node版本需要：required: { node: '>=18' }

详细教程 | G6 图可视化引擎本教程将引导你从头开始完成一个 G6 图表开发，并在过程中了解和学习 G6 的主要概念。https://g6.antv.antgroup.com/manual/getting-started/step-by-step