vue2 按顺序循环调用接口数据 循环echarts图表展示数据

我们在开发过程中经常会用到图表统计，生成报表之类的功能，之前单个echarts比较好操作，但是很多图表的时候用echarts，就需要写成循环好点，会省略好多冗余代码，具体步骤如下：

1.html部分：

<div class="word-h2">趋势分析图：</div>
      <div v-for="(axis,index) in target" :key="index" style="width:100%;height:350px;margin-bottom:20px;overflow:hidden;">
        <div class="world-charts" style="width:100%;height:100%;"></div> 
      </div>   

2.vue部分：

import echarts from 'echarts';
import API_REPORT from '../../api/report';
export default {
    data(){
      return { 
       parameter:{},      
       target:[],
      }
    },
    created (){
      //路由参数部分/report/tardetail?parkId="+this.parkid+"&siteId="+this.siteid+"&Month="+this.month+"&parkName="+this.parkName
      this.parameter=this.$route.query;
      let worldTime=this.parameter.Month.split("-");   
      this.dateTime=worldTime[0]+"年"+worldTime[1]+"月";      
      this.$nextTick(()=> {       
        let mval=this.parameter.Month.split("-")    
        this.MonthsiteList(this.parameter.parkId,this.parameter.siteId,mval[0],mval[1]);
      })      
    }, 
  methods: { 
    MonthsiteList(parkid,siteid,yearval,monthvalue){        
         this.target=[];
         this.totalTime1=[];
         let params={
            currPageNo:this.currPageNo,
            pageSize:this.pageSize,
            parkId:parkid,
            siteId:siteid,
            year:yearval,
            month:monthvalue
          }    
          API_REPORT.Monform(params).then(res => { 
            if (res.code == '200') {             
              for(let i=1;i<=30;i++){
                this.totalTime1.push(i+'日');
              } 
              for(let i=0;i<res.data.length;i++){
                this.target.push(res.data[i].monitorIndex)
              }                
              let stime=this.parameter.Month+"-01";
              let etime=this.parameter.Month+"-31"; 

              //接口按顺序循环调用
              const allApi = [],DataSeries=[];
              this.target.forEach((item, index) => {
                let params2={
                    startTime:stime,
                    endTime:etime,
                    siteId:this.parameter.siteId,
                    monitorIndex:item 			
                };
                const oneApi=API_REPORT.AvgContrast(params2).then(result => {  
                    if(res.code == '200'){ 
                        DataSeries.push(
                            {
                                indexName:item,
                                oldData:result.other.oldValue,
                                nowData:result.other.value
                            }
                        );                        
                    }else{
                        return;
                    }
                })
                allApi.push(oneApi);
              })
              Promise.all(allApi).then(() => {               
                //接口查询完毕
                this.drawRose(DataSeries);
              })
            }else{
              return;
            }
          })        
      },
        drawRose(Data){     
        var roseCharts = document.getElementsByClassName('world-charts'); // 对应地使用ByClassName
        for(var i = 0;i < roseCharts.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素               
            var myChart = echarts.init(roseCharts[i]);
            var option={
                color: ['#07cdbd', '#28bf7e', '#ed7c2f', '#f2a93b'],
                title: {
                    text: "["+Data[i].indexName+"]",
                    textStyle: {
                        color: '#666',
                        fontWeight: 'bold',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#57617B"
                        }
                    },
                },
                legend: {
                    data: ["上月","本月"],
                    textStyle: {
                        color: "#333"
                    },
                    top: "0",
                },     
                toolbox: {
                    show: true,
                    feature: {
                        magicType: {
                            type: ['line', 'bar']
                        },
                        saveAsImage: {} 
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(0,0,0,.1)",
                            },
                        },
                        axisLabel: {
                            interval: 0,                
                            textStyle: {
                                color: "rgba(0,0,0,.6)",
                                fontWeight: "normal",
                                fontSize: "12",
                            },
                        },
                        data:this.totalTime1
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(0,0,0,.1)",
                            },
                        },
                        axisLabel: {
                            //interval: 0,                
                            textStyle: {
                                color: "rgba(0,0,0,.6)",
                                fontWeight: "normal",
                                fontSize: "12",
                            },
                        },
                    }
                ],            
                series:[
                    {
                        name:"上月",
                        type: "line",
                        symbol: "circle",
                        symbolSize: 10,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(98, 201, 141, 0.5)"
                                }, {
                                    offset: 1,
                                    color: "rgba(98, 201, 141, 0.1)"
                                }], false),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#4cb9cf",
                                borderColor: "rgba(98, 201, 141,0.27)",
                                borderWidth: 12
                            }
                        },
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        },
                        data: Data[i].oldData                     
                    },
                    {
                        name:"本月",
                        type: "line",
                        symbol: "circle",
                        symbolSize: 10,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(158, 223, 127, 0.5)"
                                }, {
                                    offset: 1,
                                    color: "rgba(158, 223, 127, 0.1)"
                                }], false),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#9edf7f",
                                borderColor: "rgba(158, 223, 127,0.27)",
                                borderWidth: 12
                            }
                        },
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]

                        },
                        data: Data[i].nowData                     
                    }
                ]
            }
            myChart.setOption(option,true)
            window.addEventListener("resize", () => {
                if(myChart){
                    myChart.resize();    
                }   
            });   
        },
  }   
}

即可实现按顺序循环调用接口数据，echarts循环展示效果。