• 问题现象

  使用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. python 操作jenkins 常用api

    Python-Jenkins 继续寻找,然后我在Jenkins官网上找到了Python-Jenkins API,仔细阅读后发现,它几乎涵盖了大部分Jenkins的操作,大大方便了我们在后台进行对Jen ...

  2. UVA1586 - Molar mass(紫书习题3.2)

    HJL是一个从不讽刺人的品学兼优的好孩子,她最近沉迷学习化学而不能自拔.然而计算一个分子的相对分子质量使她烦不胜烦,因此她决定请你写一个程序来帮助她计算这种麻烦的事情. 已知: ①C代表的碳元素的相对 ...

  3. 深入了解Spring中的容器

    1.创建Bean的3种方式 1.1使用构造器创建bean实例 这是最常见的方式,如果不采用构造注入,bean类需要有默认构造函数.如果采用构造注入,则需要配置xml文件的<constructor ...

  4. 03springMVC注解式控制器开发

    注解式控制器开发简介 注解式控制器开发HelloWorld HelloWorld的运行流程 处理器定义 REST简介 URL路径映射 数据绑定 不同的Model有相同的属性的处理 静态资源的处理 1  ...

  5. 工具类Util类的注释书写规范

    package com.paic.pacz.core.salesmanage.util; import java.util.List; import org.apache.commons.beanut ...

  6. POJ 3301

    开始就是瞄着三分来做的,但看题目,感觉是旋转卡壳吧..可是,用了旋转卡壳还三分条毛啊.. 可以令正方形不旋转,而改为令点绕原点旋转,这样,很好的解决了问题,就可以比较X轴最大长度和Y轴最大长度来确定正 ...

  7. ARP协议(3)ARP编程--winpcap&amp;vs2012配置

    好.之前说了那么多.最终到了,我们能够操刀的时候了. 在对ARP协议编程前.我们必需要能控制网络适配器(网卡).这个部分就是驱动! "我们要编写网卡驱动?",对,可是,至少我们现阶 ...

  8. iframe是否缓存页面探究

    近期手里有个项目须要用iframe来调用每天都会变化的页面,后来想到iframe会不会缓存页面呢.于是写了个demo论证了下,结果例如以下: iframe的src假设是静态页面,就有可能会缓存.由于静 ...

  9. phpmyadmin客户端多服务器配置

    修改libraries/config.default.php 545行,添加 $cfg['Servers']['2'] = $cfg['Servers'][$i];$cfg['Servers']['2 ...

  10. Oracle 查看锁定表用户的SQL

    #描述:当执行如下SQL select * From XXX for Updata 发现表“XXX”被锁定 #只需要执行如下SQL 查看锁定该表的用户 SELECT object_name, mach ...