<template>
  <div class="chart-container">
    <div ref="chart" class="chart-body" />
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'StatisticsChart',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    pieData() {
      const tmp = []
      this.list.forEach((item, index) => {
        const obj = {}
        obj.name = item.deptName
        obj.value = item.num
        tmp.push(obj)
      })
      return tmp
    }
  },
  watch: {
    list() {
      this.initChart()
    }
  },
  activated() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        // tooltip: {
        //   show: true
        // }
        // color: [
        //   '#19d4ae', '#5ab1ef', '#fa6e86',
        //   '#ffb980', '#0067a6', '#c4b4e4',
        //   '#d87a80', '#9cbbff', '#d9d0c7',
        //   '#87a997', '#d49ea2', '#5b4947',
        //   '#7ba3a8'
        // ]
        // legend: {
        //   orient: 'vertical',
        //   right: 0,
        //   data: this.pieData.map(item => item.name)
        // }
        // series: [{
        //   name: '进出记录',
        //   type: 'pie',
        //   data: this.pieData,
        //   label: {
        //     show: true
        //     // formatter: '{b}记录数:{c}条'
        //   },
        //   tooltip: {
        //     // formatter: '{b}<br/>记录数: {d}%,{c}条'
        //   }
        // }]
      })
      this.chart.resize()
    }
  }
}
</script>

<style scoped>
.chart-container{
  text-align: center;
}
.chart-body{
  height: 60vh;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}
</style>