G6尝试 学习

<template>
  <div>
    <div @click="myg6">g6</div>

    <el-dialog
      title="提示"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose"
    >
      <!-- 图形 -->
      <div id="mountNode" style="background:#e7eaed"></div>
      <!-- 右边 -->
      <div v-if="needItem">点击的id:{{ needItem._cfg.id }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import G6 from '@antv/g6'
export default {
  data() {
    return {
      dialogVisible: false,
      needItem: null
    }
  },
  mounted() {},
  methods: {
    myg6() {
      this.dialogVisible = true
      this.$nextTick(async () => {
        const graph = new G6.Graph({
          // g6配置
          container: 'mountNode', // String | HTMLElement，必须， id容器
          width: 800, // Number，必须，图的宽度
          height: 500, // Number，必须，图的高度
          modes: {
            //         拖拽画布       放缩画布         拖拽节点
            default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
            edit: []
          },
          // 节点在默认状态下的样式配置（style）和其他配置
          defaultNode: {
            size: 30, // 节点大小
            // ...                 // 节点的其他配置
            // 节点样式配置
            style: {
              fill: 'red', // 节点填充色
              stroke: '#666', // 节点描边色
              lineWidth: 1 // 节点描边粗细
            },
            // 节点上的标签文本配置
            labelCfg: {
              // 节点上的标签文本样式配置
              style: {
                fill: 'blue' // 节点标签文字颜色
              }
            }
          },
          // 边在默认状态下的样式配置（style）和其他配置
          defaultEdge: {
            // ...                 // 边的其他配置
            // 边样式配置
            style: {
              opacity: 0.6, // 边透明度
              stroke: 'grey' // 边描边颜色
            },
            // 边上的标签文本配置
            labelCfg: {
              autoRotate: true // 边上的标签文本根据边的方向旋转
            }
          },

          layout: {
            // Object，可选，布局的方法及其配置项，默认为 random 布局。
            type: 'force', // 指定为力导向布局
            preventOverlap: true, // 防止节点重叠
            linkDistance: 100 // 指定边距离为100
            // nodeSize: 30        // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。
          },
          // fitView: true // 兼容画布大小
          // fitViewPadding: [20, 40, 50, 20] // 画布边距

          // 节点不同状态下的样式集合
          nodeStateStyles: {
            // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
            hover: {
              fill: 'lightsteelblue'
            },
            // 鼠标点击节点，即 click 状态为 true 时的样式
            click: {
              stroke: '#000',
              lineWidth: 3
            }
          },
          // 边不同状态下的样式集合
          edgeStateStyles: {
            // 鼠标点击边，即 click 状态为 true 时的样式
            click: {
              stroke: 'steelblue'
            }
          }
        })

        const response = await fetch(
          // 获取数据
          'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'
        )
        const remoteData = await response.json()
        const nodes = remoteData.nodes // 处理标点内容
        nodes.forEach((node) => {
          if (!node.style) {
            node.style = {}
          }
          // 动态修改 标点样式
          // node.style.lineWidth = 1
          // node.style.stroke = '#666'
          // node.style.fill = 'steelblue'
          switch (
            node.class // 根据节点数据中的 class 属性配置图形
          ) {
            case 'c0': {
              node.type = 'circle' // class = 'c0' 时节点图形为 circle
              break
            }
            case 'c1': {
              node.type = 'rect' // class = 'c1' 时节点图形为 rect
              node.size = [35, 20] // class = 'c1' 时节点大小
              break
            }
            case 'c2': {
              node.type = 'ellipse' // class = 'c2' 时节点图形为 ellipse
              node.size = [35, 20] // class = 'c2' 时节点大小
              break
            }
          }
        })

        const edges = remoteData.edges // 处理线
        edges.forEach((edge) => {
          if (!edge.style) {
            edge.style = {}
          }
          edge.style.lineWidth = edge.weight // 边的粗细映射边数据中的 weight 属性数值
          console.log(edge)
          // 对边样式进行处理
          // edge.style.opacity = 0.6
          // edge.style.stroke = 'grey'
        })

        graph.data(remoteData) // 读取 Step 2 中的数据源到图上
        graph.render() // 渲染图

        // 监听鼠标进入节点
        graph.on('node:mouseenter', (e) => {
          const nodeItem = e.item
          // 设置目标节点的 hover 状态 为 true
          graph.setItemState(nodeItem, 'hover', true)
        })
        // 监听鼠标离开节点
        graph.on('node:mouseleave', (e) => {
          const nodeItem = e.item
          // 设置目标节点的 hover 状态 false
          graph.setItemState(nodeItem, 'hover', false)
        })
        // 监听鼠标点击节点
        graph.on('node:click', (e) => {
          // 先将所有当前有 click 状态的节点的 click 状态置为 false
          const clickNodes = graph.findAllByState('node', 'click')
          clickNodes.forEach((cn) => {
            graph.setItemState(cn, 'click', false)
          })
          const nodeItem = e.item
          this.needItem = e.item
          console.log(this.needItem, '666')
          // 设置目标节点的 click 状态 为 true
          graph.setItemState(nodeItem, 'click', true)
        })
        // 监听鼠标点击节点
        graph.on('edge:click', (e) => {
          // 先将所有当前有 click 状态的边的 click 状态置为 false
          const clickEdges = graph.findAllByState('edge', 'click')
          clickEdges.forEach((ce) => {
            graph.setItemState(ce, 'click', false)
          })
          const edgeItem = e.item
          // 设置目标边的 click 状态 为 true
          graph.setItemState(edgeItem, 'click', true)
        })
      })
    },
    handleClose() {}
  }
}
</script>