用Echarts Tree轻松实现数据可视化展示

发布时间：2023-05-17

一、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：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.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不失为一种优秀的选择。

推荐文章