EChartsを使って3D棒グラフを作ろう

<div id="echarts" style="margin:auto;width:700px;height:500px;background:#eee;max-width:100%;"></div>

(function() {
  "use strict";
  var getAllRecords = function(records){
    var limit = 500;
    records = records || [];
    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: kintone.app.getId(),
      query: 'limit ' + limit + ' offset ' + records.length
    }).then(function(response){
      records = records.concat(response.records);
      if(response.records.length === limit){
        return getAllRecords(records);
      }else{
        return records;
      }
    });
  };
  kintone.events.on('app.record.index.show', function(event){
    if(event.viewName !== '3Dグラフ') return;
    getAllRecords().then(function(records){
      var dom = document.getElementById("echarts");
      var myChart = echarts.init(dom);
      var months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      var offices = ['札幌', '東京', '名古屋', '大阪', '福岡'];
      var data = months.reduce(function(accumulator, month, xIndex){
        return accumulator.concat(offices.map(function(office, yIndex){
          return [xIndex, yIndex, Number((records.find(function(record){
            return record.月.value == month && record.支社.value == office;
          }) || {売上:{value:0}}).売上.value)];
        }));
      }, []);
      var option = {
        tooltip: {
          formatter: function(param){
            return (
              months[param.data[0]] + '月' +
              '<br>' +
              offices[param.data[1]] + '支社' +
              '<br>' +
              param.data[2] + '円'
            );
          }
        },
        visualMap: {
          max: 100000,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          }
        },
        xAxis3D: {
          type: 'category',
          data: months,
          name: '月',
          nameGap: 30
        },
        yAxis3D: {
          type: 'category',
          data: offices,
          name: '支社',
          nameGap: 30
        },
        zAxis3D: {
          type: 'value',
          name: '売上',
          nameGap: 30
        },
        grid3D: {},
        series: [{
          name: '売上',
          type: 'bar3D',
          data: data,
        }]
      };
      myChart.setOption(option, true);
    });
  });
})();