react中如和让echarts的图自适应

在react中,把echarts作为一个组件单独引进来,我们把他放在页面显示的时候会遇到,图不会随着分辨率变化。

在echarts组件中,我们需要把echats  return出去
render(){
	return (
		<div ref="chart" className={styles.charts} />
	)
}

按正常逻辑来说我们只需要把charts 的宽高设为100%,再把canvas设为100%,就可以实现了,但是你通过控制台发现,charts和canvas之间还有一个div。

所以你要再less中把那个divde 宽高也设置为100%
.charts{
	width;100%;
	height:100%;
	div:first-child{
		width:100% !important;
		height:100% !important;
	}
	canvas{
		width:100% !important;
		height:100% !important;
	}
}

你可能感兴趣的:(react.js,javascript,css3)