在Echarts 中, echarts官方文档中有一个resize方法,可以实现echarts自适应,如图:
首先先用refs监听实现适配的容器,
// 定义一个ref
let refs=useRef(null);
// 定义一个函数,监听图表变化
const jian=()=>{
echarts.init(refs.current).resize()
}
<div id='main' ref={refs}></div>
然后监听窗口变化,并实现页面图表变化:
window.removeEventListener('resize',jian)
如图:
效果