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
        {consumption: 0.65, price: 1, year: 1965},
14
        {consumption: 0.66, price: 1.05, year: 1966},
15
        {consumption: 0.64, price: 1.1, year: 1967},
16
        {consumption: 0.63, price: 1.12, year: 1968},
17
        {consumption: 0.55, price: 1.15, year: 1969},
18
        {consumption: 0.57, price: 1.19, year: 1970},
19
        {consumption: 0.58, price: 1.14, year: 1971},
20
        {consumption: 0.59, price: 1, year: 1972},
21
        {consumption: 0.57, price: 0.96, year: 1973},
22
        {consumption: 0.55, price: 0.92, year: 1974},
23
        {consumption: 0.54, price: 0.88, year: 1975},
24
        {consumption: 0.55, price: 0.87, year: 1976},
25
        {consumption: 0.42, price: 0.89, year: 1977},
26
        {consumption: 0.28, price: 1, year: 1978},
27
        {consumption: 0.15, price: 1.1, year: 1979}
28
      ];
29
      var chart = new G2.Chart({
30
        id: 'c1',
31
        forceFit: true,
32
        height: 450
33
      });
34
      chart.source(data);
35
      chart.path().position('price*consumption').label('year', function(val) {
36
        return val + '年';
37
      }).size(2);
38
      chart.point().position('price*consumption').shape('triangle');
39
      chart.render();
40
    </script>
41
  </body>
42
</html>
43
​

路径图

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。 了解更多