Echarts例項教程之樹形圖表的實現方法

阿新 • • 發佈：2021-08-09

樹圖主要用來視覺化樹形資料結構，是一種特殊的層次型別。

實現方法，將series->type設定為tree。

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

正交樹：

Echarts例項教程之樹形圖表的實現方法

徑向樹：

Echarts例項教程之樹形圖表的實現方法

實現方法，修改：series->layout設定，orthogonal為正向，radial為徑向。

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

Echarts例項教程之樹形圖表的實現方法

實現方法，修改：series->orient設定，支援LR、RL、TB、BT，其中RL，就是從右向左。

可以自定義圖示：支援'circle','rect','roundRect','triangle','diamond','pin','arrow','none'

實現方法，修改：series->symbol設定

圖示是方形的樹形圖表：

Echarts例項教程之樹形圖表的實現方法

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

實現方法，修改：series->edgeShape設定，支援curve 和 polyline

直線圖表：

Echarts例項教程之樹形圖表的實現方法

initialTreeDepth：

預設展開的深度，預設為2，多於2層的的節點可以點選父節點來展示和隱藏。如果設定為-1或者null或者undefined，所有節點都將展開。

itemStyle：

修改樹形圖表項的樣式。

可以修改顏色、大小等

label：

圖表項中文字的處理。

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

lineStyle：

圖表中線的處理。

修改lineStyle樣式的效果：

Echarts例項教程之樹形圖表的實現方法

emphasis：聚焦,設定了聚焦後，滑鼠放到項，其他無關項就會暫時隱藏。

'none' 不淡出其它圖形，預設使用該配置。

'self' 只聚焦（不淡出）當前高亮的資料的圖形。

'series' 聚焦當前高亮的資料所在的系列的所有圖形。

'ancestor' 聚焦所有祖先節點

'descendant' 聚焦所有子孫節點

emphasis: {
    focus: 'ancestor',blurScope: 'coorwww.cppcns.comdinateSystem'
}

樹形圖表的資料結構：

name: 圖表項預設項顯示的名稱

children：這個項的子節點

當然，你在資料裡可以定義任意屬性，如value、num等，可以配合label中的formatter來實現更加豐富的顯示http://www.cppcns.com效果。

最後是完整的程式碼：

iwww.cppcns.comndex.html

<!DOCTYPE html>
&lwww.cppcns.comt;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例項 - 圖例</title>
    <script src="../../echarts."></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: '異常結構圖'
    },series: [{
        layout: 'orthogonal',data: [data],right: '60%',type: 'tree',edgeShape: 'polyline',// curve 和 polyline
        symbol: 'rect',// 'circle','none',initialTreeDepth: 2,itemStyle: {
            color: 'cyan'
        },lineStyle: {
            color: 'red'
        },/**
         * 
         * 
         * 'none' 不淡出其它圖形，預設使用該配置。
'self' 只聚焦（不淡出）當前高亮的資料的圖形。

'series' 聚焦當前高亮的資料所在的系列的所有圖形。

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

總結

到此這篇關於Echarts例項教程之樹形圖表實現的文章就介紹到這了,更多相關Echarts實現樹形圖表內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！