Echarts實(shí)例教程之樹(shù)形圖表的實(shí)現(xiàn)方法

更新時(shí)間：2021年08月06日 15:02:56 作者：tntxia

眾所周知echarts是一個(gè)純JavaScript的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于Echarts實(shí)例之樹(shù)形圖表的實(shí)現(xiàn)方法,需要的朋友可以參考下

樹(shù)圖主要用來(lái)可視化樹(shù)形數(shù)據(jù)結(jié)構(gòu)，是一種特殊的層次類型。

實(shí)現(xiàn)方法，將series->type設(shè)置為tree。

Echarts的樹(shù)形圖表，可以是正交的，也可以是徑向的。

正交樹(shù)：

徑向樹(shù)：

實(shí)現(xiàn)方法，修改：series->layout設(shè)置，orthogonal為正向，radial為徑向。

可以自定義，如從右向左：

實(shí)現(xiàn)方法，修改：series->orient設(shè)置，支持LR、RL、TB、BT，其中RL，就是從右向左。

可以自定義圖標(biāo)：支持'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

實(shí)現(xiàn)方法，修改：series->symbol設(shè)置

圖標(biāo)是方形的樹(shù)形圖表：

可以自定義，直線還是曲線：

實(shí)現(xiàn)方法，修改：series->edgeShape設(shè)置，支持curve 和 polyline

直線圖表：

initialTreeDepth：

默認(rèn)展開(kāi)的深度，默認(rèn)為2，多于2層的的節(jié)點(diǎn)可以點(diǎn)擊父節(jié)點(diǎn)來(lái)展示和隱藏。如果設(shè)置為 -1 或者 null 或者 undefined，所有節(jié)點(diǎn)都將展開(kāi)。

itemStyle：

修改樹(shù)形圖表項(xiàng)的樣式。

可以修改顏色、大小等

label：

圖表項(xiàng)中文字的處理。

可以通過(guò)formatter來(lái)給圖表的文字增加豐富的效果。

lineStyle：

圖表中線的處理。

修改lineStyle樣式的效果：

emphasis：聚焦,設(shè)置了聚焦后，鼠標(biāo)放到項(xiàng)，其他無(wú)關(guān)項(xiàng)就會(huì)暫時(shí)隱藏。

'none' 不淡出其它圖形，默認(rèn)使用該配置。

'self' 只聚焦（不淡出）當(dāng)前高亮的數(shù)據(jù)的圖形。

'series' 聚焦當(dāng)前高亮的數(shù)據(jù)所在的系列的所有圖形。

'ancestor' 聚焦所有祖先節(jié)點(diǎn)

'descendant' 聚焦所有子孫節(jié)點(diǎn)

emphasis: {
    focus: 'ancestor',
    blurScope: 'coordinateSystem'
}

樹(shù)形圖表的數(shù)據(jù)結(jié)構(gòu)：

name: 圖表項(xiàng)默認(rèn)項(xiàng)顯示的名稱

children：這個(gè)項(xiàng)的子節(jié)點(diǎn)

當(dāng)然，你在數(shù)據(jù)里可以定義任意屬性，如value、num等，可以配合label中的formatter來(lái)實(shí)現(xiàn)更加豐富的顯示效果。

最后是完整的代碼：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echarts實(shí)例 - 圖例</title>
    <script src="../../echarts.js"></script>
</head>

<body>
    <div id="container" style="width: 500px;height:500px;">

    </div>
    <script src="./index.js"></script>
</body>

</html>

index.js

var chart = echarts.init(document.getElementById("container"));

var data = {
    name: 'Throwable',
    children: [{
        name: 'Error',
        children: [{
            name: 'VirtualMachineError',
            children: [{
                name: 'StackOverflowError'
            }, {
                name: 'OutOfMemoryError'
            }]
        }, {
            name: 'AWTError'
        }]
    }, {
        name: 'Exception'
    }]
}


var data2 = {
    name: '龍珠人物',
    children: [{
        name: '孫悟空'
    }, {
        name: '布爾瑪'
    }, {
        name: '豬悟能'
    }, {
        name: '雅木茶'
    }, {
        name: '龜仙人'
    }, {
        name: '小林'
    }, {
        name: '短笛'
    }, {
        name: '鶴仙人'
    }, {
        name: '天津飯'
    }, {
        name: '餃子'
    }]
}

chart.setOption({
    title: {
        text: 'Java異常結(jié)構(gòu)圖'
    },
    series: [{
        layout: 'orthogonal',
        data: [data],
        right: '60%',
        type: 'tree',
        edgeShape: 'polyline', // curve 和 polyline
        symbol: 'rect', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',
        initialTreeDepth: 2,
        itemStyle: {
            color: 'cyan'
        },
        lineStyle: {
            color: 'red'
        },
        /**
         * 
         * 
         * 'none' 不淡出其它圖形，默認(rèn)使用該配置。
'self' 只聚焦（不淡出）當(dāng)前高亮的數(shù)據(jù)的圖形。

'series' 聚焦當(dāng)前高亮的數(shù)據(jù)所在的系列的所有圖形。

'ancestor' 聚焦所有祖先節(jié)點(diǎn)
'descendant' 聚焦所有子孫節(jié)點(diǎn)
         */
        emphasis: {
            focus: 'ancestor',
            blurScope: 'coordinateSystem'
        },
    }, {
        layout: 'radial',
        left: '60%',
        data: [data2],
        type: 'tree',
        symbol: 'rect',
        symbolSize: 15
    }]
})

總結(jié)

到此這篇關(guān)于Echarts實(shí)例教程之樹(shù)形圖表實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Echarts實(shí)現(xiàn)樹(shù)形圖表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: