【前端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);

    });

  },
相关推荐
shenyi2 分钟前
高德地图经纬度显示点位及输入位置选择经纬度
前端
星_离2 分钟前
初识Threejs
前端·three.js
程序员日常点滴3 分钟前
Vxetable v3.6.9 合并单元格+虚拟滚动问题
前端·vue.js
aze7 分钟前
带你30分钟弄明白useContext的原理,教不会你随便喷!
前端·源码
锋利的绵羊7 分钟前
【vue】vue-lazyload重复请求图片,chrome调试disable cache时出现
前端·vue.js
程序视点9 分钟前
免费数据恢复软件推荐:Wise Data Recovery 6.2.0 激活版使用指南
前端·windows
zyfts18 分钟前
手把手教学Nestjs对excel的增删改查
前端·node.js
aini_lovee26 分钟前
python命令行解析模块argparse
服务器·前端·数据库
Data_Adventure31 分钟前
浏览器 `scrollTo` 平滑滚动在虚拟机中失效的原因与解决
前端
六毛的毛43 分钟前
FastAPI入门:表单数据、表单模型、请求文件、请求表单与文件
前端·python·fastapi