Vue Echarts：无法读取null的属性“ getCartesian”

问题描述

我在Quasar Framework中使用Vue，使用基于类的组件，并希望将echarts（https://v-charts.js.org/）添加到我的项目中。

我已经通过npm安装了它（如教程所述，这是echarts和v-charts） 而且总是在我尝试使用lib时收到消息：

Grid.js?5ae4:601 Uncaught TypeError: Cannot read property 'getCartesian' of null
at eval (Grid.js?5ae4:601)
at ExtendedClass.eval (Global.js?96f4:517)
at Array.forEach (<anonymous>)
at each (util.js?f160:300)
at ExtendedClass.eachSeries (Global.js?96f4:514)
at Function.Grid.create (Grid.js?5ae4:591)
at eval (CoordinateSystem.js?b745:52)
at Object.each (util.js?f160:308)
at CoordinateSystemManager.create (CoordinateSystem.js?b745:51)
at ECharts.update (echarts.js?665b:848)

我只是在做：

<template>
<div>
    <ve-histogram :data="chartDataHist"></ve-histogram>
    {{chartDataHist}}
</div>
</template>
<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';
    import VeHistogram from 'v-charts/lib/histogram.common';

@Component({
    components: {
        VeHistogram
    }
})
export default class GraficoIdEcharts extends Vue {

    chartDataHist = {
        columns: ['date','cost','profit','growthRate','people'],rows: [
            { 'cost': 1523,'date': '01/01','profit': 1523,'growthRate': 0.12,'people': 100 },{ 'cost': 1223,'date': '01/02','growthRate': 0.345,{ 'cost': 2123,'date': '01/03','growthRate': 0.7,{ 'cost': 4123,'date': '01/04','growthRate': 0.31,'people': 100 }
        ]
    };
}

没有成功，已经尝试过派，极地和各种情节。

解决方法

要解决此问题，必须创建启动文件

// /src/boot/echart.js 
import { boot } from 'quasar/wrappers';
import VCharts from 'v-charts';

export default boot(({ app,router,store,Vue }) => {
    Vue.use(VCharts);
});

然后在quasar.conf.js中，您将找到一个名为'boot'的密钥，它是一个数组。向其中添加“ echart”（与上面的文件相同）。

现在可以使用了！