forEachr循环实现异步生成多个echarts图表

forEachr循环实现异步生成多个echarts图表

需求：

1. 需要循环数组发起多个请求，生成多个echarts图表
2. 数据量过大，前端缓存查询结果保持1分钟

本人使用的是vue框架，但是是创建一个id document.getElementById() 方式获取dom结构
循环动态生成id

JS里异步获取图表数据，循环获取每个dom的id，然后动态渲染每个图表

上图使用 this.$nextTick是为了解决在图表元素并未加载的情况下进行eharts.init（），会报错 Cannot read property ‘getAttribute’ of null，因为eharts并未找到该元素，故无法对其进行渲染。

附上完整代码

<template>
   <div>
    <el-col :xs="24" :md="24" :lg="24" :xl="24" v-for="(item, i) in form.selectItem" :key="i" style="min-width: 300px; position: relative">
        <el-col :xs="24" :md="12" :lg="12" :xl="8" v-for="(ele, indexs) in showList[item]" :key="i - indexs" style="min-width:300px;position: relative;">
            <div style="position: relative">
                <div class="charts-dis" :id="`chart${indexs}-${item}`" style="width: 100% !important;min-width: 200px;height: 400px;"></div>
            </div>
        </el-col>
    </el-col>
   </div>
    
</template>
<script>
export default {
     data() {
         return {
             showList: {
                
             },
             form:{
                 selectItem:['a','b']
             }
         }
     },
     methods: {
         refreshChart(){
             axios.get('/user?ID=12345').then(function (response) {
                 this.showList={
                      a:[[1,'x'],[2,'y'],[3,'z']],
                      b:[[1,'x'],[2,'y'],[3,'z']]
                 }
                 this.form.selectItem.forEach(pItem=>{
                      this.showList[pItem].forEach(async (item, i)=>{
                          const chartData = await this.getChartDataWithCache(item, pItem);
                          this.$nextTick(function () {
                            let myChart = this.$echarts.init(
                                document.getElementById("chart" + i + "-" + pItem)  
                            );
                            myChart.setOption(chartData, true);
                          });
                       })
                 })
             })
             .catch(function (error) {
                console.log(error);
             });
         },
        //  异步加载图表
         getChartDataWithCache(item, pItem){
            return new Promise((res)=>{
                let postUrl=`/getChart?id=${item[0]}&p=${pItem}`;
                let datas = window.sessionStorage.getItem(postUrl);
                if(JSON.parse(datas)){
                    let urlData = JSON.parse(datas);
                    if (urlData.data) {
                        // 缓存过期时间
                        let date=new Date()
                        let s = this.timeDIff(date.format("YYYY-MM-DD HH:mm:ss"),urlData.date.format("YYYY-MM-DD HH:mm:ss"))
                        if (s < 2) {
                            res(urlData.data);
                            return;
                        }
                    }
                }
                this.getAxiosChartData(res, postUrl, item, pItem);
            })
         },
         getAxiosChartData(res, postUrl, item, pItem){
             axios.post(postUrl).then(data=>{
                //  按需定义option
                let option={}; //echarts 对象
                // 缓存起来
                window.sessionStorage.setItem(postUrl, JSON.stringify({ date: new Date(), data: obj }));
                res(obj);
             })
         }, 
        //  计算时间差
         timeDIff(time1, time2) {
            let begin1 = time1.substr(0, 10).split("-");
            let end1 = time2.substr(0, 10).split("-");
            let date1 = new Date(begin1[1] + -+begin1[2] + -+begin1[0]);
            let date2 = new Date(end1[1] + -+end1[2] + -+end1[0]);
            let m = parseInt(Math.abs(date2 - date1) / 1000 / 60);
            let min1 =
                parseInt(time1.substr(11, 2)) * 60 + parseInt(time1.substr(14, 2));
            let min2 =
                parseInt(time2.substr(11, 2)) * 60 + parseInt(time2.substr(14, 2));
            let n = min2 - min1;
            let minutes = m + n;
            return minutes;
         },
     },
     mounted: function (){
         this.refreshChart();
     }

}
</script>