• 问题现象

  使用ECharts树图,在数据维度大,节点过多时,所看到的内容会重叠交错,无法查看。

  • 原因

  在给定ECharts树图容器尺寸后,无论数据多么庞大或者稀少,数据始终会尝试在给定容器内撑满、全部显示。

  • 处理
var container = document.getElementById('chart-panel');
myChart.on('click', function (params) {
if (params.componentType === 'series') {
// 点击到了 series 上
if (!params.value) {
// 点击的节点有子分支(可点开)
var elesArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls));
var height = 200; // 这里限制最小高
var currentHeight = 10 * (elesArr.length - 1) || 10; // 每项10px
var newHeight = Math.max(currentHeight, height);
container.style.height = newHeight + 'px';
myChart.resize();
}
}
});

  每次点击展开或者收缩,都会为ECharts树图重新给定一个高度,以此来实现高度自适应。

ECharts树图节点过多时取消缩放,调整容器高度自适应内容变化的更多相关文章

  1. echarts踩坑---容器高度自适应

    在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题. 具体解决办法如下: <d ...

  2. Echarts树图定制详解

    本文讲的是如何定制Echarts的tree图.主要包括下载.全局变量名修改.左键菜单添加.右键菜单添加.内容缩放.文本过滤高亮等. 一 说明 Echarts中提供了tree图,但实际项目中,该tree ...

  3. Echarts一个页面加载多个图表及图表自适应

    Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...

  4. 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

    □ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...

  5. 动态调整UITableViewCell高度的实现方法

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...

  6. 取消设置透明状态栏,使 ContentView 内容不再覆盖状态栏

    取消设置透明状态栏,使 ContentView 内容不再覆盖状态栏,在MainActivity中添加以下代码: getWindow().clearFlags(WindowManager.LayoutP ...

  7. 让tableView的高度等于contentSize的高度、动态调整tableView的高度、tableView的高度自适应布局

    文章概要: 1.简介下,tableView中的内容如何高度自适应的布局 2.如何做到让tableView的高度动态调整 还是看图作文吧- 首先,tableView的高度就是用户能够看见里面更大世界的那 ...

  8. echarts 树图

    1 事件:事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用, ...

  9. 如何实现echarts组织结构图节点的收缩

    echarts本身没有组织结构图的节点收缩功能,因为项目需求要用到此功能. 引入的echarts必须是2版本的,因为3.0取消了对组织结构图的支持.下载2版本的源码,找到关于onclick事件那部分的 ...

随机推荐

  1. 实验二:编写输出"Hello World!"

    1.首先打开eclipse这个软件,新建Java项目,执行“文件→ 新建→Java项目 ”菜单命令,打开新建Java对话框,在项目名的编辑框中输入项目名编写输出"Hello World!”, ...

  2. grep的各种用法

    1. 在文件中查找模式(单词) 在/etc/passwd文件中查找单词 root [root@localhost opt]# grep root /etc/passwdroot:x:0:0:root: ...

  3. XML文件基础

      https://c3d.club/xml/basic/2018/12/27/xml-file-base.html 1.文件头 XML文件头有XML声明与DTD文件类型声明组成.其中DTD文件类型声 ...

  4. rabbitMQ学习笔记(三) 消息确认与公平调度消费者

    从本节开始称Sender为生产者 , Recv为消费者   一.消息确认 为了确保消息一定被消费者处理,rabbitMQ提供了消息确认功能,就是在消费者处理完任务之后,就给服务器一个回馈,服务器就会将 ...

  5. HDU 1042 N!【大数】

    N! Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Total Subm ...

  6. [HTML 5] aria-live

    "aria-live" is a method to tell the information to the screen reader once value changed. a ...

  7. 多校第二场 1004 hdu 5303 Delicious Apples(背包+贪心)

    题目链接: 点击打开链接 题目大意: 在一个周长为L的环上.给出n棵苹果树.苹果树的位置是xi,苹果树是ai,苹果商店在0位置,人的篮子最大容量为k,问最少做多远的距离可以把苹果都运到店里 题目分析: ...

  8. 【机房重构】—上机&amp;订餐

    前几天通过UML图中的时序图.让我对于机房重构中的每一条线理解的更加清晰.曾经认为上机特别的乱,在一次偶遇中,得知了原来它能够转化成我们平时订餐.以下就听我说一说上机&订餐的故事吧! 又是发生 ...

  9. MapReduce编程之倒排索引

    任务要求: //输入文件格式 18661629496 110 13107702446 110 1234567 120 2345678 120 987654 110 2897839274 1866162 ...

  10. java应用集锦9:httpclient4.2.2的几个常用方法,登录之后访问页面问题,下载文件

    转账注明出处:http://renjie120.iteye.com/blog/1727933 在工作中要用到android,然后进行网络请求的时候,打算使用httpClient. 总结一下httpCl ...