echart树图设置层级距离_echarts2 tree树图自定义显示缩放大小、位置

<>

看到网上关于echarts tree的资料有点少，做项目恰巧遇到这个，把一些获得分享给大家。

从echarts、官方API中我们似乎只能定义根节点的位置，并不能指定树图整体的大小以及其整体在dom显示的位置，在tree生成过程中只是以根节点向下方左右两边扩展。从echarts官网提供的API我们可以知道var chart = echarts.init(dom); chart.getZrender();获取其封装的canvas库ZRender实例，通过调整这个实例来干预其基层模块自定义其显示。

下面为大家分享我的实现自定义显示tree整体效果的过程，由于中间测试数据占的行数太多，我就不整个贴出来源码了，进提供关键部分的代码及说明。想要完整代码的朋友可以下载附件。(由于是项目中的设计抽取出来经过修改来分享的，有些实现部分可能看起来怪怪的，大家见谅，看关键部分就ok了)

依旧是贴出关键点，源码请至下方github地址下载：

var myGlobalTreeChart;

var treeNodePadding = 50; //节点间最小间隔

var treeTopPadding = 120; //tree距顶端的距离

var rightNode;//最右侧节点,用于计算偏移量

//构建tree

function doGlobalTreeChart(ec,data) {

myGlobalTreeChart.setOption(getGlobalTreeOption());

//生成图表后做调整

adjustTreeView();

}

//调整tree显示

function adjustTr