描述：在vue中使用百万数据量highcharts图，写了一个简单的组件。引入highcharts/modules/boost模块和highcharts/modules/exporting模块。

首先安装模块

npm i highcharts --registry=https://registry.npm.taobao.org

组件：hchart.vue

<template><div class="hcharts"><div :id="id"  :options="options"></div></div>
</template>
<script>
import HighCharts from 'highcharts'
import boostInt from 'highcharts/modules/boost'
import exportingInit from 'highcharts/modules/exporting'
export default {name: 'hchart',props: {id: {type: String,default: 'hchart'},options: {type: Object,default: () => ({})}},watch: {options: {handler(){HighCharts.chart(this.id,this.options);exportingInit(HighCharts)boostInt(HighCharts)},deep: true}
},mounted() {HighCharts.chart(this.id,this.options)exportingInit(HighCharts)boostInt(HighCharts)}
}
</script>
<style lang="scss" scoped>
.hcharts {width: 800px;height: 200px;
}
</style>

用到这个组件：chart.vue

<template><Hchart :options="options" id="highChart"></Hchart>
</template><script>
import Hchart from "@/common/hchart"; // 导入上边的组件
export default {data() {return {options: {}};},components: {Hchart,},props: {cdata: {type: Object,default: () => ({}),},},mounted() {},watch: {cdata: {handler(newData) {this.options = {chart: {zoomType: "x",},boost: {useGPUTranslations: true,},// title: {//   text: "",// },// subtitle: {//   text: "",// },yAxis: {min: 0,max: 4095,startOnTick: false,},navigation: {buttonOptions: {enabled: true,},},series: newData.series,};},immediate: true,deep: true,},},
};
</script>
<style lang="scss" scoped>
#highChart {width: 100%;height: 100%;
}
</style>

然后再写个vue给chart.vue传值cdata:{series: xxx~},即可。一点都不卡，很丝滑。

借鉴highcharts官方文档https://www.highcharts.com.cn/docs/highcharts-vue引入需要用到的模块boost（渲染大数据量图快）、exporting（导出图片、pdf等）

import HighCharts from 'highcharts'
import boostInt from 'highcharts/modules/boost'
import exportingInit from 'highcharts/modules/exporting'// 图表初始化完后exportingInit(HighCharts)boostInt(HighCharts)