文档首页 > > 用户指南> 组件指南> 文本> 矩形树图

矩形树图

分享
更新时间: 2019/06/14 GMT+08:00

本章节主要介绍矩形树图组件各配置项的含义。

样式

  • 尺寸位置
    • 图表尺寸:设置图层的宽和高。
    • 图表位置:设置图层在画布中的位置。
    图1 尺寸位置-矩形树图
  • 全局样式
    • 字体:设置组件文本的字体样式。
    • 边框大小:输入数值或拖动,设置组件边框大小。
    • 边框颜色:单击颜色编辑器设置组件的边框颜色。
    • 文本样式:设置组件文本的字体大小、字体粗细、字体颜色。
    图2 全局样式-矩形树图
  • 显示节点路径
    • 显示/隐藏节点路径:单击“节点路径”右侧的勾选框,表示显示节点,表示隐藏节点。
    • 顶部:输入数值或单击设置节点与顶部的距离。
    • 背景色:单击颜色编辑器设置节点的背景色。
    • 边框大小:输入数值或拖动,设置组件边框大小。
    • 边框颜色:单击颜色编辑器设置节点的边框颜色。
    • 字体大小:设置节点文本的字体大小。
    • 字体粗细:设置节点文本的字体粗细。
    • 字体颜色:设置节点文本的字体颜色。
    图3 显示节点路径-矩形树图
  • 多层配置
    • 矩形边框线宽:输入数值或拖动,设置矩形边框线宽。
    • 子矩形间隔:输入数值或拖动,设置子矩形间隔。
    图4 多层配置-矩形树图

数据

上图中的示例数据如下:

[
  {
    "name": "Webkit内核",
    "value": 60,
    "children": [
      {
        "name": "Safari",
        "value": 10
      },
      {
        "name": "Chrome",
        "value": 60
      }
    ]
  },
  {
    "name": "Gecko内核",
    "value": 30,
    "children": [
      {
        "name": "netscape",
        "value": 10
      },
      {
        "name": "Mozilla",
        "value": 20
      }
    ]
  },
  {
    "name": "Trident内核",
    "value": 10,
    "children": [
      {
        "name": "IE",
        "value": 10
      }
    ]
  }
]
  • name:节点路径的名称。
  • value:节点路径的值。value值越大,矩形框所占的面积越大。
  • children:子节点,包含“name”“value”两个字段。
    • name:子节点的名称,子节点的名称会显示在大屏矩形框中。
    • value:子节点的权重值,value值越大,子节点矩形框所占的面积越大。

交互

此组件没有交互事件。

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!

非常感谢您的反馈,我们会继续努力做到更好!

反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

跳转到云社区