Typescript + vue cli3中使用echarts

1.下载依赖

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

cnpm install echarts --save

cnpm install --save @types/echarts

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

 

 

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

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

<template>
  <div>
    <div id="myEcharts" style="height: 400px;"></div>
  </div>
</template>

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);
  }
}
</script>