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

<script>
import echarts from 'echarts'
export default {
  name: 'HighFreqChart',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    pieData() {
      const tmp = []
      this.list.forEach(item => {
        const obj = {}
        obj.name = item.caseTypeName + '/' + item.caseTypeDetailName
        obj.value = item.upNum
        tmp.push(obj)
      })
      return tmp
    }
  },
  activated() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        tooltip: {
          show: true
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true
            }
          }
        },
        // color: ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', 'rgba(250,250,250,0.5)'],
        series: [{
          name: '高发问题',
          type: 'pie',
          data: this.pieData,
          label: {
            formatter: '{b} : {d}%',
            color: '#000'
          },
          tooltip: {
            formatter: '{b}<br/>立案数: {d}%'
          }
        }]
      })
    }
  }
}
</script>

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