phantomjs不支持获取vue动态创建的dom，如vue中的

需求：

现有一个集合对象，想用v-for在html中显示出来，显示的内容是一个个的div，需要给div赋值动态的id，然后在使用echart获取到对应的div初始化渲染出来一个个的图表。
如：

<template>
    <div class="App">

        <div v-for="(hangdao,index) in yingli.hangDaoList">
           <div :id='generateYLId("yuntu",index)' ref='generateYLId("yuntu",index)'></div>
        </div>

    </div>
</template>

<script>
    export default {
      name: "App",
      created(){
        console.log('created');
      },
      data () {
        return {
          hangDaoList: [{}, {}]
        }
      },
      methods: {
        generateYLId(type,index){
          if(type=='yuntu')
            return 'yingliyuntu_'+index;
          else if(type=='cedian')
            return 'yinglicediantu_'+index;
        },
        loadYingli(){
          let vue = this;
          let totalHeight = 935;//屏幕总高度
          let yingliSize = vue.hangDaoList.length;
          let yuntuChartArr = [];
          let cediantuChartArr = [];

          //设置高度
          let yinglidiv = vue.$refs['generateYLId("cedian",index)'];
          for(let i=0;i<yinglidiv.length;i++){
            yinglidiv[i].style.height = totalHeight/(yingliSize*2)+"px";
          }
          
          for(let i=0;i<vue.hangDaoList.length;i++){
            let a = document.getElementById('yingliyuntu_'+i);
            let b = document.getElementById('yinglicediantu_'+i);
            //初始化echart容器
            yuntuChartArr.push(vue.$echarts.init(a));
            cediantuChartArr.push(vue.$echarts.init(b));
            //生成echarts
            generateChart(yuntuChartArr[i],cediantuChartArr[i],vue.hangDaoList[i]);
          }
          function generateChart(a,b,c){
            //...
          }
        },
        async mounted() {
          this.loadYingli();
        }
        
      }//end method
      
    }//end export
</script>

现象：

代码写完后，在谷歌浏览器测试是没问题的，按照list生成若干个echart图，如图：

image.png
但在phantomjs中执行时，报错：
error:null is ...(f.style)
反正就是f为null，有时报undefined，其实就是vue.$refs['generateYLId("cedian",index)']这个东西读到的是null，后来用document.getElementById('yingliyuntu_'+i);也是读不到的。

解决：

既然vue的v-for动态生成的div元素在phantom里执行不了，那就用原生的js写试试吧，下面是主要改动部分，后面会贴全的代码：

<div id="divYingli" ref="divYingli"></div>
...
...
let divYingli = vue.$refs['divYingli'];//非动态生成的是可以正常获取的
...
...
for(let i=0;i<vue.hangDaoList.length;i++){
            createSubDiv(divYingli,i);//原生js动态创建div，不能用vue的v-for动态创建，否则在phantomjs中无法解析。
            let a = document.getElementById('yingliyuntu_'+i);
            let b = document.getElementById('yinglicediantu_'+i);
            //设置高度
            a.style.height = totalHeight/(yingliSize*2)+"px";
            b.style.height = totalHeight/(yingliSize*2)+"px";
            //初始化echart容器
            yuntuChartArr.push(vue.$echarts.init(a));
            cediantuChartArr.push(vue.$echarts.init(b));
            //生成echarts
            generateChart(yuntuChartArr[i],cediantuChartArr[i],vue.hangDaoList[i]);
}

完整改动部分：

<template>
  <div class="App">

    <div id="divYingli" ref="divYingli">
<!--      <div v-for="(hangdao,index) in yingli.hangDaoList">-->
<!--        <div :id='generateYLId("yuntu",index)' ref='generateYLId("cedian",index)'></div>-->
<!--        <div :id='generateYLId("cedian",index)' ref='generateYLId("cedian",index)'></div>-->
<!--      </div>-->
    </div>

  </div>
</template>

export default {
      name: "App",
      created(){
        console.log('created');
      },
      data () {
        return {
          hangDaoList: [{}, {}, {}]
        }
      },
      methods: {
        /*generateYLId(type,index){
          if(type=='yuntu')
            return 'yingliyuntu_'+index;
          else if(type=='cedian')
            return 'yinglicediantu_'+index;
        },*/
        loadYingli(){
          let vue = this;
          let totalHeight = 935;//屏幕总高度
          let yingliSize = vue.hangDaoList.length;
          let yuntuChartArr = [];
          let cediantuChartArr = [];

          //设置高度
          // let yinglidiv = vue.$refs['generateYLId("cedian",index)'];
          // for(let i=0;i<yinglidiv.length;i++){
          //   yinglidiv[i].style.height = totalHeight/(yingliSize*2)+"px";
          // }

          let divYingli = vue.$refs['divYingli'];//非动态生成的是可以正常获取的
          for(let i=0;i<vue.hangDaoList.length;i++){
            //原生js动态创建div，不能用vue的v-for动态创建，否则在phantomjs中无法解析。
            createSubDiv(divYingli,i);
            let a = document.getElementById('yingliyuntu_'+i);
            let b = document.getElementById('yinglicediantu_'+i);
            //设置高度
            a.style.height = totalHeight/(yingliSize*2)+"px";
            b.style.height = totalHeight/(yingliSize*2)+"px";
            //初始化echart容器
            yuntuChartArr.push(vue.$echarts.init(a));
            cediantuChartArr.push(vue.$echarts.init(b));
            //生成echarts
            generateChart(yuntuChartArr[i],cediantuChartArr[i],vue.hangDaoList[i]);
          }

          function createSubDiv(obj,index){
            //添加div ，存放指标名称
            var div1 = document.createElement("div");
            div1.setAttribute('height',totalHeight/(yingliSize*2)+"px");
            div1.setAttribute('id','yingliyuntu_'+index);
            obj.appendChild(div1);
            //添加div ，存放指标名称
            var div2 = document.createElement("div");
            div2.setAttribute('height',totalHeight/(yingliSize*2)+"px");
            div2.setAttribute('id','yinglicediantu_'+index);
            obj.appendChild(div2);
          }
          function generateChart(a,b,c){
            //...
          }
        },
        async mounted() {
          this.loadYingli();
        }

      }//end method

    }//end export