Vue Echarts: Cannot read property 'getCartesian' of null

Question

I am using Vue with Quasar Framework, using class based components and want to add echarts (https://v-charts.js.org/) to my project.

I already installed it via npm (both echarts and v-charts, as the tutorial says) And always when I try to use the lib I get the message:

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)

I am simply doing:

<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 }
        ]
    };
}

And no success, already tried Pie, polar and all kinds of plots.

Eduardo Sousa Eduardo Sousa · Accepted Answer · 2020-08-14T18:22:54

To solve this, you must create a boot file

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

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

Then in quasar.conf.js you will find a key named 'boot', which is an array. Add 'echart' (same as the file named above) to it.

And now it works!

Vue Echarts: Cannot read property 'getCartesian' of null

1 Answers