Highcharts.js在vue中如何引用

在Vue中使用Highcharts.js需要进行以下几个步骤：

1. 安装Highcharts.js依赖包。可以使用npm或yarn进行安装：

npm install highcharts --save

2. 在Vue组件中引入Highcharts.js，并创建一个Highcharts对象。例如：

import Highcharts from 'highcharts';

export default {
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'bar'
        },
        title: {
          text: 'My Chart'
        },
        series: [{
          name: 'My Data',
          data: [1, 2, 3, 4, 5]
        }]
      }
    }
  },
  mounted() {
    Highcharts.chart('container', this.chartOptions);
  }
}

这个例子创建了一个Vue组件，引入了Highcharts.js并创建了一个Highcharts对象。在组件的mounted()钩子函数中，使用Highcharts.chart()方法将图表绑定到id为“container”的元素上，并传入配置选项。

3. 在Vue组件的模板中创建一个容器元素，用于显示图表。例如：

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

这个例子创建了一个id为“container”的元素，用于显示图表。

这样就可以在Vue中使用Highcharts.js了。需要注意的是，Highcharts.js是一个jQuery插件，如果在Vue项目中使用，需要自行引入jQuery库。另外，为了更好的性能和体验，可以考虑使用Highcharts官方提供的Vue组件库highcharts-vue。