<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-07-02 16:48:49
 * @LastEditors: 无尘
 * @LastEditTime: 2020-07-08 15:18:54
-->
<!--
  <area-chart :charData="charData" id="area-chart"></area-chart>
  import areaChart from '@/components/login-data/area-chart.vue';
-->
<template>
  <div :id="id"></div>
</template>

<script>
import * as 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(); // 第一步是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，采用下面的监听的方式
    }, 30);
  },
  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,
        autoFit: true,
        height: 420
      });
      this.chart.data(this.charData);
      this.chart.scale({
        loginRate: {
          min: 0,
          nice: true,
          alias: '登录率'
        },
        date: {}
      });
      this.chart.tooltip({
        crosshairs: {
          type: 'line'
        },
        itemTpl: '<li style="padding-bottom:10px;">登录率: {value} %</li>'
      });
      this.chart.axis('loginRate', {
        label: {
          // 使用 formatter 回调函数
          formatter: val => {
            // 去小数点
            // if (~String(val).indexOf('.')) return '';
            return val + '%';
          }
        }
      });

      this.chart.line().position('date*loginRate');
      // this.chart
      //   .point()
      //   .position('date*loginRate')
      //   .size(4)
      //   .shape('circle')
      //   .style({
      //     stroke: '#fff',
      //     lineWidth: 1
      //   });
      this.chart.render();
    }
  }
};
</script>

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