顶点图表宽度溢出或不拉伸

Question

我在 vue 中使用 apexcharts。我希望迷你图占其父级宽度的 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%。

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

但是当我调整 window 的大小时（不刷新）它不会保留其大小，它变得比父级小：

我怎样才能让它填满它的父级（绿色容器）的宽度并保持这种状态（响应式）？

谢谢

Answer 1

我发现调整大小后的差距是由于系列中缺少数据以及我为 x 轴设置了最大属性。

这样就解决了问题 #2。

显然图表在它应该呈现之前呈现，所以它没有得到正确的父级宽度，为我解决它的解决方法是在安装组件后不呈现图表。

Answer 2

我遇到了同样的问题，我只是删除了容器上的 display: flex 并解决了问题:)

Answer 3

chart: {
    width: '100%'
}

这可能会解决您的问题

我的问题使用 this method ref

解决了

顶点图表宽度溢出或不拉伸

apexchart width overflows or doesn't strech

javascript

css

vue.js

apexcharts