apexchart 宽度溢出或不拉伸

Question

我正在使用 apexcharts 和 vue。我希望迷你图占据其父级宽度的 100%。

这就是我所做的：

<div>
  <apexchart
    :options="chartOptions"
    :series="series"
    height="150"
    style="width: 100%"
  />
</div>

我还尝试将宽度设置为组件的支柱，但其行为相同。

这是我的图表选项：

chartOptions: {
   chart: {
       type: 'area',
       sparkline: {
           enabled: true
       }
   },
   dataLabels: {
       enabled: false
   },
   stroke: {
       curve: 'straight',
       width: 3,
   },
   xaxis: {
       type: 'datetime',
   }
}

所以这里没什么特别的，它是从 apex 仪表板示例复制的，我添加的唯一内容是尝试将宽度设置为 100%。

它溢出了它的父级（绿色）和父级容器（黄色），如下所示：

而且当我调整窗口大小（不刷新）时，它不会保留其大小，它会变得比父窗口小：

如何让它填充其父级（绿色容器）的宽度并保持这种状态（响应式）？

谢谢

Answer 1

我遇到了同样的问题，我刚刚删除了display: flex容器，问题就解决了:)