echarts2 tree樹圖自定義顯示縮放大小、位置

<<部落格遷移，來自我的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目錄下