Echarts数据可视化 第4章 Echarts可视化图 4.14 树图

Echarts数据可视化

Echarts数据可视化：入门、实战与进阶

第4章 Echarts可视化图

4.14 树图

树图是一种利用包含关系表达层次化数据的可视化方法，有着较好的空间利用率，可以容纳大量的包含关系。

举个栗子

var data = {
  //节点数据信息
  name: 'A',
  children: [
    {
      name: 'A1',
      children: [
        {
          name: 'A11'
        },
        {
          name: 'A12',
          value: 3322
        }
      ]
    },
    {
      name: 'A2',
      children: [
        { name: 'A21', value: 8833 },
        { name: 'A22', value: 1732 },
        { name: 'A23', value: 3623 }
      ]
    },
    {
      name: 'A3',
      children: [{ name: 'A31', value: 4116 }]
    }
  ]
};

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '2%', //图例距离上部百分比
    left: '3%', //图例距离左端百分比
    data: [
      {
        name: 'tree1',
        icon: 'rectangle' //图例的图标形状为矩形
      }
    ]
  },
  series: [
    {
      type: 'tree', //树图类型
      name: 'tree1', //树的名称
      data: [data], //树的数据来源于之前定义的data1
      top: '5%', //树距离上部的百分比距离
      left: '7%', //树距离左部的百分比距离
      bottom: '2%', //树距离底部的百分比距离
      right: '20%', //树距离右部的百分比距离
      symbolSize: 20, //节点的大小
      label: {
        position: 'top', //非叶子节点的标签在上部
        align: 'left' //左对齐
      },
      leaves: {
        label: {
          position: 'right', //叶子节点的标签在节点右边
          align: 'left'
        }
      }
    }
  ]
};

浏览器渲染效果

可以看到图中A 节点包含A1、A2、A3，A1节点包含A11和A12节点。

树图还具有良好的交互性，点击非叶子节点时，节点之后的子节点会收缩隐藏。

像下面这样

代码中，series 的type取值为 tree，代码同样分为了数据定义和树图样式设置两部分。

数据的嵌套结构类似于旭日图。