Vue3使用echarts tree高度自适应支持滚动查看功能
更新时间：2024年06月28日 08:22:29 作者：快乐的海绵宝宝
这篇文章主要介绍了Vue3使用echarts tree高度自适应支持滚动查看功能,文章同通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
最近使用echarts tree写了一个组件，写了固定的高，发现当展开的节点特别多的时候，节点就会重叠在一起（如下图），显示效果不好，就做了一些展示优化。
思路
一开始tree的高度是固定写死的，现在根据节点的数量高度自适应，节点就不会重叠到一起。支持滚动查看。
实现(主要代码)
<template>
<div style="overflow: auto; height: calc(80vh)">
<div id="treechart" style="height: 800px"></div>
</div>
</template>
<script setup lang="ts">
import * as Echarts from "echarts";
import { ref,onMounted } from "vue";
onMounted(()=>{
let chartDom = Echarts.init(document.getElementById("treechart"));
let option={
....
};
chartDom.setOption(option);
chartDom.on("click"，function(event){
let treeDom = document.getElementById("treechart");//获取元素
if(event.componentType === "series"){
let nodeList = Array.from(new Set(chartDom._chartsViews[0]._data._graphicEls));//计算节点数量
let height = 800;//默认高度
let currentHeight = 30*(nodeList.length-1)||100;//动态高度
let newHeight = Math.max(currentHeight,height);
treeDom.style.height= newHeight+"px";
chartDom.resize();
}
});
})
</script>
实现效果
到此这篇关于Vue3使用echarts tree高度自适应支持滚动查看功能的文章就介绍到这了,更多相关Vue3 echarts tree滚动查看内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近用 Vue 做移动端页面遇到一个问题,需要记住滚动条的位置,所以下面这篇文章主要给大家介绍了关于vue中记录滚动条位置的两种方法,文中给出了详细的实例,需要的朋友可以参考下2023-01-01
Pinia是Vue的存储库,它允许您跨组件/页面共享状态,Pinia的成功可以归功于他管理存储数据的独特功,下面这篇文章主要给大家介绍了关于Vue3中pinia使用方法的相关资料,需要的朋友可以参考下2023-04-04
这篇文章的主题是vue-cli的理解。或许，很多人在开发vue的时候，我们会发现一个问题——只会去用，而不明白它的里面的东西。现在的框架可以说是足够的优秀，让开发者不用为搭建开发环境而烦恼。但是有时候，我们还是得回到原始生活体验一下，才能够让自己更上层楼。2017-12-12
在Vue中,有两种类型的自定义指令：局部指令和全局指令,但是除了这些指令 Vue也允许我们自己定义自己的指令,下面我们就来学习一下Vue中自定义指令的用法吧2023-08-08
这篇文章主要介绍了vue实现骨架屏的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了在vue中使用screenfull 依赖，实现全屏组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue中 根据时间戳 判断对应的时间（今天 昨天 前天）,需要的朋友可以参考下2019-12-12
vue+element获取el-table某行的下标,根据下标操作数组对象方式
这篇文章主要介绍了vue+element获取el-table某行的下标,根据下标操作数组对象方式，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧2020-08-08
这篇文章主要介绍了vue中使用GraphQL的实例代码,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要介绍了Vue项目中input框focus时不调出键盘问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论