急，vue 中在使用echarts不能挂axios获取到的数据。

Question

挂上dataY时可以显示出折线图，tems则不行，其中tems和dataY数据格式是相同的。

<template>

<div>

   <Mheader>分析</Mheader>

    <div id="echarts" :style="{height:height,width:width}"></div>

</div>

</template>

<script>

import Mheader from '../base/Mheader.vue'

import echarts from 'echarts'

import {getHum,getTem,getAlldata,getIllsum} from '../api'

export default {

    data() {

        return {tems:[],hums:[],illsums:[],  dataY:["5","10", "15", "30", "14"]}

    },

    props: {

        height: {

            type: String,

            'default': '300px'

        },

        width: {

            type: String,

            'default': "100%"

        }

    },

        mounted() {

            this.draw();

        },

    created(){

        this.getTems();

        this.getHums();

        this.getIllsums();

    },

    methods: {

        async getTems(){

        let tems=await getTem();

        this.tems=tems;

        console.log(tems);

    },

        async getHums(){

            let hums=await getHum();

            this.hums=hums;

        }

        ,async getIllsums(){

            let illsums=await getIllsum();

            this.illsums=illsums;

        },

        draw: function(){

            let echart = echarts.init(document.getElementById('echarts'));

            var option = ({

                title: { text: '温度历史折线图' },

                tooltip: {},

                xAxis: {

                    data:["5","4","3","2","最新"]

                },

                yAxis: {},

                series: [{

                    name: '温度',

                    type: 'line',

                    color:['red'],

                    data:[]

                }]

            });

            for(var i = 0; i < 5;i++){

// option.series[0].data[i] = this.tems[i];不能

                option.series[0].data[i]=this.dataY[i];可以加载出数据

            }

            echart.setOption(option);

        }

    },

    computed: {

    },

    components: {

        Mheader

    }

}

</script>

<style scoped>

#echarts{

    margin: 0 auto;

    margin-top: 40px;}

</style>

Answer 1

先获取到数据，然后去set进series data。你现在这样写可能数据还没获取到就执行到显示echart了。要保重数据先获取到。

Answer 2

虽然没有认真看完代码，但是看完题目我猜就是异步的问题了