echarts 关系图， 动态修改高度

情景：由于人物关系复杂，可以有几个 ——几十个（上百个），所以固定范围内（如：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 {
    data() {
        relationshipHeight: 460
    },
    //方法一：(mounted中加载echarts) dom挂载再调用，因为created钩子里面dom还没挂载
    mounted() {
        this.relationEchart()
    },
    methods: {
        //方法二：通过接口获取数据
        getData() {
            getData().then((res) => {
                // 根据返回的nodes数量，动弹展示box高度
                let len = res.nodes.length //
                if (len <= 10) {
                    this.relationshipHeight = 460
                } else {
                    this.relationshipHeight = 580
                }
                this.$nextTick(() => {
                    // 待页面加载完再更新echarts
                    this.relationEchart(this.relationshipHeight);
                })
            })

        },
        relationEchart(relationshipHeight) {
            const myChart = echarts.init(document.getElementById('line'));
            /*
            * ..
            */
            //清除画布，这样重新绘制的时候就不会遗留之前的数据
            myChart.clear();
            // 绘制图表
            myChart.setOption(options);

            // 这个counst.length是渲染数据的长度
            //第一个50是为我给每个柱状图的高度，第二个50是为柱状图x轴内容的高度(大概的)
            const autoHeight = relationshipHeight
            //以下两个方法改变高度都可以
            /**
            * 　myChart.getDom().style.height = autoHeight + "px";
            */
            myChart.resize({
                height: autoHeight
            })
        },
    }
}