vue中同时引入两个echarts组件无法自适应图表,resize无效
在父组件引入多个子组件(里面都是echarts图表)的时候,window.onresize()方法只会对最后一个组件里的图表产生效果,主要原因是组件加载顺序导致的,所以我们将window.onresize监听放到父组件去执行父组件(图利为vue3写法,可自行换成vue2):const line = ref();const bar = ref();onMounted(() => {setTim
·
在父组件引入多个子组件(里面都是echarts图表)的时候,window.onresize()方法只会对最后一个组件里的图表产生效果,主要原因是组件加载顺序导致的,所以我们将window.onresize监听放到父组件去执行
父组件(图利为vue3写法,可自行换成vue2):
<echart1 ref="line" />
<echart2 ref="bar" />
const line = ref();
const bar = ref();
onMounted(() => {
setTimeout(function () {
// 监听屏幕变化,重置组件图表
window.onresize = function () {
line.value.resetCharts();
bar.value.resetCharts();
};
}, 200);
});
子组件
// 在方法initCanvas中将myChart return出去,调用initCanvas方法
const resetCharts = () => {
// 重置图表大小
initCanvas().resize();
};
更多推荐
已为社区贡献11条内容
所有评论(0)