<template>
  <!-- 销售分析 -->
  <div :id="id"></div>
</template>

<script>
import G2 from "@antv/g2";
import { setTimeout } from 'timers';

export default {
  data() {
    return {
      chart: null
    };
  },
  props: {
    charData: {
      type: Array,
      default() {
        return []
      }
    },
    id: String,
    width: {
      type: Number,
      default: null
    },
    type: {
      type: String,
      default: '0'
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawChart();
    }, 20);
  },
  beforeUpdate() {
    this.drawChart();
  },
  watch: {
    charData() {
      this.drawChart();
    }
  },
  methods: {
    drawChart() {
      // 更新的时候要移除先
      this.chart && this.chart.destroy();

      this.chart = new G2.Chart({
        container: this.id,
        width: this.width
      });
      if (this.type === '0') {
        this.chart.source(this.charData, {
          year: {
            range: [1, 8]
          },
          // 操作数据
          value: {
            formatter: function formatter(val) {
              return val + '%';
            }
          }
        });
      } else {
        this.chart.source(this.charData, {
          year: {
            range: [1, 8]
          }
        });
      }
      this.chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      });
      this.chart.areaStack().position('date*value').color('name');
      this.chart.lineStack().position('date*value').color('name').size(4);
      this.chart.render();
    }
  }
};
</script>

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