G2-mobile 图表示例
源码
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>带平铺动画的多类型线图</title>
6
    <script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
7
  </head>
8
  <body>
9
    <div style="width:416px;height:218px;margin:0 auto">
10
      <canvas id="c1" style="width:416px;height:218px;"></canvas>
11
    </div>
12
    <script>
13
      GM.Global.pixelRatio = 2;
14
      var data = [
15
        {"time": '2016-08-08 00:00:00',"tem": 10,"city": "beijing"},
16
        {"time": '2016-08-08 00:10:00',"tem": 22, "city": "beijing"},
17
        {"time": '2016-08-08 00:30:00',"tem": 16, "city": "beijing"},
18
        {"time": '2016-08-09 00:35:00',"tem": 26, "city": "beijing"},
19
        {"time": '2016-08-09 01:00:00',"tem": 12, "city": "beijing"},
20
        {"time": '2016-08-09 01:20:00',"tem": 26, "city": "beijing"},
21
        {"time": '2016-08-10 01:40:00',"tem": 18, "city": "beijing"},
22
        {"time": '2016-08-10 02:00:00',"tem": 26, "city": "beijing"},
23
        {"time": '2016-08-10 02:20:00',"tem": 12, "city": "beijing"},
24
        {"time": '2016-08-08 00:00:00',"tem": 4, "city": "hangzhou"},
25
        {"time": '2016-08-08 00:10:00',"tem": 3, "city": "hangzhou"},
26
        {"time": '2016-08-08 00:30:00',"tem": 6, "city": "hangzhou"},
27
        {"time": '2016-08-09 00:35:00',"tem": -12, "city": "hangzhou"},
28
        {"time": '2016-08-09 01:00:00',"tem": 1, "city": "hangzhou"},
29
        {"time": '2016-08-09 01:20:00',"tem": 9, "city": "hangzhou"},
30
        {"time": '2016-08-10 01:40:00',"tem": 13, "city": "hangzhou"},
31
        {"time": '2016-08-10 02:00:00',"tem": -3, "city": "hangzhou"},
32
        {"time": '2016-08-10 02:20:00',"tem": 11, "city": "hangzhou"}
33
      ];
34
      var chart = new GM.Chart({
35
        id: 'c1'
36
      });
37
      chart.source(data, {
38
        time: {
39
          type: 'timeCat',
40
          tickCount: 3,
41
          mask: 'HH:MM',
42
          range:[0,1]
43
        },
44
        tem: {
45
          tickCount: 3,
46
          formatter: function(item) {
47
            return item + '%';
48
          }
49
        }
50
      });
51
      chart.axis('tem', {
52
        grid: function(text,index){
53
          if(text === '0%'){
54
            return {
55
              stroke: '#efefef'
56
            };
57
          }else{
58
            return {
59
              stroke: '#f7f7f7'
60
            };
61
          }
62
        },
63
        label: {
64
          fontSize: 14
65
        }
66
      });
67
      chart.axis('time', {
68
        line: null,
69
        label: {
70
          fontSize: 14
71
        }
72
      });
73
      // 添加辅助元素
74
      var point = ['2016-08-10 02:20:00',12];
75
      chart.guide().html(point,"<div style='border-radius: 12px;border: none;width: 22px;height: 22px;background-color: rgba(102, 182, 241, 0.5);'></div>",{align:'cc'});
76
      chart.guide().html(point,"<div style='border-radius: 7px;border: none;width: 12px;height: 12px;background-color: rgb(15, 141, 232);'></div>",{align:'cc'});
77
      chart.line().position('time*tem').color('city').size(3).shape('city', function(city) {
78
        if (city === 'beijing') {
79
          return 'line';
80
        }
81
        if (city === 'hangzhou') {
82
          return 'dash';
83
        }
84
      });
85
      // 水平方向的平铺动画
86
      chart.animate().waveh();
87
      chart.render();
88
    </script>
89
  </body>
90
</html>
91
​

带平铺动画的多类型线图