template中页面代码
<div v-for="(item, index) in treeData" :key="index">
<div :id="item[tree].id" class="graph-wh"></div> //树图容器(根据传递来的多个树型数据数组)
</div>
树图对数据格式有要求,必须有id和children两个字段
官网数据格式示例:
https://g6.antv.vision/zh/graphmarker
script中
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import G6 from '@antv/g6'
@Component
export default class TreeGraph extends Vue {
@Prop({
type: Array,
default () {
return []
}
})
treeData!: any; //树形数据列表
@Prop({
type: String,
default: ''
})
tree!: string; //根据自己数据格式自己定义,因为我树形数据列表还包含其他属性,就传递了一下树数据对应的字段
@Prop({
typ