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 = [
    {"tem": 500, "month":"3月"},
    {"tem": -50, "month":"4月"},
    {"tem": 450, "month":"5月"},
    {"tem": -40, "month":"6月"},
    {"tem": 690, "month":"7月"},
    {"tem": 346, "month":"8月"},
  ];
  var chart = new GM.Chart({
    id: 'c1'
  });
  chart.source(data, {
    tem: {
      tickCount: 5,
    }
  });
  chart.axis('month', {
    label:{
      font:'sans-serif '
    },
    line:null,
    grid: null
  });
  chart.axis('tem', {
    label: null,
    grid: {
      stroke: '#f8f8f8',
    }
  });

  chart.interval().position('month*tem').color('tem*month', function(tem, month) {
    if (month === '8月') {
      return '#f5623a';
    }
    if (tem >= 0){
      return '#f8bdad';
    }
    if (tem < 0) {
      return '#99d6c0';
    }
  });
  // y轴方向的缩放动画
  chart.animate().scaley();
  // 辅助元素
  data.forEach(function(obj, index) {
    // 文字部分
    var offsetY = obj.tem > 0 ? -16 : 14;
    chart.guide().html([obj.month, obj.tem], `<div style='color: #999999;'><span>${obj.tem}</span></div>`, {
      align: 'cc',
      offset: [0, offsetY]
    });
    // 背景部分
    var offset = 0.25;
    chart.guide().rect([index - offset, 'max'],[index + offset, 'min'],{fill: '#f8f8f8'});
  });
  chart.render();
</script>
      </body>
    </html>
          
带缩放动画和自定义背景的柱状图