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>

效果如下：