G2 图表示例
源码
g2-react
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>雷达图(百分比层叠区域)</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
      var data = [
13
        {"name": "Argentina", "year": "2007", "value": 1368763},
14
        {"name": "Argentina", "year": "2008", "value": 799873},
15
        {"name": "Argentina", "year": "2009", "value": 1497653},
16
        {"name": "Argentina", "year": "2010", "value": 1351874},
17
        {"name": "Argentina", "year": "2011", "value": 1582987},
18
        {"name": "Brasil", "year": "2007", "value": 1991297},
19
        {"name": "Brasil", "year": "2008", "value": 1254823},
20
        {"name": "Brasil", "year": "2009", "value": 1732987},
21
        {"name": "Brasil", "year": "2010", "value": 332871},
22
        {"name": "Brasil", "year": "2011", "value": 649853},
23
        {"name": "Chile", "year": "2007", "value": 431097},
24
        {"name": "Chile", "year": "2008", "value": 561983},
25
        {"name": "Chile", "year": "2009", "value": 1019874},
26
        {"name": "Chile", "year": "2010", "value": 2027634},
27
        {"name": "Chile", "year": "2011", "value": 1961085},
28
        {"name": "Columbia", "year": "2007", "value": 431097},
29
        {"name": "Columbia", "year": "2008", "value": 799873},
30
        {"name": "Columbia", "year": "2009", "value": 332871},
31
        {"name": "Columbia", "year": "2010", "value": 799873},
32
        {"name": "Columbia", "year": "2011", "value": 649853}
33
      ];
34
      var Stat = G2.Stat;
35
      var chart = new G2.Chart({
36
        id: 'c1',
37
        forceFit: true,
38
        height: 450,
39
        plotCfg: {
40
          margin: [20, 140, 80, 80]
41
        }
42
      });
43
      chart.source(data, {
44
        'value': {
45
          min: 0,
46
          max: 100,
47
          tickCount: 5
48
        }
49
      });
50
      chart.coord('polar');
51
      chart.legend('name', {
52
        position: 'bottom'
53
      });
54
      chart.axis('year', { // 设置坐标系栅格样式
55
        line: null
56
      });
57
      chart.axis('..percent', { // 设置坐标系栅格样式
58
        grid: {
59
          type: 'polygon' //圆形栅格，可以改成
60
        }
61
      });
62
      chart.areaStack().position(Stat.summary.percent('year*value')).color('name', ['#64b5f6', '#1976d2', '#ef6c00', '#ffd54f']);
63
      chart.render();
64
    </script>
65
  </body>
66
</html>
67
​

雷达图(百分比层叠区域)

雷达又叫戴布拉图、蜘蛛网图。 了解更多