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>