echarts 随div变化自适应（不是随窗口大小变化）

最新推荐文章于 2024-06-11 16:36:33 发布

webhyx

最新推荐文章于 2024-06-11 16:36:33 发布

阅读量8.6k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： javascript echarts 文章标签： echarts javascript html

本文链接：https://blog.csdn.net/Javavison/article/details/120065990

javascript 同时被 2 个专栏收录

4 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

在某些特定需求下，echarts图需要随着外层div放大缩小而自适应变化，而不是像随着窗口变化而自适应的一般需求。外层div的宽高的在变化时，echart图大小是不会实时改变的。
以下动图修改的是组件最外层div宽高，内部所有标签都是按百分比写的，而echart部分不会自适应改变。
在这里插入图片描述

解决办法：element-resize-detector

其中的listenTo方法可以监听指定标签dom变化，并触发回调函数。

导库：

import elementResizeDetectorMaker from "element-resize-detector";

html中：

<div ref="agriEcoDev" style="width: 100%; height: 65%"></div>

在vue中methods创建echart的方法中：

使用elementResizeDetectorMaker.listen()
监听div变化时触发resize()

关键代码：

//  随外层div的大小变化自适应
        const _this = this
        let erd = elementResizeDetectorMaker();
        erd.listenTo(this.$refs.监听的dom, () => {
            _this.$nextTick(() => {
                echart实例.resize();
            })
        })