由于节点太多导致节点重叠在一起后用户无法正常查看,我们可以根据节点的数量并设置每个节点间的高度动态调整E charts 画布的高度和宽度。

如下代码:

html部分:

<template>
    <div :style="{height: chartHeight + 'px'}">
        <div ref="main" style="height: 100%"></div>
    </div>
</template>

js部分:

<script>
    data() {
        return {
            chartHeight: 1000
        }
    },
    methods: {
        init() {
            let myChart = echarts.init(this.$refs.maim)
            this.$nextTick(() => {
                option && myChart.setOption(option)
                const eleArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls))
                // const treeDepLength = myChart._chartsViews[0]._data.tree.root.height                            // 获取树的高度
                // const itemHeight = 100       // 设置每层树的间距(垂直型树高)
                // let currentHeight = itemHeight * (treeDepLength + 1) || itemHeight
                const itemHeight = 30
                const currentHeight = itemHeight * (eleArr.length - 1) || itemHeight
                const newHeight = Math.max(currentHeight, itemHeight)
                this.chartHeight = newHeight
                myChart.resize({
                    height: newHeight
                })
            })
        }
    }
</script>


Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐