Vue 3 + Highcharts Boost 可视化加速模块的完整示例

下面是一个 Vue 3 + Highcharts Boost 的完整示例，使用 highcharts-vue，并在组件内初始化 Boost 模块。

1) 安装

npm install highcharts highcharts-vue

2) 组件示例

<script setup lang="ts">
import { computed } from 'vue';
import Highcharts from 'highcharts';
import BoostModule from 'highcharts/modules/boost';
import HighchartsVue from 'highcharts-vue';

if (typeof BoostModule === 'function') {
  BoostModule(Highcharts);
}

const data = Array.from({ length: 50000 }, (_, i) => Math.sin(i / 50) * 100 + i / 10);

const chartOptions = computed(() => ({
  chart: {
    type: 'line',
    height: 500
  },
  title: {
    text: 'Vue 3 + Highcharts Boost'
  },
  boost: {
    seriesThreshold: 1,
    useGPUTranslations: true,
    usePreAllocated: true,
    chunkSize: 3000
  },
  xAxis: {
    title: {
      text: 'Index'
    }
  },
  yAxis: {
    title: {
      text: 'Value'
    }
  },
  tooltip: {
    valueDecimals: 2
  },
  plotOptions: {
    series: {
      boostThreshold: 1,
      marker: {
        enabled: false
      }
    }
  },
  series: [
    {
      name: 'Large dataset',
      data
    }
  ]
}));
</script>

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

3) 全局注册 highcharts-vue

如果你还没在 main.ts 里注册插件：

import { createApp } from 'vue';
import App from './App.vue';
import HighchartsVue from 'highcharts-vue';

createApp(App).use(HighchartsVue).mount('#app');

使用注意事项

• BoostModule(Highcharts) 必须在图表创建前执行。
• boostThreshold: 1 会尽快触发 Boost，便于验证效果。
• 大数据量时建议关闭 marker 和复杂 dataLabels。
• 如果图表交互很复杂，Boost 下要先验证 tooltip、点击、悬停是否符合预期。

相关文档

• Boost 模块：https://www.highcharts.com/docs/advanced-chart-features/boost-module
• Vue 集成：https://www.highcharts.com/docs/vue