ECharts树图节点过多时取消缩放,调整容器高度自适应内容变化
- 问题现象
使用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树图节点过多时取消缩放,调整容器高度自适应内容变化的更多相关文章
- echarts踩坑---容器高度自适应
在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题. 具体解决办法如下: <d ...
- Echarts树图定制详解
本文讲的是如何定制Echarts的tree图.主要包括下载.全局变量名修改.左键菜单添加.右键菜单添加.内容缩放.文本过滤高亮等. 一 说明 Echarts中提供了tree图,但实际项目中,该tree ...
- Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
- 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度
□ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...
- 动态调整UITableViewCell高度的实现方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...
- 取消设置透明状态栏,使 ContentView 内容不再覆盖状态栏
取消设置透明状态栏,使 ContentView 内容不再覆盖状态栏,在MainActivity中添加以下代码: getWindow().clearFlags(WindowManager.LayoutP ...
- 让tableView的高度等于contentSize的高度、动态调整tableView的高度、tableView的高度自适应布局
文章概要: 1.简介下,tableView中的内容如何高度自适应的布局 2.如何做到让tableView的高度动态调整 还是看图作文吧- 首先,tableView的高度就是用户能够看见里面更大世界的那 ...
- echarts 树图
1 事件:事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用, ...
- 如何实现echarts组织结构图节点的收缩
echarts本身没有组织结构图的节点收缩功能,因为项目需求要用到此功能. 引入的echarts必须是2版本的,因为3.0取消了对组织结构图的支持.下载2版本的源码,找到关于onclick事件那部分的 ...
随机推荐
- nyoj27-水池数目【DFS】
题目描述: 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处是否是水池,现在,你的任务来了,请用计算机算出该地图中共有几个水 ...
- jsp js action之间传值
1.struts2 action如何向JSP的JS函数传值 action中定义变量 public class TestAction extends ActionSupport implements S ...
- Virtual address cache memory, processor and multiprocessor
An embodiment provides a virtual address cache memory including: a TLB virtual page memory configure ...
- BA-强强联手江森自控携手日立空调(转载)
文章出处:http://www.aircon.com.cn 2014年1月6日 艾肯空调制冷网 江森真是非常擅长资本运作,也对技术前沿定义的很明白,快速获得技术靠资本也考内力,内化后就开始市场 ...
- Ubuntu16.04编译cmake源码
编译版本:cmake-3.8.0-rc2 为了能够编译出ccmake和cmake-gui,首先需要安装libncurses5-dev sudo apt install libncurses5-dev ...
- 11 个 Visual Studio 代码性能分析工具
软件开发中的性能优化对程序员来说是一个非常重要的问题.一个小问题可能成为一个大的系统的瓶颈.但是对于程序员来说,通过自身去优化代码是十分困难的.幸运的是,有一些非常棒的工具可以帮助程序员进行代码分析和 ...
- NYOJ 589 糖果
糖果 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 topcoder工作室的PIAOYIi超级爱吃糖果.如今他拥有一大堆不同种类的糖果.他准备一口气把它们吃完.但是 ...
- Android学习笔记之ProgressBar案例分析
(1) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...
- Java 零基础跑起第一个程序
Java 零基础跑起第一个程序 一 概述 1 java代码编译 编译后才干在计算机中执行.编译就是把人能看懂的代码转换成机器能看懂的形式 2 java的长处 一次编译.到处执行.由于java代码是在 ...
- log4j日志存储到数据库
一.前提条件 系统必须是使用LOG4J进行日志管理,否则方法无效. 系统必须包含commons-logging-xxx.jar,log4j-xxx.jar这两个JAR包,XXX为版本号. 二.操作步骤 ...