关于antv g6 切换组件节点样式错乱问题

Question

在使用antv g6 的时候 是用的组件的形式来做的 但是如果我两个图放在一起 节点的样式会错乱 不知道怎么回事

<template>
  <div class="G6PageClass">
    <a-menu class="menuClass" v-model="current" mode="horizontal">
      <a-menu-item v-for="item in currentPage" :key="item.id" @click="menuClick"> {{ item.label }} </a-menu-item>
    </a-menu>
    <div>
      <g6Through v-if="current == '1'"></g6Through>
      <g6Open v-if="current == '2'"></g6Open>                   
      <g6Branch v-if="current == '3'" ref="branchRef"></g6Branch>         //   只有这个图会错乱 
      <g6Penetrate v-if="current == '4'"></g6Penetrate>
      <g6Shareholder v-if="current == '5'"></g6Shareholder>
    </div>
  </div>
</template>

<script>
import g6Through from './g6Through.vue'
import g6Open from './g6Open.vue'
import g6Branch from './g6Branch.vue'
import g6Penetrate from './g6Penetrate.vue'
import g6Shareholder from './g6Shareholder.vue'

export default {
  data () {
    return {
      current: ['1'],   // 如果我进来默认是 1 的话   我点击切换到3  那么这个第3张图样式就会错乱   如果我默认是3的话 就是正常的样式
但是我切换到别的图 再切换回来  就还是会样式错乱
      currentPage: [
        { id: '1', label: '1' },
        { id: '2', label: '2' },
        { id: '3', label: '3' },
        { id: '4', label: '4' },
        { id: '5', label: '5' }
      ]
    }
  },
  props: {
    companyId: {
      type: Number,
      default: 0
    }
  },
  components: { g6Open, g6Branch, g6Penetrate, g6Shareholder, g6Through },
  methods: {
    menuClick (item, key, keyPath) {
      console.log('item, key, keyPath', item, key, keyPath)
      if (item.key == '3') {
      }
    }
  }
}
</script>

Answer 1

样式 标签里 style都加scoped 了吗？生成 图表的 dom 元素 id 也别一样