我正在使用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%。
它会溢出其父项(绿色)和父项的容器(黄色),如下所示:
但是,当我调整窗口大小(不刷新)时,它不会保持原来的大小,它会变得比父窗口小:
如何使它填充其父容器(绿色容器)的宽度并保持这种状态(响应)?
谢谢
3条答案
按热度按时间f0brbegy1#
我也遇到了同样的问题,我只是删除了容器上的
display: flex
,这就解决了问题:)3bygqnnd2#
我发现调整大小后差距是由于序列中缺少数据以及我为x轴设置了max属性。
这就解决了第二个问题。
显然,图表呈现之前,它应该,所以它没有得到正确的父的宽度,一个解决办法,我是不呈现图表后,组件安装。
sq1bmfud3#
这可能会解决您问题
我的问题已使用this method ref解决