如何封装一个Vue-echarts组件在Charts.vue中，首次mounted时要做两件事 1.指定echarts渲

整个项目安装 echarts，
创建组件 Charts.vue 并引入 echarts

const echarts = require('echarts');

Api 设计

<Chart :options="chartOptions" class="echart" :loading="loading"></Chart>

具体实现

参考echarts的官网后，发现必须传入一个prop叫options到Charts.vue，options作用是对图标的外观做一个基础配置，以及图表中x轴和y轴分别需要展示的数据也是通过options传递的，
同时还需要一个prop叫loading，用于在加载数据时让echart展示加载中的样式
在Charts.vue中，首次mounted时要做两件事 1.指定echarts渲染的容器大小，2. 对首次传入的options进行图表绘制

mounted() {
    this.chart = echarts.init(this.$refs.wrapper);
    this.chart.setOption(this.options);
}

然后Charts.vue中需要watch收到的options和loading这两个参数，如果父组件数据处理完毕传过去以后则loading会变成false，则Charts组件watch到以后会调用官方API中的hideLoading让加载中样式消失

@Watch('loading')
onLoadingChanged(newValue: string) {
    if(newValue){
      (this as any).chart.showLoading()
    }else{
      (this as any).chart.hideLoading()
    }
}

同时当父组件切换收入/支出tab的时候，传递的option中的XY轴数据经处理也会是不同的，Charts组件watch到以后会再次调用setOption这个方法

@Watch('options')
  onOptionsChanged(newOption: string) {
    (this as any).chart.setOption(newOption);
}