<template>
  <div class="chart" data-title="错题排行综合统计" style="width:600px;"></div>
</template>

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

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

export default {
  methods: {
    async findData () {
      const data = await findStatisticDataApi('mistakes-order-tower')
      this.chart = new Chart({
        container: this.$el,
        autoFit: true,
        height: 500,
        padding: [50, 30, 50, 30]
      })

      this.chart.data(data)
      this.chart.scale('月均降雨量', {
        nice: true
      })
      this.chart.tooltip({
        showMarkers: false,
        shared: false,
        title: (t, d) => d.o,
        itemTpl: '<li class="g2-tooltip-list-item">{que}</li>'
      })

      this.chart
        .interval()
        .position('name*times')
        .color('o')
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0
          }
        ]).tooltip('title', (title) => {
          return {
            que: title
          }
        })

      this.chart.interaction('active-region')

      this.chart.render()
    }
  },

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