[JavaScript知识库]echarts控制台打印有数据，但是图显示不出来

原因：axios的异步问题，
解决方法：必须先获取到数据再进行画图
解决部分代码：

this.getRes().then(res=>{
                    // console.log(res)
                    if(res.code==200){
                        this.factorRes = res.data.data.factorRes;
                        this.factorRes.forEach(item => {
                            this.factorX.push(item.factorName)
                            this.factorY.push(item.factorScore)
                        })
                        this.option.xAxis.data = this.factorX;
                        this.option.series[0].data = this.factorY;
                        // console.log(this.option)
                        var myChart = echarts.init(document.getElementById('echart'));
                        // 绘制图表
                        myChart.setOption(this.option, true);
                    }
                })

完全代码：

<template>
    <div>
        <el-card style="margin: 20px 40px 0px 40px">
            <div style="text-align: center;"><h2 style="margin-top: 0px">{{this.scale.scaleName}}测评报告</h2></div>
            <div style="justify-content: center;display: flex">
                <span style="float: right;font-size: 14px">测试日期：{{this.record.redTime}}</span>
            </div>
            <div>
                <el-icon class="el-icon-s-opportunity" style="color: #0a76a4"></el-icon>
                测评结果
            </div>
            <div style="margin-top: 20px;">
                <div style="margin-left: 20px">您的量表总得分为：{{this.record.redScore}}</div>
                <div style="margin-left: 20px;margin-top: 10px">具体因子得分为:</div>

                <el-table :data="factorRes" border stripe style="width: 500px;margin: 20px auto"
                          :header-cell-style="getRowClass">
                    <el-table-column prop="factorName" label="因子名称"></el-table-column>
                    <el-table-column prop="factorScore" label="因子得分"></el-table-column>
                </el-table>
                <template>
                    <div id="echart" style="width:600px;height:400px;margin:0 auto"></div>
                </template>

            </div>
            <div>
                <el-icon class="el-icon-s-opportunity" style="color: #0a76a4"></el-icon>
                得分说明
            </div>
            <div style="margin-top: 20px;margin-left: 10px">
                <b>【量表结果解释】：</b>{{this.scale.scaleRes}}
            </div>
            <div style="margin-top: 20px;margin-left: 10px" v-for="item in this.factorRes" :key="item.fcId">
                <b>【{{item.factorName}}】：</b>{{item.factorInfo}}
            </div>

        </el-card>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import moment from 'moment'
    import * as echarts from 'echarts'

    export default {
        name: "StudentRes",
        data() {
            return {
                redId: '',
                factorRes: [],
                factorX: [],
                factorY: [],
                record: {},
                scale: {},
                option: {
                    tooltip: {},
                    xAxis: {
                        type:'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: true, //y轴线显示
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            data: [],
                            barWidth: '20%',
                            barGap:1,
                            label:{
                                show:true,
                                position:'top'
                            }
                        },
                    ]
                }
            }
        },
        created() {
            this.redId = this.$route.params.redId;
            // console.log(this.redId)
            this.getRes();

        },
        mounted() {
            this.draw()
        },
        methods: {
            draw() {
                // 基于准备好的dom，初始化echarts实例
                this.getRes().then(res=>{
                    // console.log(res)
                    if(res.code==200){
                        this.factorRes = res.data.data.factorRes;
                        this.factorRes.forEach(item => {
                            this.factorX.push(item.factorName)
                            this.factorY.push(item.factorScore)
                        })
                        this.option.xAxis.data = this.factorX;
                        this.option.series[0].data = this.factorY;
                        // console.log(this.option)
                        var myChart = echarts.init(document.getElementById('echart'));
                        // 绘制图表
                        myChart.setOption(this.option, true);
                    }
                })

            },
            //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据

            async getRes() {
                const res = await request.get(`${this.GLOBAL.BASE_URL}/scale/res/${this.redId}`);
                // console.log(res)
                if (res.code !== 200) return this.$message.error("获取测评结果失败！")

                this.record = res.data.data.record;
                this.record.redTime = moment(this.record.redTime).format("yyyy年MM月DD日 HH:mm:ss")
                const res1 = await request.get(`${this.GLOBAL.BASE_URL}/scale/${this.record.scaleId}`);
                if (res1.code !== 200) return this.$message.error("获取量表信息失败！")
                this.scale = res1.data.data.scale
                return res
            },
            // eslint-disable-next-line no-unused-vars
            getRowClass({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background:#87CEEB'
                } else {
                    return ''
                }
            }
        }
    }
</script>

<style scoped>

</style>