<template>
  <div class="draw">
    <div id="draw_g2"></div>
  </div>
</template>
<script>
import * as G2 from '@antv/g2';
export default {
  name: 'touch-charts',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      const chart = new G2.Chart({
        container: 'draw_g2',
        forceFit: true,
        height: 376,
        padding: [55, 90, 46, 68]
      });
      chart.source(this.data);
      chart.tooltip({
        showMarkers: false,
        shared: true
      });
      chart.legend({
        position: 'top',
        offsetY: -20
      });
      chart.axis('value', {
        grid: {
          type: 'line',
          lineStyle: {
            stroke: '#d9d9d9',
            lineWidth: 1,
            lineDash: [-1, -1]
          }
        }
      });
      chart.scale({
        date: {
          dataKey: 'date',
          type: 'cat'
        },
        value: {
          min: 0,
          tickCount: 5
        },
        rate: {
          min: 0,
          tickCount: 5
        }
      });
      chart.axis('rate', {
        label: {
          formatter: text => {
            let num = Number(text);
            if (num > 10000) {
              return num / 10000 + '万';
            }
            return num + '元';
          }
        },
        grid: null
      });
      chart
        .interval()
        .position('date*value')
        .color('name', ['rgba(91, 143, 249, 0.85)', 'rgba(90, 216, 166, 0.85)', '#FF9F40'])
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0.1
          }
        ]); // eslint-disable-next-line
      chart
        .line()
        .position('date*rate')
        .color('name', ['#FF9F40']);
      chart.render();
    }
  }
};
</script>
<style lang="scss" scoped>
.draw {
  .title {
    padding-left: 12px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 700;
    color: #303133;
    line-height: 22px;
    margin-bottom: 36px;
  }
  #draw_g2 {
    height: 376px;
    margin: 0 auto;
    position: relative;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    line-height: 17px;
    &::before {
      content: '人数';
      position: absolute;
      top: 10px;
      left: 41px;
    }
    &::after {
      content: '金额';
      position: absolute;
      top: 10px;
      right: 57px;
    }
  }
}
</style>
