vue2 G6脑图自定义样式

在Vue2中使用G6脑图进行自定义样式的话，你可以通过以下步骤实现：

1. 安装G6脑图的依赖：在你的Vue项目中，使用npm或yarn安装G6脑图的相关依赖，包括`@antv/g6`和`@antv/g6-brush-select-plugin`。

2. 创建G6脑图组件：在你的Vue项目中创建一个G6脑图的组件，可以命名为`G6MindMap.vue`。

3. 在`G6MindMap.vue`中引入依赖：在组件文件中引入G6脑图所需的依赖，例如：

import G6 from '@antv/g6';
import BrushSelect from '@antv/g6-brush-select-plugin';

4. 定义自定义样式：在组件的`mounted`生命周期钩子中，定义你想要的自定义样式。例如，你可以修改节点的形状、颜色、文字样式等。下面是一个示例：

mounted() {
  // 定义自定义样式
  G6.registerNode('custom-node', {
    draw(cfg, group) {
      const shape = group.addShape('rect', {
        attrs: {
          x: -50,
          y: -25,
          width: 100,
          height: 50,
          fill: '#C6E5FF',
        },
      });
      group.addShape('text', {
        attrs: {
          text: cfg.label,
          x: 0,
          y: 0,
          textAlign: 'center',
          textBaseline: 'middle',
          fill: '#333',
        },
      });
      return shape;
    },
  });
},

5. 渲染脑图：在`G6MindMap.vue`组件中，定义一个方法来渲染脑图。在方法中，你可以通过调用G6的API来创建节点、设置样式、添加连线等操作。

methods: {
  renderMindMap() {
    const container = this.$refs.mindmapContainer;
    const width = container.offsetWidth;
    const height = container.offsetHeight;

    const graph = new G6.Graph({
      container,
      width,
      height,
      plugins: [BrushSelect],
      // 设置节点样式为自定义样式
      defaultNode: {
        type: 'custom-node',
      },
      // 其他配置项...
    });

    // 添加节点和连线等操作...

    graph.render();
  },
},

6. 在模板中使用组件：在你的Vue页面中，使用`G6MindMap`组件，并在适当的时机调用`renderMindMap`方法来渲染脑图。

<template>
  <div>
    <div ref="mindmapContainer" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
import BrushSelect from '@antv/g6-brush-select-plugin';

export default {
  mounted() {
    G6.registerNode('custom-node', {
      draw(cfg, group) {
        // 自定义节点样式...
      },
    });

    this.renderMindMap();
  },
  methods: {
    renderMindMap() {
      // 渲染脑图...
    },
  },
};
</script>

通过以上步骤，你就可以在Vue2中使用G6脑图进行自定义样式了。你可以根据实际需求修改节点样式的定义和渲染过程，以满足你的具体要求。