Echarts动态生成多个图表，循环绘制图表的ref生成问题

1、实现功能

通过下拉自定义绘制多个图形，多个图表动态循环生成，ref不能动态生成，,循环生成的是一个ref数组，不能自定义ref名称。

3、实现过程（核心代码标红）

（1）、动态生成图表

//自定义图表下拉，选择展示的图形（show表示循环生产的ref数据下标）

      pictureTypeList:[

        { dictCode: "eleRate", dictNameZh: "电回收率",show:0 },

        { dictCode: "waterRate", dictNameZh: "水回收率",show:1 },

        { dictCode: "rubbishRate", dictNameZh: "垃圾回收率",show:2 },

      ],

html:

<!-- 动态生产div  ref循环生成的是一个ref数组名称，-->

      <el-row 

        class="row-box"

        style="position:relative;height:400px;" 

        v-for="(item,index) in pictureTypeList"

         :key="item.dictCode"

         v-show="showLine[item.dictCode]">

         <el-col :span="24" style="height:100%;">

            <div ref="lineRef" class="line-box"></div>

         </el-col>

      </el-row>

（2）、创建图表

//绘制多个图表的方法，ref为此时要绘制的图形，data为此时绘制的图形的series，name为图表标题

drawLine(ref,data,name,yAxis){

      let dataEle = data;

      let paramData = this.innitDate();//处理曲线名称，业务需求不用管

      let _index=this.pictureTypeList.filter(v=>v.dictCode==ref)[0].show;//找到对应下拉图形的dom下标（show表示循环生产的ref数据下标）

      let myChart = echarts.init(this.$refs.lineRef[_index]);//lineRef为动态生产的dom的ref

      // 绘制图表

      let option = {

        title:{

            text: name,

            right:'center'

        },

        tooltip:{

            trigger:'axis',

        },

        legend:{

            type:"scroll",

            left: "left"

        },

        grid:{

          right:'15%'

        },

         toolbox:{

          show:true,

          feature:{

            dataView:{readOnly:false},

            magicType:{type:['line','bar']},

            restore:{},

            saveAsImage:{}

          }

        },

        xAxis: {

          type: "category",

          data: this.month,

          name: "月份",

        },

        yAxis: [

          {

            type: "value",

            name: yAxis,

            nameLocation: "start",

            nameGap: 30,

          },

        ],

        series: dataEle===undefined?[

          {

            name: paramData.startYear,

            data: [],

            type: "bar",

            label:{

              show:true,

              position:'bottom',

              rotate:45

            }

          },

          {

            name: paramData.centerYear,

            data: [],

            type: "bar",

            label:{

              show:true,

              position:'bottom',

              rotate:45

            }

          },

          {

            name: paramData.endYear,

            data: [],

            type: "bar",

            label:{

              show:true,

              position:'bottom',

              rotate:45

            }

          },

        ]:dataEle

      }

      myChart.setOption(option);

    }

（3）、重新绘制图表

getEchartObj(){

//要绘制的图形

      this.selectPicType.map(v => {

        let _ref；

        let _index=this.pictureTypeList.filter(vl=>vl.dictCode==v)[0].show;

         _ref=this.$refs.lineRef[_index];//遍历生成的折线图的Dom

        //通过getInstanceByDom方法获取dom容器

        let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;

        if(myEchars!== undefined){

          myEchars.resize();

        }

      });

    },

mounted() {

    this.getDict();

    this.$nextTick(()=>{

      window.onresize = ()=>{

        this.getEchartObj()

      };

    }

  }