(echarts)首次进入页面地图有极短时间空白

(echarts)首次进入页面地图有极短时间空白

• 原因：加载页面时需请求接口获取数据，之后才渲染地图，因此造成极短的时间差

• 解决思路：
  1.请求数据之前先初始化地图
  2.接口调用完成之后再渲染地图

代码：

created() {  ...//先初次加载地图this.$nextTick(() => {this.initCharts()})//后请求接口获取数据this.onSubmit()
},methods: {//查询接口onSubmit() {GetgetLngTradeTrader({...this.form, ...}).then((res) => {if (res.code == 0) {this.mapDataAll = []this.mapDataAll = res.page  //数据this.maplnglat = res.lnglat //经纬度if (this.mapDataAll.length != 0) { //有数据时渲染地图this.$nextTick(() => {this.initCharts()})} else { //无数据时提示this.$message.warning('暂无数据')}} else { //接口调取失败提示this.$message.error('系统错误，稍后查询')}})},//地图initCharts() {//2.初始化echartsvar myChart = echarts.init(document.getElementById('mapEcharts'))//3.准备数据var data = []data = this.mapDataAll......}  
}