<template>
  <div class="chart" data-title="考试成绩综合统计">
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

import { findStatisticDataApi } from '@/api/statistic'

export default {
  methods: {
    async findData (userId) {
      if (this.chart) {
        this.chart.destroy()
      }
      this.chart = new Chart({
        container: this.$el,
        autoFit: true,
        height: 500,
        padding: [50, 20, 50, 20]
      })
      this.chart.scale('value', {
        alias: '成绩'
      })
      const data = await findStatisticDataApi('exam-score-tower')
      // 添加文本标注
      data.forEach((item) => {
        this.chart
          .annotation()
          .text({
            position: [item.type, item.value],
            content: item.value,
            style: {
              textAlign: 'center'
            },
            offsetY: -5
          })
          .text({
            position: [item.type, item.value],
            // content: (item.percent * 100).toFixed(0) + '%',
            style: {
              textAlign: 'center'
            },
            offsetY: -12
          })
      })
      this.chart.data(data)
      this.chart.axis('type', {
        tickLine: {
          alignTick: false
        }
      })
      this.chart.axis('value', false)

      this.chart.tooltip({
        showMarkers: false
      })
      this.chart.interval().position('type*value')
      this.chart.interaction('element-active')
      this.chart.render()
    }
  },

  mounted () {
    this.findData()
  }
}
</script>
