如何解决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”(与上面的文件相同)。
现在可以使用了!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。