G2-mobile - 带平铺动画的多类型线图

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>带平铺动画的多类型线图</title>
<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
      </head>
      <body>
          <div style="width:416px;height:218px;margin:0 auto">
              <canvas id="c1" style="width:416px;height:218px;"></canvas>
          </div>
 <script>
  GM.Global.pixelRatio = 2;
  var data = [
    {"time": '2016-08-08 00:00:00',"tem": 10,"city": "beijing"},
    {"time": '2016-08-08 00:10:00',"tem": 22, "city": "beijing"},
    {"time": '2016-08-08 00:30:00',"tem": 16, "city": "beijing"},
    {"time": '2016-08-09 00:35:00',"tem": 26, "city": "beijing"},
    {"time": '2016-08-09 01:00:00',"tem": 12, "city": "beijing"},
    {"time": '2016-08-09 01:20:00',"tem": 26, "city": "beijing"},
    {"time": '2016-08-10 01:40:00',"tem": 18, "city": "beijing"},
    {"time": '2016-08-10 02:00:00',"tem": 26, "city": "beijing"},
    {"time": '2016-08-10 02:20:00',"tem": 12, "city": "beijing"},
    {"time": '2016-08-08 00:00:00',"tem": 4, "city": "hangzhou"},
    {"time": '2016-08-08 00:10:00',"tem": 3, "city": "hangzhou"},
    {"time": '2016-08-08 00:30:00',"tem": 6, "city": "hangzhou"},
    {"time": '2016-08-09 00:35:00',"tem": -12, "city": "hangzhou"},
    {"time": '2016-08-09 01:00:00',"tem": 1, "city": "hangzhou"},
    {"time": '2016-08-09 01:20:00',"tem": 9, "city": "hangzhou"},
    {"time": '2016-08-10 01:40:00',"tem": 13, "city": "hangzhou"},
    {"time": '2016-08-10 02:00:00',"tem": -3, "city": "hangzhou"},
    {"time": '2016-08-10 02:20:00',"tem": 11, "city": "hangzhou"}
  ];

  var chart = new GM.Chart({
    id: 'c1'
  });

  chart.source(data, {
    time: {
      type: 'timeCat',
      tickCount: 3,
      mask: 'HH:MM',
      range:[0,1]
    },
    tem: {
      tickCount: 3,
      formatter: function(item) {
        return item + '%';
      }
    }
  });
  chart.axis('tem', {
    grid: function(text,index){
      if(text === '0%'){
        return {
          stroke: '#efefef'
        };
      }else{
        return {
          stroke: '#f7f7f7'
        };
      }
    },
    label: {
      fontSize: 14
    }
  });
  chart.axis('time', {
    line: null,
    label: {
      fontSize: 14
    }
  });

  // 添加辅助元素
  var point = ['2016-08-10 02:20:00',12];
  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'});
  chart.guide().html(point,"<div style='border-radius: 7px;border: none;width: 12px;height: 12px;background-color: rgb(15, 141, 232);'></div>",{align:'cc'});

  chart.line().position('time*tem').color('city').size(3).shape('city', function(city) {
    if (city === 'beijing') {
      return 'line';
    }
    if (city === 'hangzhou') {
      return 'dash';
    }
  });
  // 水平方向的平铺动画
  chart.animate().waveh();

  chart.render();
</script>

      </body>
    </html>
          
带平铺动画的多类型线图