Echarts 多个图表resize()方法只生效一个，如何自适应父级div的宽高

多个 Echarts 图表自适应问题解决办法

最新推荐文章于 2025-09-11 20:04:01 发布

原创最新推荐文章于 2025-09-11 20:04:01 发布 · 3.6k 阅读

8 ·

CC 4.0 BY-SA版权

Echarts 专栏收录该内容

2 篇文章

订阅专栏

博客主要探讨多个 Echarts 图表下 resize() 方法只生效一个的问题。介绍了两种多个图表自适应情况，即改变窗口大小和改变 div 宽度。分析了相应思路，如遍历 Dom 调用 resize 方法、采用 DOM 二级绑定方式等，并给出不同场景下的解决办法，包括组件内和组件间情况。

1、问题描述

处理在多个echarts图表下 resize()方法只生效一个，最后一个的行为会覆盖前面的。多个图表自适应有两种情况:

第一种情况是改变窗口大小要多个图表自适应,

第二种情况是窗口大小不变，整个页面分为两部分，左边菜单导航树形宽度占20%，右边图表宽度占80%，当左边菜单宽度变为10%时图表自适应变为90%;

2、思路分析

（1）、改变窗口大小：

方法 1、遍历生成的折线图的Dom，通过getInstanceByDom方法获取dom容器，调用每个图形的resize方法，在window.onresize监听窗口变化时，调用getEchartObj（）方法

方法2、因为采用DOM一级绑定方式会只适应一个图表，在使用window.onresize监听窗口变化时，要使用DOM二级绑定方式：addEventListener方式;（注释的位置）

（2）、改变div的宽度：

3、解决办法

改变窗口大小:

（1）当多个图形在一个vue组件中时：(方法 1\方法2)

methods:{
    //饼图分析
    drawPie() {
      let myChart = echarts.init(this.$refs['payWayRef']);
      // 绘制图表
      let option = {
        title: {
          text: "分析",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: `{a}<br/>{b}:{c}({d}%)`
        },
        legend: {
          orient: "vertical",
          left: "left",
          selected: this.legendData
        },
        toolbox: {
          show: true,
          feature: {
            // dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        series: []
      };
      myChart.setOption(option);
      // window.addEventListener("resize",()=>{
      //   myChart.resize()
      // })
    },
    //曲线图分析
    drawLine(data) {
      // this.dateArr.pop();
      let lineCount = data.lineCount;
      let lineMoney = data.lineMoney;
      let myChart = echarts.init(this.$refs["payWayLineRef"]);
      // 绘制图表
      let option = {
        title: {
          text: "分析",
          left: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          type: "scroll",
          left: "left"
        },
        toolbox: {
          show: true,
          feature: {
            // dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          right: "15%"
        },
        xAxis: {
          type: "category",
          data: this.dateArr,
          name: "月份"
        },
        yAxis: [
          {
            type: "value",
            name: "笔数",
            nameLocation: "start",
            nameGap: 30,
            position: "left",
            splitLine: false
          },
        ],
        series: [
          {
            name: "笔数",
            data: lineCount,
            yAxisIndex: 0,
            type: "line"
          },
          {
            name: "金额",
            data: lineMoney,
            yAxisIndex: 1,
            type: "bar"
          }
        ]
      };
      myChart.setOption(option);
      // window.addEventListener("resize",()=>{
      //   myChart.resize()
      // })
    },
    //处理多个图形的自适应
    getEchartObj(){
        let arr = ['payWayRef',"payWayLineRef"]
        arr.map(v => {
        let  _ref=this.$refs[v];//遍历生成的折线图的Dom
        //通过getInstanceByDom方法获取dom容器
        let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
        if(myEchars!== undefined){
          myEchars.resize();
        }
      });
    }
}
mounted(){
    this.$nextTick(()=>{
        window.onresize = ()=>{
            this.getEchartObj()
        }
    })
}

（2）当多个图形在不同子组件中时：（父组件/多个子组件）


//父组件  father
//子组件1   son1
//子组件2     son2

import echarts  form "echarts"


//父组件主要代码块

<son1 ref='son1'></son1>
<son2 ref='son2'></son2>

mounted(){
    this.$nextTick(()=>{
        window.onresize = ()=>{
            this.$refs.son1.reResizeFn()
            this.$refs.son2.reResizeFn()
        }
    })
}


//son1子组件主要代码块(echarts为引入的echarts对象)

    <div id='echart1'></div>

   //处理多个图形的自适应
    reResizeFn(){
        let  _ref=document.getElementById("echart1")
        //通过getInstanceByDom方法获取dom容器
        let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
        if(myEchars!== undefined){
          myEchars.resize();
        }
    }


//son2子组件主要代码块
    <div id='echart1'></div>

    //处理多个图形的自适应
    reResizeFn(){
        let  _ref=document.getElementById("echart2")
        //通过getInstanceByDom方法获取dom容器
        let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
        if(myEchars!== undefined){
          myEchars.resize();
        }
    }

改变div的宽度：

（1）左侧菜单，右侧内容的场景