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

<script>
import * as G2 from '@antv/g2';
import dateFormat from '@/filters/index.js';
export default {
  data() {
    return {
      chart: null
    };
  },
  props: {
    charData: {
      type: Array,
      default() {
        return [];
      }
    },
    id: String,
    width: {
      type: Number,
      default: 800
    }
  },
  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: 280,
        padding: [50, 80, 60, 60]
      });
      this.chart.data(this.charData);
      const size = this.charData.length > 7 ? 15 : 25;
      this.chart.scale({
        avgVisitTime: {
          min: 0,
          nice: true,
          alias: '人均访问时长' //'访问时长'
        },
        avgLoginTimes: {
          //range: [0, 1],
          nice: true,
          alias: '平均每人登录次数' //'登录次数'
        },
        bizDates: {
          //nice: true
        }
      });
      this.chart.annotation().text({
        top: true,
        position: ['-4%', '-10%'], // 位置信息
        content: '登录次数',
        offsetX: 0, // x 方向的偏移量
        offsetY: 0 // y 方向偏移量
      });
      this.chart.annotation().text({
        top: true,
        position: ['100%', '-10%'], // 位置信息
        content: '访问时长',
        offsetX: 0, // x 方向的偏移量
        offsetY: 0 // y 方向偏移量
      });
      this.chart.axis('avgVisitTime', {
        grid: null,
        title: null,
        label: {
          formatter: val => {
            return dateFormat.formatTime(val); // 格式化坐标轴显示文本
          }
        }
      });
      this.chart.axis('avgLoginTimes', {
        title: null,
        label: {
          // 使用 formatter 回调函数
          formatter: val => {
            // 去小数点
            if (~String(val).indexOf('.')) return '';
            return val;
          }
        }
      });
      this.chart.tooltip({
        // crosshairs: {
        //   type: 'line'
        // }
        showCrosshairs: true,
        shared: true,
        itemTpl: '<li style="padding-bottom: 10px;><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{name}: {value}</li>'
      });
      this.chart
        .interval()
        .position('bizDates*avgLoginTimes')
        .color('#597EF7')
        .size(size);
      this.chart
        .line()
        .position('bizDates*avgVisitTime')
        .color('#5ad8a6')
        .tooltip('bizDates*avgVisitTime', (bizDates, avgVisitTime) => {
          return {
            name: '人均访问时长',
            value: dateFormat.formatTime(avgVisitTime)
          };
        });
      /* this.chart
        .point()
        .position('bizDates*avgVisitTime')
        .color('#5ad8a6'); */
      this.chart.legend({
        position: 'top', // 设置图例的显示位置
        itemGap: 20, // 图例项之间的间距
        custom: true,
        items: [{ value: 'avgLoginTimes', name: '平均每人登录次数', marker: { symbol: 'square', style: { fill: '#597ef7', r: 4 } } }, { value: 'avgVisitTime', name: '人均访问时长', marker: { symbol: 'hyphen', style: { stroke: '#5ad8a6', r: 5, lineWidth: 3 } } }]
      });
      this.chart.render();
    }
  }
};
</script>

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