我用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%。

它溢出其父容器(綠色)和父容器(黃色)，如下所示:

但是當我調整窗口大小時(沒有刷新)，它不會保持原來的大小，它會變得比父窗口小:

我如何讓它填充其父容器(綠色容器)的寬度，并保持這種方式(響應)？

謝謝

我也有同樣的問題，我只是移除了容器上的display: flex，這樣問題就解決了:)

我發現調整大小后的差距是由于系列中缺少數據，并且我已經為x軸設置了max屬性。

這就解決了第二個問題。

很明顯圖表提前渲染了，所以它沒有得到正確的父級寬度， 對我來說，解決這個問題的一個變通方法是在組件掛載后不呈現圖表。

你能做到 xaxis: { 出票位置:& quot介于& quot, }, 默認情況下是& quot在& quot,

它只是把你的數據放在中間，所以你可以在左邊看到一點空間。x軸的右端。

如果你在你的容器上使用flex并且你不能停止使用它，嘗試使用max-width: 100%！重要；在這個容器里-對我有用。

這可能會解決您的問題

我的問題用這種方法解決參考