vue3按需引入Highcharts

Vue3中按需引入Highcharts通常是为了减少初始加载的文件大小，只加载实际需要使用的模块。由于Highcharts是一个第三方库，它本身不是构建于Vue的生态系统内，所以在Vue项目中使用，你需要配合一些工具如`vue-highcharts`或`@highcharts/vue`等适配器。

首先，在你的项目中安装所需的库：

npm install @vue-hoc/highcharts --save // 或者 如果你喜欢原生API
npm install highcharts @types/highcharts --save

对于`@vue-hoc/highcharts`：

// main.js 或者 vite.config.ts
import HighCharts from '@vue-hoc/highcharts';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App)
  .use(HighCharts) // 配置和导入 Highcharts
  .mount('#app');

然后，在需要使用Highcharts的地方按需引入：

<template>
  <div ref="chart"></div>
</template>

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

onMounted(() => {
  const chartRef = ref(null);
  // 只有当图表元素存在时才初始化Highcharts
  if (chartRef.value !== null) {
    new HighCharts({
      container: chartRef.value,
      // ...其他的配置项
    });
  }
});
</script>

这样，只有在组件实例化并渲染到DOM上时，Highcharts才会被加载。