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
        {country: 'Asia', year: '1750', value: 502},
14
        {country: 'Asia', year: '1800', value: 635},
15
        {country: 'Asia', year: '1850', value: 809},
16
        {country: 'Asia', year: '1900', value: 947},
17
        {country: 'Asia', year: '1950', value: 1402},
18
        {country: 'Asia', year: '1999', value: 3634},
19
        {country: 'Asia', year: '2050', value: 5268},
20
        {country: 'Africa', year: '1750', value: 106},
21
        {country: 'Africa', year: '1800', value: 107},
22
        {country: 'Africa', year: '1850', value: 111},
23
        {country: 'Africa', year: '1900', value: 133},
24
        {country: 'Africa', year: '1950', value: 221},
25
        {country: 'Africa', year: '1999', value: 767},
26
        {country: 'Africa', year: '2050', value: 1766},
27
        {country: 'Europe', year: '1750', value: 163},
28
        {country: 'Europe', year: '1800', value: 203},
29
        {country: 'Europe', year: '1850', value: 276},
30
        {country: 'Europe', year: '1900', value: 408},
31
        {country: 'Europe', year: '1950', value: 547},
32
        {country: 'Europe', year: '1999', value: 729},
33
        {country: 'Europe', year: '2050', value: 628},
34
        {country: 'Oceania', year: '1750', value: 200},
35
        {country: 'Oceania', year: '1800', value: 200},
36
        {country: 'Oceania', year: '1850', value: 200},
37
        {country: 'Oceania', year: '1900', value: 300},
38
        {country: 'Oceania', year: '1950', value: 230},
39
        {country: 'Oceania', year: '1999', value: 300},
40
        {country: 'Oceania', year: '2050', value: 460},
41
      ];
42
      var Stat = G2.Stat;
43
      var chart = new G2.Chart({
44
        id: 'c1',
45
        forceFit: true,
46
        height: 450
47
      });
48
      chart.source(data, {
49
        year: {
50
          type: 'linear',
51
          tickInterval: 25
52
        }
53
      });
54
      chart.areaStack().position('year*value').color('country');
55
      chart.render();
56
    </script>
57
  </body>
58
</html>
59
​

层叠区域图

层叠面积图和基本面积图一样，唯一的区别就是图上每一个数据集的起点不同，起点是基于前一个数据集的。 了解更多