使用 G2 图标库时，在初始化 Chart 时，会指定图表宽度，可以指定固定宽度，也可以指定自适应（当然是自适应好用），我们通常会选取flex进行布局，在图表父容器使用了flex：1进行布局时，会发现他只能在视口变大时进行适应，缩小时就失效了，在此需要采用百分比去计算，不可以使用flex。参考代码如下：
<div style="display:flex;">
<div style="width:calc(100% - 300px);"> // 动态计算宽度自适应
<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>
