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

Question

我正在将 Vue 与 Quasar Framework 一起使用，使用基于 class 的组件并希望将 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'（与上面命名的文件相同）。

现在可以使用了！

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

Vue Echarts: Cannot read property 'getCartesian' of null

vue.js

echarts

quasar-framework

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

Vue Echarts: Cannot read property 'getCartesian' of null

vue.js

echarts

quasar-framework

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