<>

看到網上關于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目錄下

總結

以上是生活随笔為你收集整理的echarts 树图样式美化_echarts2 tree树图自定义显示缩放大小、位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。