vue的mounted和created方法的执行
Vue的created 和 mouted的执行顺序
今天在数据可视化的项目中，用了echarts和vue来进行展示。按照我的理解，先执行created中调用后台数据的接口，然后再进行echarts的展现。很遗憾一直失败，而且每次打印都有数据，但是始终无法给echarts绑定。
<template>
<div class="map">
<dv-border-box-8 class="map-chart-border">
<div ref="mapChart" class="map-chart"></div>
</dv-border-box-8>
</div>
</template>
<script>
//引入geo数据
//
import mapApi from '@/api/chinaMap'
import mapData from "@/lib/china";
export default {
data() {
return {
mapData: [],
currentData: [
],
statisticData: []
}
},
created() {
this.getMapData();
},
methods: {
initMapChart() {
console.log(this.currentData)
const el = this.$refs.mapChart;
const myChart = this.$echarts.init(el);
this.$echarts.registerMap("chinaMap", mapData);
const option = {
title: {
text: '地图可视化',
left: '45%',
textStyle: {
fontSize: 20,
color: "#fff"
},
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 100,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
},
textStyle: {
color: "#fff",
fontSize: 18
},
left: '5%'
},
series: [
{
name: '全国疫情热力图',
type: 'map',
map: 'chinaMap',
label: {
show: false
},
zoom: 1.4,
data: this.currentData,
layoutCenter: ['50%', '70%'],
layoutSize: 400
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
getMapData() {
mapApi.getMapData()
.then(response => {
//刷新页面
this.mapData = response.data.data.mapData
for (let i = 0; i < this.mapData.length; i++) {
this.currentData.push({
name: this.mapData[i].name,
value: this.mapData[i].currentConfirmedCount
})
this.statisticData.push({
name: this.mapData[i].name,
value: this.mapData[i].confirmedCount
})
}
})
},
},
mounted() {
this.initMapChart();
},
};
</script>
<style lang="less" scoped>
.map {
width: 60%;
height: 100%; //要给指定高度，这里我在组件外加了固定高度，所以这里给了100%
.map-chart-border {
width: 100%;
height: 100%;
}
.map-chart {
width: 100%;
height: 100%;
padding: 10px;
}
}
</style>
经过半天的探索发现其实created和mounted没有严格的执行顺序，因为异步执行两段代码。
最后附上正确代码
<template>
<div class="map">
<dv-border-box-8 class="map-chart-border">
<div ref="mapChart" class="map-chart"></div>
</dv-border-box-8>
</div>
</template>
<script>
//引入geo数据
//
import mapApi from '@/api/chinaMap'
import mapData from "@/lib/china";
export default {
data() {
return {
mapData: [],
currentData: [
],
statisticData: []
}
},
created() {
this.getMapData();
},
methods: {
initMapChart() {
console.log(this.currentData)
const el = this.$refs.mapChart;
const myChart = this.$echarts.init(el);
this.$echarts.registerMap("chinaMap", mapData);
const option = {
title: {
text: '地图可视化',
left: '45%',
textStyle: {
fontSize: 20,
color: "#fff"
},
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 100,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
},
textStyle: {
color: "#fff",
fontSize: 18
},
left: '5%'
},
series: [
{
name: '全国疫情热力图',
type: 'map',
map: 'chinaMap',
label: {
show: false
},
zoom: 1.4,
data: this.currentData,
layoutCenter: ['50%', '70%'],
layoutSize: 400
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
getMapData() {
mapApi.getMapData()
.then(response => {
//刷新页面
this.mapData = response.data.data.mapData
for (let i = 0; i < this.mapData.length; i++) {
this.currentData.push({
name: this.mapData[i].name,
value: this.mapData[i].currentConfirmedCount
})
this.statisticData.push({
name: this.mapData[i].name,
value: this.mapData[i].confirmedCount
})
}
this.initMapChart();
})
},
},
mounted() {
},
};
</script>
<style lang="less" scoped>
.map {
width: 60%;
height: 100%; //要给指定高度，这里我在组件外加了固定高度，所以这里给了100%
.map-chart-border {
width: 100%;
height: 100%;
}
.map-chart {
width: 100%;
height: 100%;
padding: 10px;
}
}
</style>
效果如下：