• 问题现象

  使用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. JTextArea+JScrollPane滚动条自动在最下边(转帖)

    这是我制作五子棋的过程中遇到的问题,在网上搜了好几种答案,分别列在下面了.不过感觉第一种相当方便.用得简洁,爽! 1. 利用JTextArea的selectAll();方法在添加信息之后强制将光标移动 ...

  2. XSS Chanllenges 11-15

    Stage #11 根据提示,发现正则匹配,过滤掉了很多关键字 除on 事件和script 事件外,能执行js 代码的还有a 标签构造的超链接 构造 "><a href=java ...

  3. 把Dev的excel表格用clientdataset保存到数据库中。

    网上很多,如何把图片.word.excel等保存到数据库中.可是自己就是死活出现异常,百思不得其解.原因找到了,为什么没有去弄明白: 在sql server字段类型中,我把存储字段设成binary,结 ...

  4. redis 模拟搭建集群

    一.本文是在一台 linux 系统上,模拟搭建 redis 集群.3 台主机,3 台从机. 二.redis 安装步骤 http://www.cnblogs.com/fangwu/p/8602357.h ...

  5. 详解Mysql分布式事务XA(跨数据库事务)

    详解Mysql分布式事务XA(跨数据库事务) 学习了:http://blog.csdn.net/soonfly/article/details/70677138 mysql执行XA事物的时候,mysq ...

  6. Hdu 4280 Island Transport(最大流)

    Island Transport Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  7. ZooKeeper分布式集群部署及问题

    ZooKeeper为分布式应用系统提供了高性能服务,在许多常见的集群服务中被广泛使用,最常见的当属HBase集群了,其他的还有Solr集群.Hadoop-2中的HA自己主动故障转移等. 本文主要介绍了 ...

  8. 分享:Android系统的经常使用权限整理

    1.ACCES_NETWORK_STATE      同意应用程序获取网络状态信息的权限 2.ACCESS_WIFI_STATE          同意应用程序获取Wi-Fi网络状态的权限 3.BAT ...

  9. 2015.04.19,外语,读书笔记-《Word Power Made Easy》 11 “如何辱骂敌人” SESSION 29

    1.the French drillmaster 法国国王路易十五手下的Jean Martinet将军,是Infantry(['infәntri] n. 步兵)的检察长,是一个非常严格的drillma ...

  10. yarn架构——本质上是在做解耦 将资源分配和应用程序状态监控两个功能职责分离为RM和AM

    Hadoop YARN架构解读 原Mapreduce架构 原理架构图如下: 图 1.Hadoop 原 MapReduce 架构 原 MapReduce 程序的流程:首先用户程序 (JobClient) ...