echarts 树状图节点太多导致节点重叠,如何调整
由于节点太多导致节点重叠在一起后用户无法正常查看,我们可以根据节点的数量并设置每个节点间的高度动态调整E charts 画布的高度和宽度。如下代码:html部分:<template><div :style="{height: chartHeight}"><div ref="main" style="height: 100%"></div></d
·
由于节点太多导致节点重叠在一起后用户无法正常查看,我们可以根据节点的数量并设置每个节点间的高度动态调整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>
更多推荐
所有评论(0)