极坐标系下的矩形树图

关系图

极坐标系下的矩形树图

矩形树图采用矩形表示层次结构里的节点，父子节点之间的层次关系用矩形之间的相互嵌套隐喻来表达。从根节点开始，屏幕空间根据相应的子节点数目被分为多个矩形，矩形的面积大小通常对应节点的属性。每个矩形又按照相应节点的子节点递归的进行分割，知道叶子节点为止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>极坐标系下的矩形树图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/mobile.json', function(mobiles) {
    var _DataSet = DataSet,
      DataView = _DataSet.DataView;

// 会通过子节点累加 value 值，所以设置为 0

mobiles.forEach(function(mobile) {
      mobile.value = null;
    });
    var data = {
      name: 'root',
      children: mobiles
    };
    var dv = new DataView();
    dv.source(data, {
      type: 'hierarchy'
    }).transform({
      field: 'value',
      type: 'hierarchy.treemap',
      tile: 'treemapResquarify',
      as: ['x', 'y']
    });
    var nodes = dv.getAllNodes();
    nodes.map(function(node) {
      node.name = node.data.name;
      if (!node.data.brand && node.parent) {
        node.brand = node.parent.data.brand;
      } else {
        node.brand = node.data.brand;
      }
      //node.value = node.data.value;
      return node;
    });
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: 0,
      animate: false
    });
    chart.coord('polar').reflect(); // 习惯性最小的在最下面
    chart.source(nodes);
    chart.scale({
      x: {
        nice: false
      },
      y: {
        nice: false
      }
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip({
      showTitle: false
    });
    chart.polygon().position('x*y').color('brand').tooltip('name*value', function(name, value) {
      return {
        name: name,
        value: value
      };
    }).style({
      lineWidth: 1,
      stroke: '#fff'
    }).label('brand*depth*value', function(brand, depth, value) {
      if (depth === 1 && value > 1) {
        // 只有第一级显示文本，数值太小时不显示文本
        return brand;
      }
    }, {
      offset: 0,
      textStyle: {
        textBaseline: 'middle',
        fill: '#000',
        shadowBlur: 10,
        shadowColor: '#fff'
      },
      formatter: function formatter(val) {
        if (val !== 'root') {
          return val;
        }
      }
    });
    chart.render();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>极坐标系下的矩形树图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/mobile.json', function(mobiles) {
    var _DataSet = DataSet,
      DataView = _DataSet.DataView;

// 会通过子节点累加 value 值，所以设置为 0

图表简介

了解更多

图表用法

矩形树图的好处在于，相比起传统的树形结构图，矩形树图能更有效得利用空间，并且拥有展示占比的功能。矩形树图的缺点在于，当分类占比太小的时候文本会变得很难排布。相比起分叉树图，矩形树图的树形数据结构表达的不够直观、明确。

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接