How to specify series data in heatmap chart with gridIndex using eCharts

Question

In my below sample only the first chart (for 'Cars') is populated. How should I create the input dataset (the 'data' array) so that all three charts (Cars, Boars and Planes) show their corresponding data?

Should I use the 'dataset' component instead of specifying the 'data' array in the series element directly ?

I have tried to specify more than one elements in the 'series' array, each with it's own 'data' array but the result is the same as what can be seen in the snippet.

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const dates = [
  '11 Apr',
  '12 Apr',
  '13 Apr',
  '15 Apr',
  '18 Apr',
];

const colors1 = ['Green', 'Blue'];
const colors2 = ['White', 'Blue'];
const colors3 = ['Gray', 'Red', 'Yellow'];

const vehicles1 = ['Cars'];
const vehicles2 = ['Boats'];
const vehicles3 = ['Planes'];

const data = [
  //should appear in Cars category
  [0, 3, 4, -80400],
  [0, 4, 8, 40200],
  [0, 11, 2, 50900],
  [0, 12, 9, -57400],
  [1, 3, 11, -52100],
  [1, 0, 4, 10000],
  [1, 5, 9, -84900],
  [1, 8, 2, -32100],
  
  //should appear in Boats category
  [2, 3, 1, -58300000],
  [2, 6, 8, 10000000],
  [2, 13, 22, 22100000],
  [3, 1, 21, -3450000],
  [3, 2, 13, 760000],
  [3, 4, 7, -7270000],
  [3, 6, 34, -6100000],
  [3, 8, 2, 4060000],
  [3, 9, 33, 570000],
  [3, 13, 8, 1070000],
  [4, 0, 99, -1910000],
  [4, 3, 90, -1480000],
  [4, 4, -1333333, 2880000],
  [4, 9, 2, -3130000],
  [4, 12, 9, 5010000],
  
  //should appear in PLanes category
  [5, 5, 88, -78700000],
  [6, 0, 12, 123000],
  [6, 7, 4, 7200],
  [6, 8, -100000, -95100],
  [6, 10, 5, -18900],
  [6, 13, 90, 97600]
].map(function (item) {
  return [item[1], item[0], item[2] || '-', item[3]];
});

option = {
    grid: [
    { top: '10%' , bottom: '71%'}, 
    { top: '30%' , bottom: '30%'}, 
    { top: '71%', bottom: '10%' }
    ],

  xAxis: [{
    type: 'category',
    position: 'top',
    data: dates,
    axisLabel: {
      show: true
      
    },
    splitArea: {
      show: true
    }, gridIndex: 0 
  },
  {  type: 'category',
    position: 'top',
    data: dates,
    axisLabel: {
      show: false,
    },
    splitArea: {
      show: true
    }, gridIndex: 1 
  },
  {  type: 'category',
    position: 'top',
    data: dates,
    axisLabel: {
      show: false,
    },
    splitArea: {
      show: true
    }, gridIndex: 2 
  }
  ],
  yAxis: [
    {
      type: 'category',
      position: 'left',
      data: colors1,
      gridIndex: 0
    },
    {
      type: 'category',
      position: 'left',
      data: vehicles1,
      offset: 50,
      gridIndex: 0
    },
    {
      type: 'category',
      data: colors3,
      position: 'left',
      gridIndex: 1
    },
        {
      type: 'category',
      position: 'left',
      data: vehicles2,
      offset: 50,
      gridIndex: 1
    },
    {
      type: 'category',
      data: colors2,
      position: 'left',
      gridIndex: 2
    },
      {
      type: 'category',
      position: 'left',
      data: vehicles3,
      offset: 50,
      gridIndex: 2
    },
  ],
  visualMap: {
    min: -500,
    max: 500,
    calculable: true,
    realtime: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '-10%'
  },
  series: [
    {
      type: 'heatmap',
      data: data,
      itemStyle: {
      },
      label: {
        normal: {
          show: true
        }
      },
    },
  ],
   dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0, 1, 2],
        start: 1,
        end: 70
      },
      {
        type: 'inside',
        xAxisIndex: [0, 1, 2],
        start: 1,
        end: 35
      },
    ]
};

option && myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<div id="main" style="width: 1000px;height:800px;"></div>