在vue中将值检索到echart条形图时出错

Question

我正尝试在vue图表中使用我的firestore数据库数据，但它显示错误且未定义

    <vx-card title="PLACEMENT ANALYSIS" class="mb-base" >

        <div class="mt-5">
            <e-charts :options="bar" ref="bar" theme="ovilia-green" auto-resize />
        </div>


    </vx-card>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/bar'
import theme from './theme.json'
import firebase from 'firebase/app'
import 'firebase/auth'
import "firebase/firestore"



ECharts.registerTheme('ovilia-green', theme)

export default {
    data() {
        return {
            arr:[],
            l:50,
            r:30,
            bar: {
                legend: {},
                tooltip: {},
                dataset: {
                    // Provide data.
                    source: [
                        ['Product', 'Eligible Students', 'Placed Students', ],
                        ['B.Tech',  ],
                        ['MBA', this.random2(),this.random3()],
                        ['B.com', this.random2(),this.random3()],
                        ['MSc.', this.random2(),this.random3()],
                        ['Others', this.random2(),this.random3()]
                    ]
                },
                // Declare X axis, which is a category axis, mapping
                // to the first column by default.
                xAxis: { type: 'category' },
                // Declare Y axis, which is a value axis.
                yAxis: {},
                // Declare several series, each of them mapped to a
                // column of the dataset by default.
                series: [{ type: 'bar' }, { type: 'bar' }]

            },
        }
    },
    beforeCreate(){
        let u = firebase.auth().currentUser
        firebase.firestore().collection('Colleges').doc(u.uid).get().then(doc =>{
            this.arr = doc.data()
            console.log(this.arr)

        })

    },

    methods: {
        random2() {


            return[ this.arr.eligible]


        },
        random3(){
            return[this.arr.placed]
        }
    },
    components: {
        ECharts
    },
    computed:{
        chart(){
            console.log(this.arr)
            return this.arr
        }
    }
}
</script>

在这里，合格和放置是arr中的字段，在beforeCreate()中可见，但图表显示合格是未定义的，图表不可见。我尝试在数据返回字段中使用独立变量，例如l和r，但仍然显示未定义。我正在导入不同页面上的echart作为

<echarts-bar-chart></echarts-bar-chart>
<script>
import EchartsBarChart from '../charts-and-maps/charts/echarts/EchartsBarChart.vue'
                <echarts-bar-chart></echarts-bar-chart>
Components:{
EchartsBarChart
}
</script>

Answer 1

arr是一个数组，而您正在尝试使用数组上不存在的属性arr.eligible。是否需要项目属性，如arr[0].eligible

您可能还想确认异步回调中的this确实是您的组件。有时需要一个闭包来捕获它。

您需要确保this引用您的组件。试着在一个闭包中捕获它。通常情况下，lambda可以工作，但有时也会出现问题。

const that = this;

firebase.firestore().collection('Colleges').doc(u.uid).get().then(doc =>{
            that.arr = doc.data()
            console.log(that.arr)
            console.log(that)

        })