echarts组件化

<template>
  <div  ref="chart" :style="dataStyle"></div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
const echarts = require("echarts"); 
require("echarts-liquidfill"); // 水波图

@Component({
})
// 将option抽离出去
export default class Echarts extends Vue {
  @Prop() private option!: {};
  @Prop() private dataStyle!: {};
  private myChart: any;

  @Watch("option", { deep: true})
  public xvalueChange(val: any) {
    this.myChart && this.myChart.setOption(this.option);
  }
  
  //随着屏幕大小改变尺寸   
  private addlist() {
    this.myChart.resize();
  }

  mounted() {
    this.myChart = echarts.init(this.$refs.chart);
    this.myChart.setOption(this.option);
    const that = this; 
    window.addEventListener("resize", that.addlist);
  }
}
</script>

<style lang="scss" scoped>
</style>