<template>
  <div class="chart-box" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import * as api from '@/api/dataVisualizationAnalysis'
import {dictionaryEscape} from '@/utils/dictionary'

export default {
  name: 'charts',
  data() {
    return {
      option: [],
      myChart: null,
      chartList: []
    }
  },

  mounted() {
    this.getData()
    window.addEventListener('resize', () => {
      this.myChart.dispose()
      this.getData()
    })
  },
  methods: {
    async getData() {
      let res = await api.trainEquipmentPancake()
      this.chartList = res.map(item => {
        item['name'] = dictionaryEscape('qclx', item.type)
        this.$set(item, 'value', item.count)
        return item
      })
      console.log(this.chartList)

      this.initChart()
    },

    initChart() {
      this.myChart = echarts.init(this.$refs.chart)

      this.option = {
        tooltip: {
          show: true
        },
        legend: {
          bottom: '0',
          left: 'center',
          itemWidth: 12,
          itemHeight: 12
        },
        series: [
          {
            type: 'pie',
            radius: ['54%', '70%'],
            center: ['50%', '48%'],
            data: this.chartList
          }
        ]
      }
      this.option && this.myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 100%;
}
</style>
