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

Question

我正在使用Vue和Quasar Framework，使用基于类的组件，并希望将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', 'profit': 1523, 'growthRate': 0.345, 'people': 100 },
            { 'cost': 2123, 'date': '01/03', 'profit': 1523, 'growthRate': 0.7, 'people': 100 },
            { 'cost': 4123, 'date': '01/04', 'profit': 1523, 'growthRate': 0.31, 'people': 100 }
        ]
    };
}

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

Answer 1

要解决此问题，必须创建引导文件

// /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‘(与上面命名的文件相同)。

现在它起作用了！