vue TypeScript引入Echarts

npm i @types/echarts

<template>
  <div class="home">
    <div id="main" ref="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';
import Echarts from 'echarts';
@Component({
  components: {},
})
export default class Filtercondition extends Vue {
  private dom: any;
  private myChart: any;
  //   @Prop()
  //   private filterData!: any; // 高级设置且或按钮事件
  //   changebtn (info: number) {
  //     this.andbtn = info;
  //   };
  //   @Emit('filterCancel')
  //   sendCancel(treedata: [], ar: number) {
  //     const msg = {
  //       treedata,
  //       ar,
  //     };
  //     return msg;
  //   }
  //   filterFalse() {
  //     this.sendCancel(this.treedatas, this.andbtns);
  //   } // 保存按钮
  private mounted() {
    this.creatEcharts();
  }
  private creatEcharts() {
    const myChart = Echarts.init(this.$refs.main);
    // 绘制图表
    myChart.setOption({
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          data: [
            {
              value: 235,
              name: '视频广告',
            },
            {
              value: 274,
              name: '联盟广告',
            },
            {
              value: 310,
              name: '邮件营销',
            },
            {
              value: 335,
              name: '直接访问',
            },
            {
              value: 400,
              name: '搜索引擎',
            },
          ],
        },
      ],
    });
  }
}
</script>