echart树图设置层级距离_Echarts - 树图实现四个层级

我相信很多人和我一样，制作echats图标时，都会先去demo官网找相同的或者近似的效果，然后再此基础上改进成我们想要的那个。

但是近期混迹某微信群时，我看到一个群友抛出问题说，echarts画树状图，自己有四层数据，但是只有三层渲染出来了。

我跟他说你去ecahrts官网找个四级的。我记得有的。

他说官网的也只有三层，还截图给我看，

果然还是被我找到了：

数据太多，勉强观看。

我甚至还能搞成五层

不卖关子。其实我也是直接在官网找的demo，只不过不是她找的那么直观的demo，只不过做了小小的修改：

纵观官网这几个demo ，如果要他的从左向右的树状图的话，都是三级的。

不过漏掉了一个，左下角这个径向图。他其实是四级的啊。

如果找到他四级的秘密或者说直接将其变成树状图，那不就大功告成！

而我的实现也确实如此：

第一种是直接将其变成树图

第二种是利用其四级的秘密，直接修改树图的层级。

首先说第一种，我将径向图改成正常的树图。因为径向图就是从树图改编而来，再将其变回原型不是什么难事，只需要一个属性的修改：

正交还是径向，一键配置，随心所欲。

打开官网径向图的demo配置，可以看到layout处的设置正是radial。我直接将其改成了default，然后就变成了上图四级树图的效果。很easy。

然后说第二种方法，不装*的说，我也是无意看到的，一个让我眼前发亮的单词：initialTreeDepth

Tree：数、Depth：深度。。。

难道？。。。

没错，就是层级，正儿八经的介绍如下：

哈哈，一不小心触碰机关，找到了升级的秘密。

看来平时多掌握点中国式英语也很有用啊！

另外我只想说，重在实践。

前端的东西，是写一下代码就能看到效果的。因此上手、接受起来相对比较迅速。这也是我喜欢他的地方吧。

echart树图设置层级距离_Echarts - 树图实现四个层级相关推荐

echart树图设置层级距离_echarts的树形结构图及参数
官网代码: myChart.showLoading(); //显示Loading标志: var myChart = echarts.init(document.getElementById('页面中d ...
html语言中行距如何设定,html怎么设置行间距离
html怎么设置行间距离在html中很多人知道如何调解网站的行距,因为默认的行距给人的视觉是非常紧凑的',文章多了就造成不容易阅读.那么,html怎么设置行间距离?下面就由小编给大家介绍介绍吧,希望 ...
【数据处理】Python，matplotlib 如何画柱状图？如何画各种类型的柱状图？柱子宽度设置；设置X轴刻度用label显示；设置柱子距离x轴的高度；设置柱体颜色；设置柱体描边；并列、多条柱状图
Base python matlibplot库-- 一.主要参数介绍: bar(left, height, width=0.8, bottom=None, **kwargs) left为和分类数量一致 ...
三菱FX5U，机床X轴Y轴工作台定位控制程序全部使用两轴直线插补有自动定位，手动定位！手动控制有，点动一次按钮每次走设置的距离
三菱FX5U,机床X轴Y轴工作台定位控制程序!使用三菱J4-A系列伺服驱动器绝对位置系统,程序大小27000多步 1.本程序最多可做20个定位工序,全部使用两轴直线插补! 2.有自动定位,手动定位!手 ...
php递归实现层级树状展开,PHP递归实现层级树状展开，php递归层级树状_PHP教程...
PHP递归实现层级树状展开,php递归层级树状本文实例为大家分享了PHP递归实现层级树状展开的主要代码,供大家参考,具体内容如下效果图: 实现代码: $arr['id'], 'fid' => ...
w7计算机防火墙无法更改,win7系统提示防火墙无法更改某些设置错误代码0x8007437的原因及四种解决方法...
win7系统提示"防火墙无法更改某些设置,错误代码0x8007437",这该怎么办呢?下面脚本之家的小编就带来win7系统提示防火墙无法更改某些设置错误代码0x8007437的原因 ...
云队友丨追求复利人生，升级思维模型的四个层级
图为成甲在混沌大学授课文 | 成甲混沌大学<升级思维模型,追求复利人生>课程主理人.<好好学习>.<好好思考>作者编辑 | 混沌大学商业研究团队本文节选自成甲 ...
echart树图设置层级距离_echarts2 tree树图自定义显示缩放大小、位置
<> 看到网上关于echarts tree的资料有点少,做项目恰巧遇到这个,把一些获得分享给大家. 从echarts.官方API中我们似乎只能定义根节点的位置,并不能指定树图整体的大小以及 ...
echarts tree默认展开_Echarts树图定制详解
本文讲的是如何定制Echarts的tree图.主要包括下载.全局变量名修改.左键菜单添加.右键菜单添加.内容缩放.文本过滤高亮等. 一说明 Echarts中提供了tree图,但实际项目中,该tree ...

echart树图设置层级距离_Echarts - 树图实现四个层级

echart树图设置层级距离_Echarts - 树图实现四个层级相关推荐

最新文章

热门文章