forEachr循环实现异步生成多个echarts图表
需求:
- 需要循环数组发起多个请求,生成多个echarts图表
- 数据量过大,前端缓存查询结果保持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>