Nextjs Apexchart 未在生产中显示

Question

我一直在开发 Next.js 应用程序，并且在开发环境中一切正常，但在生产中我看不到我的区域（图表）。

因此，当我使用 npm run build 构建应用程序，然后使用 npm start 启动它时，图表仅显示 x 和 y 轴，但面积图本身未显示。

我不知道为什么，我在控制台中没有看到任何错误...首先我想也许CSS没有加载，但我认为它是在x/y轴上判断它在没有图表的情况下看起来如何..

"use client"; 

import { useEffect, useState } from "react";
import { DuneClient, RunQueryArgs } from "@duneanalytics/client-sdk";
import { useQuery } from "wagmi";
import dynamic from "next/dynamic";
import { ApexOptions } from "apexcharts";

const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

export interface DuneData {
  Day: string;
  "Total Supply": number;
}

export const TotalSupplyChart = ({data}) => {

  useEffect(() => {
    if (data) {
      setChartOptions({
        chart: {
          id: "apexchart-example",
          type: "area",
          toolbar: {
            show: false,
          },
          zoom: {
            enabled: false,
          },
          animations: {
            enabled: true,
            easing: "easeinout",
            speed: 800,
          },
        },
        dataLabels: {
          enabled: false,
        },
        xaxis: {
          categories,
          labels: {
            show: false,
          },
          tooltip: {
            enabled: true,
          },
        },
        yaxis: {
          labels: {
            formatter: (value) => value.toFixed(2),
          },
        },
        tooltip: {
          x: {
            format: "yyyy-MM-dd",
          },
        },
        grid: {
          strokeDashArray: 4,
        },
        stroke: {
          curve: "smooth",
        },
        fill: {
          type: "gradient",
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.7,
            opacityTo: 0.9,
            stops: [0, 90, 100],
          },
        },
      });

      setChartSeries([
        {
          name: "Total Supply",
          data: seriesData,
        },
      ]);
    }
  }, [data]);

  return (
    <div className="md:min-h-200px lg:min-h-[500px]">
      {typeof window !== "undefined" && (
        <Chart
          options={chartOptions}
          series={chartSeries}
          type={chartOptions.chart?.type}
          height="100%"
          width="100%"
        />
      )}
    </div>
  );
};

这是开发与产品的对比：

Answer 1

在生产和本地环境中从沙丘加载数据是问题，在生产中对于某些图表我需要放置 data.data，还不知道为什么..但它与 apexcharts 无关