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

<script>
import echarts from 'echarts'
export default {
  name: 'AccessOverChart',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    pieData() {
      const tmp = []
      this.list.forEach(item => {
        const obj = {}
        obj.name = '总上报数'
        obj.value = item.report
        tmp.push(obj)
        const obj1 = {}
        obj1.name = '立案数'
        obj1.value = item.register
        tmp.push(obj1)
        const obj2 = {}
        obj2.name = '处理数'
        obj2.value = item.process
        tmp.push(obj2)
        const obj3 = {}
        obj3.name = '结案数'
        obj3.value = item.close
        tmp.push(obj3)
      })
      return tmp
    }
  },
  watch: {
    list() {
      this.initChart()
    }
  },
  activated() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        tooltip: {
          show: true
        },
        // toolbox: {
        //   show: true,
        //   right: '20',
        //   feature: {
        //     saveAsImage: {
        //       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: {
            // formatter: '{b} : {d}%'
            show: false
          },
          tooltip: {
            formatter: '{b}<br/>数量: {c}({d}%)'
          }
        }]
      })
    }
  }
}
</script>

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