调整窗口大大后，仅加载数据

Question

我正在使用代码上的ApexChart显示带有一些数据的图表，但是当页面加载时，我的数据不会显示，仅显示我缩放/缩小/缩小或调整窗口大小时，我发现有点奇怪。 我在Apexcharts github上找到了类似的问题，但是自2019年以来一直开放，并且并非真正活跃，所以我在这里问，也许有人有相同的问题并找到了某种方法来解决它。

---

这是我的ApexChart：

<v-col cols="12">
 <apexchart
  type="line"
  height="350"
  :options="chartOptions"
  :series="series"
 ></apexchart>
</v-col>

这是我的ChartOptions：

chartOptions: {
    chart: {
      height: 350,
      type: "line",
      zoom: {
        enabled: false,
      },
      toolbar: {
        show: false,
      },
    },
    legend: {
      labels: {
        colors: "#FFFFFF",
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
    },
    title: {
      align: "left",
    },
    grid: {
      row: {
        colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
        opacity: 0.5,
      },
    },
    xaxis: {
      type: "datetime",
      categories: [],
      labels: {
        datetimeUTC: false,
        style: {
          colors: "#FFFFFF",
        },
      },
    },
    yaxis: [
      {
        title: {
          text: "Energie",
          style: {
            color: "#FFFFFF",
          },
        },
        labels: {
          style: {
            colors: "#FFFFFF",
          },
        },
        decimalsInFloat: 1,
      },
      {
        opposite: true,
        title: {
          text: "Puissance",
          style: {
            color: "#FFFFFF",
          },
        },
        labels: {
          style: {
            colors: "#FFFFFF",
          },
        },
        decimalsInFloat: 1,
      },
    ],
    tooltip: {
      enabled: false,
    },
    colors: ["#8AB4F7", "#8DCD7F"],
  },

Answer 1

将REF设置为图表＆lt; ApexChart Ref =“ Chart_ref”/＆GT;并调用以下行：

this.$refs.chart_ref.refresh()

您还可以将此行包裹在NextTick或SettimeTimeOut（0）中，如果仍在错误。