使用 G2 圖標(biāo)庫(kù)時(shí)肖爵，在初始化 Chart 時(shí)，會(huì)指定圖表寬度臀脏，可以指定固定寬度劝堪，也可以指定自適應(yīng)（當(dāng)然是自適應(yīng)好用）法挨，我們通常會(huì)選取flex進(jìn)行布局，在圖表父容器使用了flex：1進(jìn)行布局時(shí)幅聘，會(huì)發(fā)現(xiàn)他只能在視口變大時(shí)進(jìn)行適應(yīng)，縮小時(shí)就失效了窃植，在此需要采用百分比去計(jì)算帝蒿，不可以使用flex。參考代碼如下：
<div style="display:flex;">
<div style="width:calc(100% - 300px);"> // 動(dòng)態(tài)計(jì)算寬度自適應(yīng)
<div id="container"></div>
</div>
<div style="width:300px">aaa</div>
</div>
<!-- <div id="container"></div> -->
<script>
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
]
const chart = new Chart({
container: 'container',
autoFit: true,
height: 300,
})
chart.data(data)
chart.interval().position('genre*sold')
chart.render()
</script>
