记录vue+ts项目引入echarts方法

第一种

indext.html中用script引入

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>

组件中调用方式

<script >
import { Component , Vue } from 'vue-property-decorator';
declare let echarts:any;  //要先声明
@Component
export default class about extends Vue{
  private mounted(): void{
      this.ech();
  };
  private ech(): void{
    let lineChart =echarts.init(document.getElementById('lineChart'));

}

第二种

npm install echarts --save 
npm install @types/echarts --save

在main.ts中添加如下代码

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

第三种

在项目根目录创建一个shims-echart.d.ts文件

 import Vue from 'vue';

   declare module 'vue/types/vue' {
       interface Vue {
         $echarts: any
       }
   }

在组件中引入

export default class Home extends Vue {
  public $echarts: any;
  private options: object = {
    ...
  };
  private mounted() {
    const ele = document.getElementById('myEcharts');
    const chart: any = this.$echarts.init(ele);
    chart.setOption(this.options);
  }
}