难以使热图图表与高图表协同工作-vue

Question

我在我的vue-3项目中使用了正式的高级图表-vue扩展，我让它与线路和区域这样的基本图表一起工作，但是我很难获得一个热图图表。这个图表的不同之处在于它需要作为一个导入模块来包含，这就是我怀疑问题所在的地方。

这就是我在父组件中所做的工作：

<!-- Parent.vue -->
<template>
  <HeatmapChart />
</template>

<script setup>
import HeatmapChart from 'src/components/charts/HeatmapChart.vue'
</script>

..。这就是子HeatmapChart.vue文件中的内容：

<!-- HeatmapChart.vue -->
<template>
  <Highcharts :options="chartOptions" />
</template>

<script setup>
import Highcharts from 'highcharts'
import HeatMap from 'highcharts/modules/heatmap'

HeatMap(Highcharts)


const chartOptions =  {
   chart: {
     type: 'heatmap',
     ...
   }
   ...
}
</script>

尝试上述代码不会呈现任何内容--我得到的唯一反馈是以下控制台警告：

[Vue warn]: Component is missing template or render function. 
  at <Anonymous options=

我真的不知道出了什么问题，特别是因为我有其他类型的图表在工作。我很感激我能得到的帮助。

Answer 1

以下是您可以基于的高级图表Vue包装器的官方热图演示：https://codesandbox.io/s/vue-template-8z2f5