<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
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawChart();
    }, 200);
  },
  beforeUpdate() {
    console.log(this.charData);
    this.drawChart();
  },
  watch: {
    charData() {
      this.drawChart();
    }
  },
  methods: {
    drawChart() {
      // 更新的时候要移除先
      this.chart && this.chart.destroy();
      this.chart = new G2.Chart({
        container: this.id,
        width: this.width
      });
      this.chart.source(this.charData, {
        value: {
          formatter: function formatter(val) {
            return val;
          }
        }
      });
      this.chart.coord('theta', {
        radius: 0.75
      });
      this.chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      this.chart.intervalStack().position('value').color('keyword').label('keyword', {
        formatter: function formatter(val, keyword) {
          return keyword.point.keyword + ':' + keyword.point.value;
        }
      }).tooltip('keyword*value', function(item, value) {
        value = value;
        return {
          name: keyword,
          value: value
        };
      }).style({
        lineWidth: 1,
        stroke: '#fff'
      });
      this.chart.render();
    }
  }
};
</script>

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