<template>
  <div :id="id">

  </div>
</template>

<script>
import G2 from "@antv/g2";

export default {
  data() {
    return {
      chart: null
    };
  },
  props: {
    charData: {
      type: Array,
      default() {
        return []
      }
    },
    id: String,
    width: {
      type: Number,
      default: null
    },
    height: {
      type: Number,
      default: null
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawChart(); // 第一步是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，采用下面的监听的方式
    }, 100);
  },
  beforeUpdate() {
    this.drawChart();
  },
  watch: {
    charData() {
      this.drawChart();
    }
  },
  methods: {
    drawChart() {
      // 更新的时候要移除先
      this.chart && this.chart.destroy();
      let data = {
        container: this.id,
        width: this.width
      };
      if (!!this.height) {
        data = {...data, height: this.height};
      }
      this.chart = new G2.Chart(data);
      this.chart.source(this.charData);
      this.chart.area().position('keyword*销售额').color('white').shape('smooth');
      this.chart.line().position('keyword*销售额').color('white').shape('smooth');
      this.chart.guide().regionFilter({
        top: true,
        start: ['min', 0],
        end: ['max', 'min'],
        color: '#18a1cd'
      });
      this.chart.guide().regionFilter({
        top: true,
        start: ['min', 'max'],
        end: ['max', 0],
        color: '#FF4D4F'
      });
      this.chart.guide().region({
        top: false,
        start: [2000, 'max'],
        end: [2016, 'min']
      });
      this.chart.render();
    }
  }
};
</script>

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