<>

看到網(wǎng)上關(guān)于echarts tree的資料有點(diǎn)少，做項(xiàng)目恰巧遇到這個(gè)，把一些獲得分享給大家。

從echarts、官方API中我們似乎只能定義根節(jié)點(diǎn)的位置，并不能指定樹圖整體的大小以及其整體在dom顯示的位置，在tree生成過程中只是以根節(jié)點(diǎn)向下方左右兩邊擴(kuò)展。從echarts官網(wǎng)提供的API我們可以知道var chart = echarts.init(dom); chart.getZrender();獲取其封裝的canvas庫ZRender實(shí)例，通過調(diào)整這個(gè)實(shí)例來干預(yù)其基層模塊自定義其顯示。

下面為大家分享我的實(shí)現(xiàn)自定義顯示tree整體效果的過程，由于中間測(cè)試數(shù)據(jù)占的行數(shù)太多，我就不整個(gè)貼出來源碼了，進(jìn)提供關(guān)鍵部分的代碼及說明。想要完整代碼的朋友可以下載附件。(由于是項(xiàng)目中的設(shè)計(jì)抽取出來經(jīng)過修改來分享的，有些實(shí)現(xiàn)部分可能看起來怪怪的，大家見諒，看關(guān)鍵部分就ok了)

依舊是貼出關(guān)鍵點(diǎn)，源碼請(qǐng)至下方github地址下載：

var myGlobalTreeChart;

var?treeNodePadding?=?50;?//節(jié)點(diǎn)間最小間隔

var?treeTopPadding?=?120;?//tree距頂端的距離

var rightNode;//最右側(cè)節(jié)點(diǎn),用于計(jì)算偏移量

//構(gòu)建tree

function?doGlobalTreeChart(ec,data)?{

myGlobalTreeChart.setOption(getGlobalTreeOption());

//生成圖表后做調(diào)整

adjustTreeView();

}

//調(diào)整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 ]; //前兩個(gè)為縮放大小，后兩個(gè)為縮放原點(diǎn)

zr.painter._layers[1].position = [rightOffset, treeTopPadding ]; //偏移量

myGlobalTreeChart.refresh();

}

//計(jì)算最左邊節(jié)點(diǎn)和最右邊節(jié)點(diǎn)(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;

}

調(diào)整前，由于tree過大顯示以根節(jié)點(diǎn)為中心的部分(測(cè)試數(shù)據(jù)，最底層節(jié)點(diǎn)顯示不要在意)

調(diào)整后，根據(jù)最左側(cè)和最右側(cè)節(jié)點(diǎn)坐標(biāo)調(diào)整至居中顯示

完整源碼：https://github.com/hzhqk/echarts.git下的dynamic echarts tree目錄下

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。