g6中多个树图分别根据数据多少来重新设置高度,进而保持所有树图大小基本一致

本文介绍如何在 G6 图形库中,根据数据量动态调整多个树图的高度,以保持它们的显示大小一致。主要思路是利用 fitView() 方法自动缩放,结合 getZoom() 获取缩放比例,然后通过 changeSize() 设置合适高度,实现近似的自适应布局。然而,这种方法不能确保完全按预期设定,只能接近理想效果。
摘要由CSDN通过智能技术生成

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
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值