Nuxt.js:窗口未定义 apexcharts/vue-apexcharts
P粉366946380
P粉366946380 2023-11-09 22:07:08
0
2
380

我从 apexcharts.com 添加了这个简单的示例。很确定导入是正确的。我没有在任何地方引用窗口。添加此文件时,我的整个应用程序就停止了。我相信这与 SSR 或 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>


P粉366946380
P粉366946380

全部回复(2)
P粉834840856

正如我的链接答案中所解释的(最后一句,使用直接组件语法),以下是如何制作正确的工作设置:




我还删除了一个 data,它嵌套了整个配置,已经在 data() 内部。这导致了 props 不匹配,如浏览器控制台错误所示。

热门教程
더>
最新下载
더>
网站特效
网站源码
网站素材
프론트엔드 템플릿
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!