vue 循环多个相同的echarts图表

轮播图，绘制图表，通过循环展示所有。

       <template>
               <div class="q_swiper2"   v-for="(item,index) in refPriceList" :key="index">
                        <div id="myChart" >
                           
                        </div>
                        <div class="q_swiper_title" >
                            <span>找网</span>
                            <span>指导价:<span>{{item.catName}}</span></span>
                        </div>
                    </div>
           </template>   
           export default {
       				  name:'Home',
       				  data(){
       				       refPriceList:[
       				           {name:"干电"，id:“15”},
       				            {name:"干电"，id:“15”}
                           ],
       				  },
       				methods:{
                    	 this.$nextTick(function(){     // 不加$nextTick 获取不到对应节点 坑1    
		                  var echartsList = document.querySelectorAll("#myChart"); 
		                   for(var i = 0; i<echartsList.length; i++ ){
		                        var myChart = this.$echarts.init(echartsList[i]);
		                        myChart.setOption({
		                                xAxis: {
		                                    type: 'category',
		                                    boundaryGap: false,
		                                    splitLine:{show: false},//去除网格线
		                                    axisLine:{
		                                        lineStyle:{
		                                            color:'#ffffff',
		                                            width:1.5,//这里是为了突出显示加上的
		                                        }
		                                    },
		                                    data:this.refPriceList[i+1].aneacharts.reverse(),
		                                },
		                                yAxis: {
		                                    splitLine:{show: false},//去除网格线
		                                    min:0,                  // y轴最小值
		                                    max:this.refPriceList[i+1].aneacharts_pice[6]*2,                 // y轴最大值
		                                    interval:20,            // y轴间隔值
		                                    zlevel:0,               // y轴图层
		                                    axisLine:{
		                                        lineStyle:{
		                                            color:'#ffffff',
		                                            width:1.5,//这里是为了突出显示加上的
		                                            opacity:0.4,
		                                        },
		                                        value:'',
		                                    },
		                                    axisLabel : {    // y轴数据隐藏
		                                        formatter: function(){
		                                            return "";
		                                        }
		                                    },
		                                    axisTick: {
		                                        show: false,   // 隐藏Y轴刻度
		                                        value:false,
		                                    },
		                                },
		                                grid: {  
		                                    left: '1%',  
		                                    right: '4%', 
		                                    top:'8%', 
		                                    bottom: '1%',  
		                                    containLabel: true  
		                                },  
		                                series: [
		                                    {
		                                        type: 'line',
		                                        zlevel:20,
		                                        label: {
		                                            normal: {
		                                                show: true,
		                                                position: 'top'
		                                            },
		                                        },
		                                        lineStyle:{ // 折线图颜色
		                                                color:'#ffffff',
		                                                width:1.5,//这里是为了突出显示加上的
		                                                // opacity:0.5,
		                                        },
		                                        itemStyle : { 
		                                            normal : { 
		                                                color:'#ffffff',
		                                                size:'10px'
		                                            },
		                                        },
		                                        areaStyle:{
		                                            opacity:0.2,
		                                            //  shadowColor: 'yellow',
		                                        },     // 图表区域颜色
		                                        
		                                        data:this.refPriceList[i+1].aneacharts_pice.reverse(),
		                                    }
		                                ]
		                            });
		                        window.addEventListener('resize',()=>{
		                                console.log('屏幕发生了变化！')
		                                myChart.resize();
		                        })
		                        
		                    }
		                })
                    } ，
               mounted(){
                 this.myEcharts();
               }       
          }
    
  

实测完美解决！