Vue项目中使用Highcharts-Vue配置TreeMap图表报错求助

错误原因 #

Error #13表示Highcharts找不到treemap图表类型，核心问题是treemap模块没有注册到组件实际使用的Highcharts实例上。你在组件内单独加载了treemap模块，但HighchartsVue组件默认使用的是全局注册时的Highcharts实例，这个全局实例并没有加载treemap模块。

解决方案 #

方案一：全局注册treemap模块（推荐） #

在项目入口文件application.js中直接加载treemap模块到全局Highcharts实例，这样所有组件都能直接使用treemap图表：

import HighchartsVue from 'highcharts-vue';
import Highcharts from 'highcharts';
import treemap from 'highcharts/modules/treemap';

// 给全局Highcharts实例注册treemap模块
treemap(Highcharts);

setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(HighchartsVue)
      .use(FloatingVue)
      .mount(el);
  }

组件代码可以简化，无需再重复引入模块：

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

<script setup>
import { ref } from 'vue';

const chartOptions = ref({
  chart: {
    type: 'treemap'
  },
  series: [{
    data: [{
      name: 'A',
      value: 10
    }, {
      name: 'B',
      value: 7
    }]
  }]
});
</script>

方案二：局部指定Highcharts实例 #

如果不想全局注册模块，可以在组件内将加载了treemap的Highcharts实例绑定到HighchartsVue组件上：

<template>
  <div>
    <!-- 绑定自定义的Highcharts实例 -->
    <Highcharts :options="chartOptions" :highcharts="Highcharts" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Highcharts from 'highcharts';
import treemap from 'highcharts/modules/treemap';

// 给当前组件的Highcharts实例注册treemap模块
treemap(Highcharts);

const chartOptions = ref({
  chart: {
    type: 'treemap'
  },
  series: [{
    data: [{
      name: 'A',
      value: 10
    }, {
      name: 'B',
      value: 7
    }]
  }]
});
</script>

内容的提问来源于stack exchange，提问作者Oliver Jacob