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 src='https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js'></script>
<script>

GM.Global.pixelRatio = 2;
var data = [
    {"month":12,"tem":7,"city":"tokyo"},
    {"month":1,"tem":6.9,"city":"tokyo"},
    {"month":2,"tem":9.5,"city":"tokyo"},
    {"month":3,"tem":14.5,"city":"tokyo"},
    {"month":4,"tem":18.2,"city":"tokyo"},
    {"month":5,"tem":21.5,"city":"tokyo"},
    {"month":6,"tem":25.2,"city":"tokyo"},
    {"month":7,"tem":26.5,"city":"tokyo"},
    {"month":8,"tem":23.3,"city":"tokyo"},
    {"month":9,"tem":18.3,"city":"tokyo"},
    {"month":10,"tem":13.9,"city":"tokyo"},
    {"month":11,"tem":9.6,"city":"tokyo"},
    {"month":12,"tem":0,"city":"newYork"},
    {"month":1,"tem":0.8,"city":"newYork"},
    {"month":2,"tem":5.7,"city":"newYork"},
    {"month":3,"tem":11.3,"city":"newYork"},
    {"month":4,"tem":17,"city":"newYork"},
    {"month":5,"tem":22,"city":"newYork"},
    {"month":6,"tem":24.8,"city":"newYork"},
    {"month":7,"tem":24.1,"city":"newYork"},
    {"month":8,"tem":20.1,"city":"newYork"},
    {"month":9,"tem":14.1,"city":"newYork"},
    {"month":10,"tem":8.6,"city":"newYork"},
    {"month":11,"tem":2.5,"city":"newYork"},
    {"month":12,"tem":2,"city":"berlin"},
    {"month":1,"tem":0.6,"city":"berlin"},
    {"month":2,"tem":3.5,"city":"berlin"},
    {"month":3,"tem":8.4,"city":"berlin"},
    {"month":4,"tem":13.5,"city":"berlin"},
    {"month":5,"tem":17,"city":"berlin"},
    {"month":6,"tem":18.6,"city":"berlin"},
    {"month":7,"tem":17.9,"city":"berlin"},
    {"month":8,"tem":14.3,"city":"berlin"},
    {"month":9,"tem":9,"city":"berlin"},
    {"month":10,"tem":3.9,"city":"berlin"},
    {"month":11,"tem":1,"city":"berlin"}
];

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

chart.source(data, {
    month: {
        tickCount: 12
    },
    tem: {
        tickCount: 5
    }
});

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

chart.areaStack().position('month*tem').color('city').shape('smooth').style({
        opacity: 0.6
    });

chart.render();

function getPoint(canvas, x, y) {
  var bbox = canvas.getBoundingClientRect();
  return {
    x: x - bbox.left,
    y: y - bbox.top
  };
}
$('#c1').on('click', function(e) {
  var point = getPoint(e.target, e.clientX, e.clientY);
  var data = chart.getSnapRecords(point);
  var html = '';
  data.forEach(function(item){
        html += 'city:'+item._origin.city+',tem:'+item._origin.tem+',month:'+item._origin.month+'\b\n';
    });
  console.log(data);
  alert(html);
});
</script>

      </body>
    </html>
          
带事件的重叠区域图