J'ai ajouté cet exemple simple d'apexcharts.com. Je suis presque sûr que l'importation est correcte. Je ne fais référence à la fenêtre nulle part. Lors de l'ajout de ce fichier, toute mon application s'arrête. Je pense que cela a quelque chose à voir avec la configuration SSR ou Nuxt.
<template> <div id="chart"> <apexchart type="donut" width="380" :options="chartOptions" :series="series" ></apexchart> </div> </template> <script> import VueApexCharts from "vue-apexcharts"; export default { name: "Donut", components: { apexchart: VueApexCharts, }, data() { return { data: { series: [44, 55, 41, 17, 15], chartOptions: { chart: { type: "donut", }, responsive: [ { breakpoint: 480, options: { chart: { width: 200, }, legend: { position: "bottom", }, }, }, ], }, }, }; }, }; </script>
SSR/SSG se casse lors de l'emballage de votre composant dans un objet nuxt
<client-only>
组件中。这将防止在尝试引用不存在的window
.Par exemple
Comme expliqué dans ma réponse liée (dernière phrase, en utilisant la syntaxe des composants directs), voici comment créer une configuration de travail correcte :
J'en ai également retiré un
data
,它嵌套了整个配置,已经在data()
à l'intérieur. Cela a entraîné une inadéquation des accessoires, comme le montre l'erreur de la console du navigateur.