G2 图表示例
源码
g2-react
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>polar treemap</title>
6
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
7
    <script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
8
  </head>
9
  <body>
10
    <div id="c1"></div>
11
    <script>
12
      $.getJSON('../../../static/data/mobile.json',function (data) {
13
        // 因为只有第一层的手机数据存在品牌（brand）字段，所以，将所有手机型号，增加brand字段
14
        function processData (data) {
15
          for(var i = 0; i < data.length ; i++) {
16
            var node = data[i];
17
            if (node.children) {
18
              for (var j = 0; j < node.children.length; j++) {
19
                node.children[j].brand = node.brand;
20
              }
21
            }
22
          }
23
        }
24
        processData(data);
25
        var Stat = G2.Stat;
26
        var chart = new G2.Chart({
27
          id: 'c1',
28
          forceFit: true,
29
          height: 450
30
        });
31
        chart.source(data);
32
        chart.coord('polar');
33
        chart.tooltip({
34
          map: {
35
            title: 'brand',
36
            name: 'name',
37
            value: 'value'
38
          }
39
        });
40
        chart.axis(false);
41
        chart.legend(false);
42
        // 需要将显示tooltip的字段加到语法中，否则无法取到对应的字段例如 name
43
        chart.polygon().position(Stat.treemap('children*value*name')).color('brand')
44
          .label('brand*..level*value',function(name, level, value){
45
          if (level === 0 && value > 0.5) { // 只有第一层的，同时占比超过 0.5
46
            return name;
47
          }
48
        },
49
                 {
50
          offset: 2,
51
          label:{
52
            fill: '#000',
53
            'fontSize': 12,
54
            'fontWeight': 'bold',
55
            shadowBlur: 8,
56
            shadowColor: '#fff'
57
          }
58
        }).style({
59
          stroke: '#fff',
60
          lineWidth: 1
61
        });
62
        chart.render();
63
      });
64
    </script>
65
  </body>
66
</html>
67
​

polar treemap

矩形树图的极坐标展示含义及用法与矩形树图类似。 了解更多