vue.js apexchart宽度溢出或未拉伸

ddrv8njm  于 2022-11-17  发布在  Vue.js
关注(0)|答案(3)|浏览(180)

我正在使用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 Jmeter 板的例子复制的,我添加的唯一的东西是试图设置宽度100%。
它会溢出其父项(绿色)和父项的容器(黄色),如下所示:

但是,当我调整窗口大小(不刷新)时,它不会保持原来的大小,它会变得比父窗口小:

如何使它填充其父容器(绿色容器)的宽度并保持这种状态(响应)?
谢谢

f0brbegy

f0brbegy1#

我也遇到了同样的问题,我只是删除了容器上的display: flex,这就解决了问题:)

3bygqnnd

3bygqnnd2#

我发现调整大小后差距是由于序列中缺少数据以及我为x轴设置了max属性。
这就解决了第二个问题。
显然,图表呈现之前,它应该,所以它没有得到正确的父的宽度,一个解决办法,我是不呈现图表后,组件安装。

sq1bmfud

sq1bmfud3#

chart: {
    width: '100%'
}

这可能会解决您问题
我的问题已使用this method ref解决

相关问题