echarts+vue绘制图形

已经踩了两次坑了，所以还是要记录一下

在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