Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表

發(fā)布時(shí)間：2021-08-06 17:31:00 來源：億速云閱讀：1088 作者：Leah 欄目：開發(fā)技術(shù)

Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

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

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

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

正交樹：

Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表

徑向樹：

Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表

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

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

Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表

實(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)是方形的樹形圖表：

Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表

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

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

直線圖表：

Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表

initialTreeDepth：

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

itemStyle：

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

可以修改顏色、大小等

label：

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

可以通過formatter來給圖表的文字增加豐富的效果。

lineStyle：

圖表中線的處理。

修改lineStyle樣式的效果：

Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表

emphasis：聚焦,設(shè)置了聚焦后，鼠標(biāo)放到項(xiàng)，其他無關(guān)項(xiàng)就會暫時(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ù)據(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來實(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" >

    </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
    }]
})

關(guān)于Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細(xì)節(jié)

Echarts中怎么實(shí)現(xiàn)一個(gè)樹形圖表

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽