echarts 树状图节点太多导致节点重叠，如何调整

最新推荐文章于 2024-05-17 15:22:04 发布

Mr.Meng_95

最新推荐文章于 2024-05-17 15:22:04 发布

阅读量576

点赞数 1

分类专栏：项目文章标签： echarts 前端 javascript

原文链接：https://blog.csdn.net/sinat_20078327/article/details/124443322#:~:text=%E7%94%B1%E4%BA%8E%E8%8A%82%E7%82%B9%E5%A4%AA%E5%A4%9A%E5%AF%BC%E8%87%B4%E8%8A%82%E7%82%B9%E9%87%8D%E5%8F%A0%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%90%8E%E7%94%A8%E6%88%B7%E6%97%A0%E6%B3%95%E6%

版权

项目专栏收录该内容

178 篇文章 10 订阅

订阅专栏

文章介绍了如何在Echarts中处理节点过多导致的重叠问题，通过计算节点数量和设置间距动态调整图表的画布高度和宽度，确保用户可以正常查看数据。

摘要由CSDN通过智能技术生成

由于节点太多导致节点重叠在一起后用户无法正常查看，我们可以根据节点的数量并设置每个节点间的高度动态调整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>