<<博客迁移，来自我的51cto博客http://11095961.blog.51cto.com/11085961/1954989>>
看到网上关于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 adjustTreeView() {
var zr = myGlobalTreeChart.getZrender();
var domWidth = zr.painter.getWidth();
var treeWidth = getTreeWidth(zr);
if (treeWidth <= domWidth)
return;
var adjustSize = domWidth / treeWidth * 0.95; //多缩小0.05不至于完全充盈dom
var lastNodeX = rightNode.style.x * adjustSize;
var rightOffset = (domWidth - lastNodeX) - (domWidth - treeWidth * adjustSize)/2; //尽可能的让其居中
zr.painter._layers[1].scale = [ adjustSize, adjustSize, 0, 0 ]; //前两个为缩放大小，后两个为缩放原点
zr.painter._layers[1].position = [rightOffset, treeTopPadding ]; //偏移量
myGlobalTreeChart.refresh();
}
//计算最左边节点和最右边节点（symbol为image或icon）的间隔即为树图宽度
function getTreeWidth(zr) {
var nodes = zr.storage._roots;
var max = 0;
var min = 0;
for(var i=0; i < nodes.length; i++){
if(nodes[i].type == 'image' || nodes[i].type == 'icon'){
var nodeX = nodes[i].style.x;
if(nodeX > max){
max = nodeX;
rightNode = nodes[i];
continue;
}
if(nodeX < min){
min = nodeX;
}
}
}
return max - min;
}
调整前，由于tree过大显示以根节点为中心的部分（测试数据，最底层节点显示不要在意）
调整后，根据最左侧和最右侧节点坐标调整至居中显示
完整源码：https://github.com/hzhqk/echarts.git下的dynamic echarts tree目录下
网友评论