Typescript + vue cli3中使用echarts

1.下载依赖

同时下载echarts和ts版的echarts(@types/echarts)，一个是工程依赖，一个是声明依赖。

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

2.在项目根目录下创建shims-echart.d.ts文件

image.png

然后在文件里面写如下代码

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

3.然后在main.ts中全局引入echarts,并设置为vue的属性

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

4.最后在组件中使用echarts

script中

import { Component, Vue } from 'vue-property-decorator';

@Component({})

export default class Home extends Vue {
  public $echarts: any;
  options（写形参） {
          return{
               //里面写要显示的echarts图标
          }
  };
  private mounted() {
    const ele = document.getElementById('myEcharts');
    const chart: any = this.$echarts.init(ele);
    //调接口获取数据
    chart.setOption(this.options（写实参），true);
  }
}

摘自：https://www.cnblogs.com/zhaosijia----1234/p/14030459.html