vue2中使用antvG6可视化图形工具创建树图

F∅malhaut

已于 2023-06-12 16:36:09 修改

阅读量1.5k

点赞数

分类专栏： vue antv G6 文章标签： vue.js

于 2022-11-02 15:06:56 首次发布

本文链接：https://blog.csdn.net/weixin_50649221/article/details/127637832

版权

vue2中使用antvG6可视化图形工具创建可展开折叠的树图

1. 官网地址

AntV G6 图可视化引擎

2. 安装antvG6

npm install --save @antv/g6

引入插件：

import G6 from '@antv/g6'

这里采用的是自定义节点样式：使用官方api G6.registerNode

G6.registerNode('card-node', {
   
    draw: function drawShape(cfg, group) {
   
      const r = 2
      const [ w, h ] = cfg.size

      // 绘制主体
      const shape = group.addShape('rect', {
   
        attrs: {
   
          x: -w / 2, 
          y: -h / 2,
          width: w, // 宽度
          height: h + 10, // 高度
          stroke: getStatusColor(cfg.status), // 线条颜色
          radius: r,
          fill: cfg.id === userNodeId ? '#b8c9ff' : '#fff', // 填充颜色
        },
        name: 'main-box',
        draggable: true
      })

      // 绘制顶部标题框
      group.addShape('rect', {
   
        attrs: {
   
          x: -w / 2,
          y: -h / 2,
          width: w,
          height: h / 2,
          fill: getStatusColor(cfg.status),
          radius: [r, r, 0, 0],
        },
        name: 'title-box',
        draggable: true
      })

      // 标题
      group.addShape('text', {
   
        attrs: {
   
          textBaseline: 'top',
          x: -w / 2 + 8,
          y: -h / 2 + 5,
          lineHeight: 20,
          text: getStatus(cfg.status),
          fill: '#fff',
        },
        name: 'title'
      })
      // 这一步判断如果节点有子节点，就添加上展开或折叠的图标
      cfg.children &&
        group.addShape('marker', {
   
          attrs: {
   
            x: - w / 2,
            y: 5,
            r: 6,
            cursor: 'pointer',
            symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
            stroke: '#666',
            lineWidth: 1,
            fill: '#fff',
          },
          name: 'collapse-icon'
        })
      
      // 绘制内容
      group.addShape('text', {
   
        attrs: {
   
          textBaseline: 'top',
          x: -w / 2 + 8,
          y: -h / 2 + 29,
          lineHeight: 20,
          text: handleLabel(cfg.name),
          fill: '#444',
        },
        name: `description`
      })
      return shape
    },
    setState(name, value, item) {
   
      if (name === 'collapsed') {
   
        const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon')
        const icon = value ? G6.Marker.expand : G6.Marker

最低0.47元/天解锁文章