• 问题现象

  使用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中的网页标签等字符处理

    # -*- coding: utf-8-*- import re ##过滤HTML中的标签 #将HTML中标签等信息去掉 #@param htmlstr HTML字符串. def filter_tag ...

  2. CentOS 笔记(六) 历史命令 自动补充

    history #出现历史的命令 #执行具体的一条历史命令 !458 ②安装自动补充功能 yum install -y bash-completion #输入命令 按Tab 会显示所有内容 syste ...

  3. ArcGIS中标格乱码??

    安装好ArcGIS之后导入地图层之后,显示 label 时中文乱码,但是导出数据显示正常 这是 ArcGIS 安装环境编码的问题,只需要修改一下配置文件即可 打开 cmd 命令窗口 reg add H ...

  4. 【codeforces 719E】Sasha and Array

    [题目链接]:http://codeforces.com/contest/719/problem/E [题意] 给你一个数列,有两种操作1 l r x 给[l,r]区间上的数加上x, 2 l r 询问 ...

  5. ContextLoaderListener的说明

    ContextLoaderListener是配置在web.xml里的,具体如下: <!-- ContextLoaderListener是个监听器,用来监听容器启动事件,监听到容器启动事件后 其c ...

  6. windows FTP自动下载脚本

    新建ftp.dat文件,内容如下 open xxx.xxx.xxx.xxxusernamepasswordcd    lcd x:\filesbinaryhashmget *.*bye 新建run.b ...

  7. 通达OA 小飞鱼工作流在线培训教程(一)HTML基础介绍

    应一些刚接触工作流设计朋友的要求,这里开设一个系列教程,对通达OA工作流设计相关的内容做个介绍.方便解决一些日常经常出现的问题,希望对刚刚接触这部分工作的朋友能够有些帮助. 工作流设计须要多方面的知识 ...

  8. 疯狂Java学习笔记(72)-----------大话程序猿面试

    大话程序猿面试 10个我最喜欢问程序猿的面试问题 程序猿面试不全然指南 10个经典的C语言面试基础算法及代码 程序猿的10大成功面试技巧 程序猿选择公司的8个标准 编程开发 8个值得关注的PHP安全函 ...

  9. bzoj3713: [PA2014]Iloczyn(乱搞)

    3713: [PA2014]Iloczyn 题目:传送门 题解: 随手一发水题x2 直接离线啊,斐波那契到了第五十个就炒鸡大了 代码: #include<cstdio> #include& ...

  10. php中的self关键字和this关键字的区别和联系

    php中的self关键字和this关键字的区别和联系 面向对象编程(OOP,Object OrientedProgramming)现已经成为编程人员的一项基本技能.利用OOP的思想进行PHP的高级编程 ...