用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不失为一种优秀的选择。

原创文章,作者:NPPQY,如若转载,请注明出处:https://www.506064.com/n/317213.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
NPPQY的头像NPPQY
上一篇 2025-01-11 16:27
下一篇 2025-01-11 16:27

相关推荐

  • Python读取CSV数据画散点图

    本文将从以下方面详细阐述Python读取CSV文件并画出散点图的方法: 一、CSV文件介绍 CSV(Comma-Separated Values)即逗号分隔值,是一种存储表格数据的…

    编程 2025-04-29
  • Python中读入csv文件数据的方法用法介绍

    csv是一种常见的数据格式,通常用于存储小型数据集。Python作为一种广泛流行的编程语言,内置了许多操作csv文件的库。本文将从多个方面详细介绍Python读入csv文件的方法。…

    编程 2025-04-29
  • 如何用Python统计列表中各数据的方差和标准差

    本文将从多个方面阐述如何使用Python统计列表中各数据的方差和标准差, 并给出详细的代码示例。 一、什么是方差和标准差 方差是衡量数据变异程度的统计指标,它是每个数据值和该数据值…

    编程 2025-04-29
  • Python多线程读取数据

    本文将详细介绍多线程读取数据在Python中的实现方法以及相关知识点。 一、线程和多线程 线程是操作系统调度的最小单位。单线程程序只有一个线程,按照程序从上到下的顺序逐行执行。而多…

    编程 2025-04-29
  • Python两张表数据匹配

    本篇文章将详细阐述如何使用Python将两张表格中的数据匹配。以下是具体的解决方法。 一、数据匹配的概念 在生活和工作中,我们常常需要对多组数据进行比对和匹配。在数据量较小的情况下…

    编程 2025-04-29
  • Python爬取公交数据

    本文将从以下几个方面详细阐述python爬取公交数据的方法: 一、准备工作 1、安装相关库 import requests from bs4 import BeautifulSou…

    编程 2025-04-29
  • Python数据标准差标准化

    本文将为大家详细讲述Python中的数据标准差标准化,以及涉及到的相关知识。 一、什么是数据标准差标准化 数据标准差标准化是数据处理中的一种方法,通过对数据进行标准差标准化可以将不…

    编程 2025-04-29
  • 如何使用Python读取CSV数据

    在数据分析、数据挖掘和机器学习等领域,CSV文件是一种非常常见的文件格式。Python作为一种广泛使用的编程语言,也提供了方便易用的CSV读取库。本文将介绍如何使用Python读取…

    编程 2025-04-29
  • Python如何打乱数据集

    本文将从多个方面详细阐述Python打乱数据集的方法。 一、shuffle函数原理 shuffle函数是Python中的一个内置函数,主要作用是将一个可迭代对象的元素随机排序。 在…

    编程 2025-04-29
  • Python根据表格数据生成折线图

    本文将介绍如何使用Python根据表格数据生成折线图。折线图是一种常见的数据可视化图表形式,可以用来展示数据的趋势和变化。Python是一种流行的编程语言,其强大的数据分析和可视化…

    编程 2025-04-29

发表回复

登录后才能评论