echarts怎么延迟绘制,用vue+axios传过来的值无法正常显示?

Question

弄了一个仪表图,总是最先绘制,我想在vue,通过axios取到数据再绘制,可是每次都是先绘制完了再去取数据,用了setTimeout(),就不显示了

 if (option && typeof option === 'object') {
       setTimeout(() => {
           myChart.setOption(option);
         }, 1)

这个样子就不绘制了,
测试的前段穿数据是没问题的,作用域也是正常,
vue的相关代码:

 var v = new Vue({
        el: "div",
        data: function () {

            return {
                voltageArr: [],
                currentArr: [],
                humidityArr: [],
                heatArr: [],
                dianyuan: 30,   //这里写30,绘制的就是30,下面加一个控制台打印的话是可以显示传过来赋的值
                dianli: "",
        },
        created: function () {

            axios.get("/getdianyuan").then(function (response) {
                v.dianyuan = response.data;
                console.log(v.dianyuan)
            })
            //发请求获取所有数据信息
            axios.get("/getvoltage").then(function (response) {
                v.voltageArr = response.data;
            })
            axios.get("/getcurrent").then(function (response) {
                v.currentArr = response.data;
            })
            axios.get("/getheat").then(function (response) {
                v.heatArr = response.data;
            })
            axios.get("/gethumidity").then(function (response) {
                v.humidityArr = response.data;
            })
        }
    })

这是echarts生成的代码

<script >
    var dom = document.getElementById('m1');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        series: [
            {
                type: 'gauge',
                progress: {
                    show: true,
                    width: 18
                },
                axisLine: {
                    lineStyle: {
                        width: 18
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 15,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 10,
                    color: '#999',
                    fontSize: 10
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                        borderWidth: 10
                    }
                },
                title: {
                    show: true,
                    fontSize: 30,
                    offsetCenter: [0, '115%'],

                },
                detail: {
                    valueAnimation: true,
                    fontSize: 40,
                    offsetCenter: [0, '70%']
                },
                data: [
                    {
                        value: v.dianyuan,
                        name: '电源',
                    }
                ]
            }
        ]
    };

    if (option && typeof option === 'object') {
       //setTimeout(() => {

            myChart.setOption(option);
       //  }, 1)


    }
    window.addEventListener('resize', myChart.resize);
</script>

谢谢

Answer 1

感谢一楼已经解决

你倒是把你的【echarts】方法放到【axios】返回里面啊
axios.get("/gethumidity").then(function (response) {

axios代码如下

 axios.get("/getdianyuan").then(function (response) {
                v.dianyuan = response.data;
                var app = {};

                var option;

                option = {
                    series: [
                        {
                            type: 'gauge',
                            progress: {
                                show: true,
                                width: 18
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 18
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                length: 15,
                                lineStyle: {
                                    width: 2,
                                    color: '#999'
                                }
                            },
                            axisLabel: {
                                distance: 10,
                                color: '#999',
                                fontSize: 10
                            },
                            anchor: {
                                show: true,
                                showAbove: true,
                                size: 25,
                                itemStyle: {
                                    borderWidth: 10
                                }
                            },
                            title: {
                                show: true,
                                fontSize: 30,
                                offsetCenter: [0, '115%'],

                            },
                            detail: {
                                valueAnimation: true,
                                fontSize: 40,
                                offsetCenter: [0, '70%']
                            },
                            data: [
                                {
                                    value: v.dianyuan,
                                    name: '电源',
                                }
                            ]
                        }
                    ]
                };

                if (option && typeof option === 'object') {
                    //setTimeout(() => {

                    myChart1.setOption(option);
                    // }, 1)
                }
                console.log('dinyuan:' + v.dianyuan)

            })

Answer 2

你试试搞个函数名，判断有数据长度了，再执行this.echartBar(yourData)

if(yourData.length>0){
  this.echartBar(yourData)
}


methods: {
  echartBar(arr){
    let Data = arr //option中的data:Data就行了
    //放你的echart代码
    ...

  }
}