Vue图表仅在调整窗口大小后加载数据答案

【问题标题】：Vue chart only loading data after resizing the windowVue图表仅在调整窗口大小后加载数据
【发布时间】：2023-02-09 00:04:47
【问题描述】：

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

这是我的顶点图：

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

这是我的图表选项：

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"],
  },

【问题讨论】：

我不知道你如何或何时定义系列，但也许你可以尝试使用 apexcharts updateSeries 方法apexcharts.com/docs/methods/#updateSeries
@PatrykLaszuk 更新系列实际上删除了我的数据，它显示了一个空图表（即使在调整窗口大小时）

标签： javascript vue.js vuex apexcharts

【解决方案1】：

为您的图表设置一个引用 <apexchart ref="chart_ref"/> 并调用以下行：

this.$refs.chart_ref.refresh()

如果仍有问题，您也可以将此行包装在 nextTick 或 setTimeout (0) 中。

【讨论】：