鍍金池/ 問答/HTML5  HTML/ 急,vue 中在使用echarts不能掛axios獲取到的數(shù)據(jù)。

急,vue 中在使用echarts不能掛axios獲取到的數(shù)據(jù)。

掛上dataY時可以顯示出折線圖,tems則不行,其中tems和dataY數(shù)據(jù)格式是相同的。
<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];可以加載出數(shù)據(jù)
            }
            echart.setOption(option);
        }
    },
    computed: {

    },
    components: {
        Mheader
    }
}

</script>
<style scoped lang="less">

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

</style>

回答
編輯回答
陪我終

先獲取到數(shù)據(jù),然后去set進series data。你現(xiàn)在這樣寫可能數(shù)據(jù)還沒獲取到就執(zhí)行到顯示echart了。

要保重數(shù)據(jù)先獲取到。

2017年9月1日 22:19
編輯回答
絯孑氣

雖然沒有認真看完代碼,但是看完題目我猜就是異步的問題了

2017年8月14日 04:21
編輯回答
脾氣硬

問題就是上面哪位老哥所說的,這算是echarts的一個小坑吧。解決方案。先初始化echarts的圖標結(jié)構(gòu),不給相應(yīng)的數(shù)據(jù),然后在將異步數(shù)據(jù)賦給data.
drawLinetem() {

        // 基于準備好的dom,初始化echarts實例
        let myChart = this.$echarts.init(document.getElementById('echartstem'))
        // 繪制圖表
        myChart.setOption({
            title: {text: '溫度歷史數(shù)據(jù)折線圖'},
            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '溫度',
                type: 'line',
                data: []
            }]
        });
        // 異步加載數(shù)據(jù)
        myChart.showLoading();
        $.get('http://127.0.0.1:4000/tem',function (data) {
            myChart.hideLoading();
            // 填入數(shù)據(jù)
            myChart.setOption({
                xAxis: {
                    data: ["5", "4", "3", "2", "最新",]
                },
                series: [{
                    // 根據(jù)名字對應(yīng)到相應(yīng)的系列
                    name: '溫度',
                    data:data
                }]
            });
        }, 'json');
    }
2018年8月12日 20:29