极致呈现系列之：Echarts矩形树图的深度穿梭

目录

• 什么是矩形树图
• 矩形树图的特性及应用场景
• • 矩形树图的特性
  • 矩形树图的应用场景
• Echarts中矩形树图的常用属性
• Vue3中创建矩形树图

什么是矩形树图

矩形树图是一种数据可视化图表，用于展示层次结构的数据关系。它通常以矩形的形状和面积来表示不同层级的数据，并通过嵌套的方式展示数据的层次关系。

在矩形树图中，最顶层的矩形代表数据的根节点，而子级矩形则代表根节点下的子节点。每个矩形的面积大小表示相应节点的相关值或权重，以便于比较不同节点之间的数据差异。

矩形树图常用于可视化组织结构、文件目录结构、分类层次等具有层次结构的数据。它能够清晰展示数据的层级关系，并提供直观的数据对比和分组效果。

矩形树图的特性及应用场景

矩形树图的特性

1. 层次结构展示：矩形树图能够清晰地展示数据的层次结构，通过嵌套的矩形形式反映数据的父子关系，让用户直观地理解数据的组织结构。
2. 面积比较：矩形树图中，矩形的面积大小代表数据的相对数值大小，利用面积来表达数据的比例关系，让用户可以直观地比较不同节点之间的差异。
3. 比例表示数值：矩形树图中，矩形的面积大小代表数据的相对数值大小，让用户可以直观地比较不同节点之间的数值差异。
4. 扁平化：矩形树图可以将多层级的数据展示在一个平面内，而不是以分支方式展示，使得图表更加扁平化，简洁清晰。
5. 多功能支持：矩形树图还可以支持其他功能，例如数据筛选、排序、高亮等，让用户能够更深入地分析和操作数据。

矩形树图的应用场景

矩形树图在各个领域都有广泛的应用场景。常见的应用场景有：

1. 组织结构图：用于展示企业、组织或机构的层次结构，呈现部门、团队之间的关系和人员分布情况，帮助管理者和员工理解组织架构和职责分工。

2. 文件目录结构图：用于展示计算机文件系统的目录结构，帮助用户了解文件夹之间的层次关系，以及文件在不同文件夹之间的位置和组织。

3. 分类层次图：用于展示分类体系的层次结构，例如产品分类、科学分类、教育学科分类等，帮助用户理解不同类别之间的层次关系和相互关联。

4. 数据导航和浏览：用于大规模数据集合的导航和浏览，例如网站上的内容分类导航、电商平台的商品分类导航等，帮助用户快速找到感兴趣的内容或商品。

5. 决策支持和分析：用于辅助决策分析，例如项目管理中的任务分配和资源分配，市场研究中的竞争分析和产品定位等，通过矩形树图可将数据层次结构清晰展示，帮助决策者了解各项指标的权重和关联性。

6. 可视化文件管理：用于可视化展示文件和文件夹之间的关系，帮助用户快速定位和管理文件，提高工作效率。

Echarts中矩形树图的常用属性

1. type：表示系列的类型，要绘制矩形树图，需要将该属性设置为 “treemap”。
2. data：表示系列的数据，即要展示的矩形树图的数据。每个数据项需要包含 “name”（节点名称）和 “value”（节点值）属性，可以通过嵌套结构形成树状关系。
3. leafDepth：表示叶子节点的深度，用于控制叶子节点的层级。默认值为 null即没有开启 drill down（即 leafDepth 为 null 或 undefined），表示所有节点都显示，若设置为 0，则只显示根节点。设置了 leafDepth 后，下钻（drill down）功能开启。drill down 功能即点击后才展示子层级。leafDepth 表示展示几层，层次更深的节点则被隐藏起来。点击则可下钻看到层次更深的节点。例如，leafDepth 设置为 1，表示展示一层节点。
4. label：表示标签的样式设置，可以设置标签的字体大小、颜色、位置等。常用的属性有 “show”（是否显示标签）、“position”（标签位置，默认为 “inside”，可选 “inside”、“left”、“right”、“top”、“bottom” 等）和 “formatter”（标签的文本格式化函数）。
5. itemStyle：表示矩形的样式设置，可以设置矩形的颜色、边框等。常用的属性有 “color”（矩形颜色，默认为主题色）、“borderColor”（矩形边框颜色，默认为 “none”）、“borderWidth”（边框宽度）、“borderType”（边框类型，默认为 “solid”）等。
6. levels：表示不同层级节点的样式设置，默认情况下，矩形树图会根据节点的深度自动采用不同层次的样式。可以通过该属性来自定义不同层级节点的样式，包括颜色、边框、标签等。
7. tooltip：表示提示框的样式设置，包括内容格式化函数、背景颜色、边框颜色等。

Vue3中创建矩形树图

1. 创建vue项目，安装ECharts库

npm install echarts --save

2. 新建TreemapView.vue文件，使用import语句引入ECharts库

import * as echarts from 'echarts';

3. 创建图表容器：在TreemapView组件的template中，添加一个div元素作为图表的容器。给它一个唯一的ref属性，以便在后面初始化图表对象时使用

<template>
  <div ref="chart" style="width:100%;height:600px; margin: 20px auto;"></div>
</template>

4. 初始化图表对象：在TreemapView组件中定义chart，

const chart = ref(null)

在mounted生命周期钩子函数中，使用echarts.init方法初始化图表对象。

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chart = ref(null)
onMounted(() => {
  const myChart = echarts.init(chart.value) 
})
</script>

5. 配置图表参数，在TreemapView组件的mounted生命周期钩子函数中，定义option对象，在里面配置图表数据，并使用chart.setOption方法配置图表的参数。

onMounted(() => {
  const myChart = echarts.init(chart.value)
  const option = {
  	 series: [{
      type: 'treemap',
      leafDepth: 1,
      data: [{
        name: '西区',
        value: 62,
        label: {
          fontSize: 16,
          color: '#fff',
          show: true,
          position: [5, 5],
          formatter: function (params) {
            var arr = [
              '{association|'   params.data.name   '}',
              '{peoNum|'   params.data.value   '}'   '家',
            ];
            return arr.join('\n\n');
          },
          rich: {
            association: {
              fontSize: 16,
              color: '#fff',
            },
            peoNum: {
              fontSize: 30,
              color: '#fff',
              fontFamily: 'liquidCrystal',
            },
          }
        },
        children: [{
          name: '四川',
          label: {
            fontSize: 16,
            color: '#fff',
            show: true,
            position: [5, 5],
            formatter: function (params) {
              var arr = [
                '{association|'   params.data.name   '}',
                '{peoNum|'   params.data.value   '}'   '家',
              ];
              return arr.join('\n\n');
            },
            rich: {
              association: {
                fontSize: 16,
                color: '#fff',
              },
              peoNum: {
                fontSize: 30,
                color: '#fff',
                fontFamily: 'liquidCrystal',
              },
            }
          },
          value: 24
        }, {
          name: '甘肃',
          label: {
            fontSize: 14,
            color: '#fff',
            show: true,
            position: [5, 5],
            f