Vvue Element组件Tabs中使用Echarts折线图出现宽度问题

1、出现的问题

    vue项目 Element UI组件Tabs分页中插入Echarts绘制折线图图表，进入折线图tabs页面折线图宽度只有100px；但是在css定义中折线图宽度是100%；当浏览器窗口大小发生改变时echarts折线图宽度回复正常；

2、为什么会出现这样的问题

    Echarts在页面未渲染时就先页面一步加载了；由于图表在tabs标签页里，跳转页面没有选中tabs标签，没有选中的tabs标签是没有内部元素宽高的；Echarts会在获取不到DOM容器宽高的情况下使用默认的大小（width:100px;）创建图表；

3、解决问题

    调整echarts初始化加载顺序；错误方法：是把Echarts初始化事件放入mounted()里完成初始化；正确方法：在tabs标签事件

Tabs Events

事件名称	说明	回调参数
tab-click	tab 被选中时触发	被选中的标签 tab 实例

中对应的标签内调用Echarts初始化事件

// 标签页tab点击事件

      tabClick(tab, event){

        if(this.activeName=="fourth"){//当tab标签为fourth时

          this.handelSelectLevCapByResId();

          window.addEventListener("resize",()=>{//浏览器窗口的缩放监听

            this.pieChart1.resize();

        })

        }

      },

//获取对应Echarts折线图数据

      handelSelectLevCapByResId(){

        selectLevCapByResId(this.reservoir).then(res=>{

          this.handelChaets();

          this.handelChaets2();

          let data = res.data.data;

          this.tableData=data.levCapAreaList;

          let xData=data.capData.line;

          let seriesData=data.waterLevelData.line;

          this.pieChart1.setOption({

            xAxis: {

              data:xData

            },

            series: [

              {

                type: 'line',

                symbol: 'none',

                smooth: true,

                data:seriesData,

              }

            ],

          });

          let areaData=data.areaData.line;

          this.pieChart2.setOption({

            xAxis: {

              data:areaData

            },

            series: [

              {

                type: 'line',

                symbol: 'none',

                smooth: true,

                data:seriesData,

              }

            ],

          })

        })

      },

// 第一个折线图

      handelChaets(){

        this.pieChart1=echarts.init(document.getElementById('pieChart'));

        this.pieChart1.setOption(this.chartOption);

        window.addEventListener("resize",()=>{

          this.pieChart1.resize();

        })

      },

      // 第二个折线图

      handelChaets2(){

        this.pieChart2=echarts.init(document.getElementById('pieChart2'));

        this.pieChart2.setOption(this.chartOption2);

        window.addEventListener("resize",()=>{

          this.pieChart2.resize();

        })

      },

    },

  };