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 Util = GM.Util;
var data = [
  {"time": '2016-08-08 00:00:00',"tem": 10},
  {"time": '2016-08-08 00:10:00',"tem": 22},
  {"time": '2016-08-08 00:30:00',"tem": 20},
  {"time": '2016-08-09 00:35:00',"tem": 26},
  {"time": '2016-08-09 01:00:00',"tem": 20},
  {"time": '2016-08-09 01:20:00',"tem": 26},
  {"time": '2016-08-10 01:40:00',"tem": 28},
  {"time": '2016-08-10 02:00:00',"tem": 20},
  {"time": '2016-08-10 02:20:00',"tem": 28}
];


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

var defs = {
   time: {
      type: 'timeCat',
      mask: 'yyyy-mm-dd',
      tickCount: 2,
      range:[0,1]
    },
  tem: {
    tickCount: 5,
    min: 0
  }
};

//配置time刻度文字样式
var label = {
  fill: '#979797',
  font: '14px san-serif',
  offset: 6
};
chart.axis('time', {
    label: function (text, index, total) {
        var cfg = Util.mix({}, label);
        // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
        if (index === 0) {
          cfg.textAlign = 'start';
        }
        if (index > 0 && index === total - 1) {
          cfg.textAlign = 'end';
        }
        return cfg;
    }
});

//配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('tem', {
    label: {
        fontSize: 14
    }
});

chart.source(data, defs);
chart.line().position('time*tem').shape('smooth');
chart.point().position('time*tem');
chart.render();

</script>

      </body>
    </html>
          
带点折线图