Ошибка при получении значений в столбчатую диаграмму echart в vue - PullRequest
Новая
       29

Ошибка при получении значений в столбчатую диаграмму echart в vue

1 голос
/ 10 ноября 2019

Я пытаюсь использовать данные своей базы данных firestore в диаграмме vue, но она показывает ошибку с не определенным 

    <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>

1 Ответ

1 голос
/ 10 ноября 2019

arr - это массив, и вы пытаетесь использовать свойство arr.eligible, которого нет в массиве. Вы хотите, чтобы свойство элемента, такое как arr[0].eligible?

Вы также можете подтвердить, что this в вашем асинхронном обратном вызове фактически является вашим компонентом. Иногда для его захвата требуется закрытие.

...