用Echarts Tree輕鬆實現數據可視化展示

一、Echarts Tree的概述

Echarts是一個生動、兼容性強並且提供豐富圖表類型的JavaScript圖表庫。它適用於Web端開發，並可在移動端使用。它支持動態數據更新，既有豐富的擴展插件，又有支持多圖表之間的聯動效果，可以作為數據可視化的強有力工具。其中Tree（樹圖）是Echarts中的一種圖表類型，它主要用於表達有根節點的樹形結構數據。通過瀏覽器中樹形結構的可視化，可以更好的理解樹型結構的信息內容。

二、製作Echarts Tree

要製作Echarts Tree，需要先準備好一份數據，該數據需要符合樹型結構的數據要求，這裡以一個包含人員層級關係的數據為例：

/*
數據結構類似如下
{
    "name": "XXX",
    "children": [
        {
            "name": "XXX",
            "children": [...]
        },
        ...
    ]
}
*/
const data = {
    "name": "大BOSS",
    "children": [
        {
            "name": "副BOSS1",
            "children": [
                {"name": "員工1"},
                {"name": "員工2"}
            ]
        },
        {
            "name": "副BOSS2",
            "children": [
                {"name": "員工3"},
                {"name": "員工4"},
                {"name": "員工5"}
            ]
        }
    ]
 };

以上數據表示一個公司的組織結構，使用Echarts Tree的圖表形式可以構建出高效且生動的組織結構展示圖。接下來就要用到Echarts庫中的Tree組件了。我們先引入Echarts所需要的JS和CSS：

接下來請看下面代碼示例，來了解Tree組件的實現過程：

let myChart = echarts.init(document.getElementById('myChart'));

let option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series: [
        {
            type: 'tree',   // 樹形結構
            data: [data],   // 提供樹型數據
            left: '2%',
            right: '2%',
            top: '8%',
            bottom: '20%',
            symbolSize: 7,      // 圖形大小調整
            label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 15
            },
            itemStyle: {
                borderColor: '#00bfff',
                borderWidth: 2,
                shadowColor: '#00bfff',
                shadowBlur: 10
            },
            lineStyle: {
                color: '#00bfff',
                curveness: 0.5 // 線條的弧度
            }
        }
    ]
};
myChart.setOption(option);

這段代碼就可以生成一個組織結構樹形結構圖，它主要實現了ECharts Tree組件的配置。tooplit用於懸浮在圖表上時，顯示提示的內容。data提供了該組織結構形態的數據。left/right/top/bottom設置的就是圖表的位置大小。symbolSize針對每個圖形的框架大小。itemStyle可以設置各個圖形框架的樣式，也可以設置影子。LineStyle設置是關於連線的樣式和顏色，有curveness屬性可以調整線條的弧度。

三、應用場景

ECharts Tree可以應用於很多場景，如組織架構圖、譜系關係圖、類目關係圖等。下面以組織架構圖為例，展示如何使用ECharts的Tree組件展現企業的各部門與員工。假設有以下JSON數據：

const mydata = {
    "name": "騰訊",
    "children": [
        {
            "name": "GUANGZHOU",
            "children": [
                {
                    "name": "CBG",
                    "children": [
                        {"name": "王者榮耀-QC組"},
                        {"name": "QQ音樂-QC組"},
                        {"name": "QQ郵箱-QC組"}
                    ]
                },
                {
                    "name": "CDG",
                    "children": [
                        {"name": "手游APP部門"},
                        {"name": "微信支付部門"},
                        {"name": "騰訊新聞部門"}
                    ]
                },
                {"name": "CHEGHAI"},
                {"name": "COLPG"}
            ]
        },
        {
            "name": "BEIJING",
            "children": [
                {
                    "name": "WXG",
                    "children": [
                        {"name": "微信開放平台部門"},
                        {"name": "微信搜索部門"}
                    ]
                },
                {
                    "name": "CSAIR",
                    "children": [
                        {"name": "雄安新區項目部門"},
                        {"name": "5G技術研發部門"}
                    ]
                },
                {"name": "WANGJING"}
            ]
        },
        {
            "name": "SHENZHEN",
            "children": [
                {
                    "name": "TENCENT AMERICA",
                    "children": [
                        {"name": "騰訊雲部門"},
                        {"name": "we遊戲部門"}
                    ]
                },
                {
                    "name": "TENCENT EUROPE",
                    "children": [
                        {"name": "財務部門"},
                        {"name": "人力資源部門"}
                    ]
                }
            ]
        }
    ]
}

可以通過以下代碼來實現組織架構圖的繪製：

let myChart = echarts.init(document.getElementById('myChart'));

myChart.setOption({
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series: [{
        type: 'tree',
        data: [mydata],
        left: '2%',
        right: '2%',
        top: '8%',
        bottom: '20%',
        symbolSize: 7,
        label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 15
        },
        itemStyle: {
            borderColor: '#00bfff',
            borderWidth: 2,
            shadowColor: '#00bfff',
            shadowBlur: 10
        },
        lineStyle: {
            color: '#00bfff',
            curveness: 0.5
        }
    }]
});

通過以上代碼，就可以繪製出一個美觀、直觀的組織架構圖。

四、總結

本文對Echarts Tree進行了詳細的介紹。首先，我們了解了ECharts Tree組件的概況，並在實現的過程中，深入了解了各項基本配置的細節，最後，我們以組織架構圖為例，說明了Echarts Tree的應用場景。Echarts Tree提供了一個高效、生動的數據展現方式，如果想要讓數據在瀏覽器中可視化，那麼Echarts Tree不失為一種優秀的選擇。