• 问题现象

  使用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. Codeforces 789A Anastasia and pebbles( 水 )

    链接:传送门 题意:这个人每次都去公园捡石子,她有两个口袋,每个口袋最多装 k 个石子,公园有 n 种石子,每种石子 w[i] 个,询问最少几天能将石子全部捡完 思路:排个序,尽量每天都多装,如果 k ...

  2. Linux磁盘分区--GPT分区

    MBR分区表有一定的局限性,最大支持2.1tb硬盘,单块硬盘最多4个主分区. 这里就要引入GPT分区表,可以支持最大18EB的卷,最多支持128个主分区,所以如果使用大于2tb的卷,就必须使用GTP分 ...

  3. 运行级别(init)

    一.运行级别(查看:cat /etc/inittab) 级别: 0:关机 1:服务器出问题(单用户状态) 2:无NFS的多用户模式 3:完整的多用户模式 4:无保留无使用 5:桌面模式 6:重新启动 ...

  4. 【ACM-ICPC 2018 南京赛区网络预赛 I】Skr

    [链接] 我是链接,点我呀:) [题意] 让你把一个字符串的所有回文子串加起来.(当做数字加起来) 求他们的和. [题解] 回文树. 从两个根节点分别遍历整棵回文树. 按照每个节点的定义. 得到每个节 ...

  5. ZOJ 3888 Twelves Monkeys

    Twelves Monkeys Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...

  6. java使用Thumbnailator处理图片

    Thumbnailator是一款不可多得的处理图片的第三方工具包,它写法简单到让人无法相信,Java本身也有处理图片压缩的方法,但是代码冗长到让人痛不欲生,在篇末会给出Java本身的实现方式,做下对比 ...

  7. 关于idea控制台乱码问题

    乱码是常有的事儿,改一下也就两分钟......不多说看图: 上图中的勾选项一定不要忘记,它可以隐藏你项目中encoding设置. 在上图两个文件中加入 -Dfile.encoding=UTF-8 在上 ...

  8. win7下virtualbox遇到的问题

    问题1:无法创建unbuntu 64bit 虚拟机           安装完virtualbox后,新建虚拟机.类型选择为Linux时,版本下拉选项只有ubuntu 32bit,无ubuntu 64 ...

  9. HDU 4345

    细心点想,就明白了,题目是求和为N的各数的最小公倍数的种数.其实就是求N以内的各素数的不同的组合(包含他们的次方),当然,是不能超过N的.用Dp能解决.和背包差不多. #include <ios ...

  10. 6.设置ListView的Item的高度无效

    问题: 设置ListView的Item的高度无效. 解决方式: 设置ListView的Item的minHeight属性.