急，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 lang="less">

#echarts{
    margin: 0 auto;
    margin-top: 40px;}

</style>

Answer 1

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

要保重数据先获取到。

Answer 2

问题就是上面哪位老哥所说的，这算是echarts的一个小坑吧。解决方案。先初始化echarts的图标结构，不给相应的数据，然后在将异步数据赋给data.
drawLinetem() {

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('echartstem'))
        // 绘制图表
        myChart.setOption({
            title: {text: '温度历史数据折线图'},
            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '温度',
                type: 'line',
                data: []
            }]
        });
        // 异步加载数据
        myChart.showLoading();
        $.get('http://127.0.0.1:4000/tem',function (data) {
            myChart.hideLoading();
            // 填入数据
            myChart.setOption({
                xAxis: {
                    data: ["5", "4", "3", "2", "最新",]
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '温度',
                    data:data
                }]
            });
        }, 'json');
    }

Answer 3

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