<template>
  <div>
    <div id="ageChart" :style="{width:width,height:height}"></div>
  </div>
</template>

<script>
import {ageData, selectAverageAge} from "@/api/plant/staffmgr";

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    },
    queryParams: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      option: {
        title: [
          {
            text: '平均年龄',
            x: 'center',
            top: '35%',
          },
          {
            text: 0,
            x: 'center',
            top: '50%',
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [this.$t('直接访问'), this.$t('邮件营销'), this.$t('联盟广告'), this.$t('视频广告'), this.$t('搜索引擎')]
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            label: {
              formatter: '{b}: ({d}%)'
            },
            name: '年龄段',
            type: 'pie',
            radius: ['50%', '70%'],
            selectedMode: 'single',
            data: [
              {value: 335, name: this.$t('直接访问')},
            ],
            emphasis: {
              label: {
                show: true,
                fontSize: '21',
                fontWeight: 'bold'
              }
            },
          }
        ]
      },
      chart: null,
      ageData: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      ageData(this.queryParams).then(response => {
        this.ageData = response
        for (let i = 0; i < this.ageData.length; i++) {
          this.option.legend.data[i] = this.ageData[i].dataName
          this.option.series[0].data[i] = {value: this.ageData[i].dataNum, name: this.ageData[i].dataName}
        }
        selectAverageAge(this.queryParams).then(response => {
          this.option.title[1].text = response.data;
          this.initChart()
        })
      });
    })
  },
  methods: {
    /** 获取当前年份 */
    getNowTime() {
      var now = new Date();
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('ageChart'))
      this.chart.setOption(this.option)
    }
  }
}
</script>
