如何在Nuxt中仅客户端本地导入Highcharts（含treemap模块）

你可以利用Nuxt中仅在客户端触发的生命周期钩子，结合动态导入来实现，这样服务端不会执行导入代码，避免SSR报错，同时保持按需加载的性能优势，无需配置Nuxt插件。

方式一：Options API 写法 #

在组件的mounted钩子（仅客户端执行）中动态导入并初始化：

<template>
  <div id="treemap-container"></div>
</template>

<script>
export default {
  mounted() {
    // 动态导入Highcharts核心库
    import('highcharts').then(HighchartsModule => {
      const Highcharts = HighchartsModule.default;
      // 动态导入treemap模块并初始化
      import('highcharts/modules/treemap').then(treemapModule => {
        treemapModule.default(Highcharts);
        // 初始化treemap图表
        Highcharts.chart('treemap-container', {
          series: [{
            type: 'treemap',
            data: [
              { name: 'A', value: 6 },
              { name: 'B', value: 4 },
              { name: 'C', value: 2 }
            ]
          }]
        });
      });
    });
  }
}
</script>

方式二：Composition API（