React Hooks+Echarts自适应实现方法

最新推荐文章于 2023-04-27 15:53:17 发布

Trans-AM

最新推荐文章于 2023-04-27 15:53:17 发布

阅读量2k

点赞数

分类专栏： react hooks 文章标签： react echarts

本文链接：https://blog.csdn.net/weixin_43282184/article/details/107151175

版权

本文介绍了如何在React应用中结合Hooks和Echarts实现图表的窗口自适应。通过在父组件监听window.resize事件，并将resize方法传递给Echarts子组件，确保图表在窗口尺寸变化时能正确调整。

摘要由CSDN通过智能技术生成

父组件给window添加resize事件，调用echarts子组件的resize方法，下面是干货

// 父组件
export function Father() {
   
	const ChildRef = useRef(null); //获取子组件ref, 可以定义多个子组件
	function resizeAll(){
   
		ChildRef.current.resize(); //调用子组件resize方法
		// 如果有多个子组件，就挨个调用
	}
	useEffect(()=>{
   
		window.addEventListener