要在Vue中使用ApexCharts的热力图并缩放时间轴，您需要安装并导入ApexCharts和VueApexCharts库，并设置图表选项。

首先，确保您已经安装了必要的依赖项：

npm install apexcharts vue-apexcharts

然后，在Vue组件中导入所需的库：

import VueApexCharts from 'vue-apexcharts'
import ApexCharts from 'apexcharts'

接下来，在Vue组件的components部分注册VueApexCharts组件：

components: {
  apexchart: VueApexCharts,
},

然后，您可以在模板中使用apexchart组件来渲染热力图：

在Vue组件的data部分，您需要定义chartOptions和chartSeries，以指定图表的选项和数据：

data() {
  return {
    chartOptions: {
      chart: {
        zoom: {
          enabled: true,
          type: 'x', // 只缩放时间轴
        },
      },
      dataLabels: {
        enabled: false,
      },
      colors: ['#008FFB'],
      xaxis: {
        type: 'datetime',
      },
    },
    chartSeries: [
      {
        name: 'Metric 1',
        data: [
          [1588882800000, 10],
          [1588886400000, 20],
          [1588890000000, 30],
          // 添加更多数据点...
        ],
      },
    ],
  }
},

在上述代码中，chartOptions中的zoom选项启用了缩放功能，并将其类型设置为'x'，以便仅缩放时间轴。

最后，在Vue组件的mounted生命周期钩子中初始化图表：

mounted() {
  ApexCharts.exec(
    'chart',
    'zoomX',
    new Date('2020-05-08').getTime(),
    new Date('2020-05-10').getTime(),
  )
},

在上述代码中，我们使用ApexCharts.exec方法来执行图表的zoomX操作，以设置初始的时间范围。您可以根据自己的需求调整开始和结束日期。

这样，您就可以在Vue中使用ApexCharts的热力图，并缩放时间轴了。请根据您的数据和需求进行适当的调整。