vue中使用highcharts的热力图代码

在Vue中使用Highcharts的热力图需要安装Highcharts和Vue-highcharts插件。可以通过以下命令进行安装：

npm install highcharts --save
npm install vue-highcharts --save

接下来，在Vue组件中引入Vue-highcharts并注册Highcharts组件。然后，在template中使用`<highcharts>`标签来渲染热力图。以下是一个示例：

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
import VueHighcharts from 'vue-highcharts'
import Highcharts from 'highcharts'
import HighchartsHeatmap from 'highcharts/modules/heatmap'

HighchartsHeatmap(Highcharts)

export default {
  components: {
    highcharts: VueHighcharts
  },
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'heatmap'
        },
        title: {
          text: 'Monthly Sales Data'
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
          categories: ['Product A', 'Product B', 'Product C'],
          title: null
        },
        colorAxis: {
          min: 0,
          minColor: '#FFFFFF',
          maxColor: Highcharts.getOptions().colors[0]
        },
        series: [{
          name: 'Sales',
          borderWidth: 1,
          data: [[0, 0, 100], [0, 1, 50], [0, 2, 75], [1, 0, 60], [1, 1, 90], [1, 2, 80], [2, 0, 70], [2, 1, 40], [2, 2, 85]]
        }]
      }
    }
  }
}
</script>

在上面的代码中，首先引入了VueHighcharts和HighchartsHeatmap。然后，在组件的data选项中定义了chartOptions对象，该对象包含了热力图的配置选项。最后，在template中使用`<highcharts>`标签来渲染热力图，并将chartOptions对象传递给它的options属性。

注意，这里要先注册HighchartsHeatmap模块，然后在chartOptions中指定chart类型为heatmap。最后，在series中指定热力图的数据。