<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-07-02 16:48:49
 * @LastEditors: 无尘
 * @LastEditTime: 2020-07-15 14:44:38
-->
<!--
  <active-chart :charData="charData" id="active-chart"></active-chart>
  import activeChart from '@/components/login-data/active-chart.vue';
-->
<template>
  <div>
    <div class="lengend-line">
      <span class="line-pot bg-597ef7"></span><span class="font-12 color-8c8c8c p-l-5">非活跃人数</span> <span class="line-pot bg-5ad8a6 m-l-40"></span
      ><el-tooltip class="item" effect="dark" content="截至目前近三天内有过登录算作活跃" placement="top-start">
        <span class="font-12 color-8c8c8c cell-title-span p-l-5" style="cursor: pointer;padding-bottom: 2px; ">活跃人数</span>
      </el-tooltip>
    </div>
    <div :id="id"></div>
  </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: 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: 420,
        padding: [50, 30, 60, 60]
      });
      this.chart.data(this.charData);
      this.chart.scale({
        value: {
          min: 0,
          nice: true
        },
        date: {}
      });
      this.chart.tooltip({
        // crosshairs: {
        //   type: 'line'
        // }
        showCrosshairs: true,
        shared: true
      });
      this.chart
        .line()
        .position('date*value')
        .color('active');
      // this.chart
      //   .point()
      //   .position('date*value')
      //   .color('active');
      this.chart.legend(false);
      /* this.chart.legend({
        position: 'top-left', // 设置图例的显示位置
        offsetX: 40,
        itemGap: 20 // 图例项之间的间距
      }); */
      this.chart.render();
    }
  }
};
</script>

<style lang="less" scoped>
.color-8c8c8c {
  color: #8c8c8c;
}
.p-l-5 {
  padding-left: 5px;
}
.m-l-40 {
  margin-left: 40px;
}
.line-pot {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 2px;
}
.bg-597ef7 {
  background: #597ef7;
}
.bg-5ad8a6 {
  background: #5ad8a6;
}
.lengend-line {
  padding-left: 32px;
}
.cell-title-span {
  border-bottom: 1px dashed #2f54eb;
}
</style>
