<template>
  <div class="chart" data-title="历史成绩曲线">
  </div>
</template>

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

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

export default {
  methods: {
    async findData () {
      const data = await findStatisticDataApi('exam-history-score-line')

      this.chart = new Chart({
        container: this.$el,
        autoFit: true,
        height: 500,
        padding: [60, 30, 30, 30]
      })

      this.chart.data(data)

      this.chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        title: (title, datum) => '考试名称：' + datum.title,
        itemTpl: `
  <ul class="g2-tooltip-list">
    <li class="g2-tooltip-list-item">
      <span style="background-color:{color};" class="g2-tooltip-marker"></span>
      <span class="g2-tooltip-name">分数：</span><span class="g2-tooltip-value">{score}分</span>
    </li>
  </ul>`
      })

      this.chart.area().position('time*score')
      this.chart.line().position('time*score').label('score').tooltip('score', (score) => {
        return {
          score
        }
      })
      this.chart.point().position('time*score').tooltip('score', (score) => {
        return {
          score
        }
      })

      this.chart.render()
    }
  },

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