echarts 关系图, 动态修改高度

针对人物关系图展示的问题,当节点数量过多时,原有的固定高度可能无法适应。通过JavaScript和Echarts库,可以实现根据节点数量动态修改div或canvas的高度。若仍然存在展示问题,可启用roam属性,允许用户进行平移拖拽和缩放操作。
摘要由CSDN通过智能技术生成

情景:由于人物关系复杂,可以有几个 ——几十个(上百个),所以固定范围内(如:500高度)可能放不下,或者太空。所以可以根据node节点(也可根据其他判断条件)来动态修改 div / canvas高度。如果还是超出(eg:节点或者关系多),可添加roam:true的属性实现可平移拖拽 / 缩放。

 

返回的数据:

html:

   <div>
          <h5>人物关系图谱</h5>
          <div id="relationship" :style="`height:${relationshipHeight}px`" v-if="graph.nodes" />
           <div class="nodatatext" v-else>暂未发现该人物的关系图谱</div>
</div>

js:

export default {
    d
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值