Typescript+vuecli3中使用echarts

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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 ></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>