已经踩了两次坑了,所以还是要记录一下
在echarts绘制图形的时候,数据取到了,在mounted中初始化echarts,一直进行不下去,数据出不来,打印日志也没有任何反应。
vue是单页面应用,只加载一次资源,然后下面的操作交互、数据交互是通过router、ajax来进行,页面并没有刷新;
<div ref="chartLineBox" style="width: 800px;height: 500px;"> </div>
mounted() {
(this as any).chartLine = (this as any).$echarts.init(this.$refs.chartLineBox);
console.log(this.$refs.chartLineBox );
console.log("加载"); //显示不出来
(this as any).chartLine.setOption({
title: {
text: 'Biu~简单柱状图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}],
color: ['#66FF99']
});
}
在main.ts中引入的时候也没有出错
/* 引入echarts */
import echarts from 'echarts'
//然后将echart添加到vue的原型上,这样就可以全局使用了
Vue.prototype.$echarts = echarts;
通过yarn安装了echarts,引入没有错误,一时竟找不出错误在哪,卡了很久
问题出在了包的安装上
在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖。
刚开始是指引入了yarn add echarts不知道为什么不行,看到很多同行是这么用的
卸载后执行以下安装就好了
yarn add echarts@4.9.0 //一开始只安了echarts,最新版5.1.0
yarn add @types/echarts@0.0.12