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

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

export default {
  name: 'BarChart',
  props: [
    'id',
    'title',
    'data',
    'axisX',
    'axisY'
  ],
  data () {
    return {
      chart: undefined,
    }
  },
  mounted() {
    this.rander();
  },
  watch: {
    data() {
      window.console.log(this.id, this.data)
      this.rander()
    }
  },
  methods: {
    rander() {
      const _self = this

      if (this.chart) {
        this.chart.clear();
      } else {
        this.chart = new G2.Chart({
          container: _self.id,
          forceFit: true,
          height: 282,
          padding: [80, 20, 30, 40]
        });
      }

      const chart = this.chart;
      chart.source(_self.data);

      chart.scale('value', {});

      chart.axis("value", {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: "#a4b6c5" // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            textAlign: "end", // 文本对齐方向，可取值为： start middle end
            fill: "#a4b6c5", // 文本的颜色
            fontSize: "12", // 文本大小
            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
          }
        }
      });
      chart.axis("item", {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: "#a4b6c5" // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            fill: "#a4b6c5", // 文本的颜色
            fontSize: "12" // 文本大小
          }
        }
      });
      // chart.tooltip({
      //   crosshairs: true
      // });

      chart.guide().html({
        position: ["5%", "-35%"],
        html: `<div class="line-chat"><p class="title">${_self.title}</p></div>`
      });
      chart.guide().html({
        position: ["1%", "-22%"],
        html: `<div class="line-chat"><p class="title">${_self.axisY}</p></div>`
      });
      chart.guide().html({
        position: ["102%", "100%"],
        html: `<div class="line-chat"><p class="title">${_self.axisX}</p></div>`
      });

      chart.interval().position('item*value').color('item');

      chart.render();
    }
  }
};
</script>
<style lang="scss">
.chart7-title {
  .title {
    font-size: 13px;
    color: #a4b6c5;
  }
}
</style>

