echarts-树图实现四个层级
我相信很多⼈和我⼀样，制作echats图标时，都会先去demo官⽹相同的或者近似的效果，然后再此基础上改进成我们想要的那个。
但是近期混迹某时，我看到⼀个友抛出问题说，echarts画树状图，⾃⼰有四层数据，但是只有三层渲染出来了。
我跟他说你去ecahrts官⽹个四级的。我记得有的。
他说官⽹的也只有三层，还截图给我看，
果然还是被我到了：
setoption数据太多，勉强观看。
我甚⾄还能搞成五层
不卖关⼦。其实我也是直接在官⽹的demo，只不过不是她的那么直观的demo，只不过做了⼩⼩的修改：
纵观官⽹这⼏个demo ，如果要他的从左向右的树状图的话，都是三级的。
不过漏掉了⼀个，左下⾓这个径向图。他其实是四级的啊。
如果到他四级的秘密或者说直接将其变成树状图，那不就⼤功告成！
⽽我的实现也确实如此：
第⼀种是直接将其变成树图
第⼆种是利⽤其四级的秘密，直接修改树图的层级。
⾸先说第⼀种，我将径向图改成正常的树图。因为径向图就是从树图改编⽽来，再将其变回原型不是什么难事，只需要⼀个属性的修改：
正交还是径向，⼀键配置，随⼼所欲。
打开官⽹径向图的demo配置，可以看到layout处的设置正是radial。我直接将其改成了default，然后就变成了上图四级树图的效果。很easy。
然后说第⼆种⽅法，不装*的说，我也是⽆意看到的，⼀个让我眼前发亮的单词：initialTreeDepth
Tree：树、Depth：深度。。。
难道？。。。
没错，就是层级，正⼉⼋经的介绍如下：
哈哈，⼀不⼩⼼触碰机关，到了升级的秘密。
看来平时多掌握点中国式英语也很有⽤啊！
另外我只想说，重在实践。
前端的东西，是写⼀下代码就能看到效果的。因此上⼿、接受起来相对⽐较迅速。这也是我喜欢他的地⽅吧。
上边五层的效果是直接改了实现的，如下：
myChart.showLoading();
$.get(ROOT_PATH + 'data/asset/data/flare.json', function (data) {
myChart.hideLoading();
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [data],
top: '18%',
bottom: '14%',
/
/ layout: 'radial',
symbol: 'emptyCircle',
symbolSize: 7,
initialTreeDepth: 5,
animationDurationUpdate: 750            }
]
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。