如何解决vue项目中echarts图表在不同设备屏幕下自适应显示的高级问题？

本文共计917个文字，预计阅读时间需要4分钟。

目录

一、问题描述

1.1 页面布局

1.2 问题复现

二、解决方案

2.1 增加表格resize

2.2 解决canvas画布大小和容器大小不一致的问题

2.3 动手添加延时

2.4 监听浏览器onresize事件

三、总结

目录

• 一、问题描述
• 1.1 页面布局
• 1.2 问题复现
• 二、解决过程
• 2.1 增加图表resize
• 2.2 解决canvas画布大小和容器大小不一致的问题
• 2.3 动手添加延时
• 2.4 监听浏览器onresize事件
• 三、解决方案
• 总结

一、问题描述

1.1 页面布局

项目首页中有多个echarts图表，如下图所示：

页面布局如下：

index页面（绿框）是父页面，父页面中包含A页面（红框）和B页面（橙框），A页面中有3块，共5个echarts图，B页面中有2部分，左侧部分中有3个饼图，右侧部分是列表，综上，index页面共8个ecahrts图。ps：A页面和B页面都是组件化书写。