如何在 Nuxt 3.7.0 中包含高图表？

Question

如何在我的 nuxt vue 应用程序中包含此组合图 https://www.highcharts.com/demo/highcharts/combo-dual-axes 图表？ 我遵循了这个 https://www.npmjs.com/package/highcharts-vue 文档，但无法了解如何将此包与我的 nuxt vue 应用程序集成。 在文档中提到，对于 vue 3 我应该使用这个

// 对于 Vue 3 应用程序使用（HighchartsVue）

但是在我的 nuxt 应用程序中没有任何地方有类似 app.use() 的东西。

我收到此消息：无法解析组件：highcharts

这是我的index.vue 文件

<template>
<highcharts :constructorType="'stockChart'" 
:options="testOptions"></highcharts>
</template>

<script>
  import { Chart } from 'highcharts-vue';
  import Highcharts from 'highcharts-vue'

  export default {
  name: 'Home',

  data() {
    return {
        testOptions: {
            series: [{
                data: [1, 2, 3] // sample data
            }]
        },
      }
    },
  }

</script>

<style></style>

有人可以告诉我如何正确导入这个 highcharts-vue 包并获得我需要的图表吗？

Answer 1

如果您想在 Nuxt 3 项目中使用官方支持的

highcharts-vue

包，请执行以下一些步骤来使其工作（Highcharts 是一个客户端库，因此需要额外的设置，以便 Nuxt 知道如何处理它）仅在客户端）：

1. 在 Nuxt 的

   highcharts.client.js

   目录下创建

   /plugins

   文件：

import { defineNuxtPlugin } from '#app';
import Highcharts from 'highcharts';
import HighchartsVue from 'highcharts-vue';
import stockInit from 'highcharts/modules/stock';

export default defineNuxtPlugin({
   name: 'highcharts-vue',
   parallel: true,
   setup (nuxtApp) {
       if (typeof Highcharts === 'object') {
           stockInit(Highcharts);
       }
       nuxtApp.vueApp.use(HighchartsVue);
   }
});

在此文件中，您可以使用您想要使用的模块设置 Highcharts。

2. 在您的

   nuxt.config.ts

   文件中注册插件：

export default defineNuxtConfig({
    ... the rest of your config
    plugins: [
        // Ensure this runs on client side only
        { src: '~/plugins/highcharts.client.js', mode: 'client' }
    ]
});

3. 在

   highcharts

   文件中使用

   .vue

   组件：

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

const options = ref({
    title: {
        text: 'My chart'
    },
    series: [{
        data: [1, 2, 3]
    }]
});
</script>

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

请告诉我这是否适合您。