【前端Vue】如何实现echarts图表根据父元素宽度自适应大小

当前我遇到的场景是页面侧边导航栏会产生展开和收缩的变化,其变化会挤压拉伸页面区域,如果echarts图表布局在这些区域,会影响到显示效果;并且当页面缩放时,图表也应当进行自适应变化。

这是导航菜单展开的效果

这是导航菜单收缩的效果

这是浏览器侧边栏打开的效果

这是浏览器缩放后的效果

实现代码如下:

我这里涉及到的是宽度的变化,因此需要在图表组件处将width设置为100%,如果高度也要自适应,跟宽度一样的原理

html 复制代码
<div ref="chart" style="width: 100%;height: 200px; "></div>

还需要将图表在echarts的配置代码中调整好合适的位置

javascript 复制代码
grid: {

          top: "12%",

          left: "2%",

          right: "2%",

          bottom: "3%",

          containLabel: true,

        },

随后在mounted()函数中添加使用ResizeObserver API(用于监听DOM节点变化的API,实现自适应的关键点)

javascript 复制代码
mounted() {

    this.$nextTick(() => {

      this.initChart();

      const resizeObserver = new ResizeObserver(entries => {

        for (const entry of entries) {

          const chartInstance = echarts.getInstanceByDom(entry.target);

          if (chartInstance) {

            chartInstance.resize();

          }

        }

      });



      resizeObserver.observe(this.$refs.chart);

    });

  },
相关推荐
我是华为OD~HR~栗栗呀1 天前
华为od-22届考研-C++面经
java·前端·c++·python·华为od·华为·面试
老黄编程1 天前
FireFox如何滚动截屏?
前端·firefox
_殊途1 天前
HTML-CSS项目练习
前端·css·html
@AfeiyuO1 天前
el-table 表格嵌套表格
前端·elementui·vue
我是华为OD~HR~栗栗呀1 天前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java1 天前
vivo响应式官网
前端·css·html·1024程序员节
麦麦大数据1 天前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区1 天前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗1 天前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长1 天前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js