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

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'Pie',
    props: {
      list: Array,
      title: String,
      roseType: {
        type: String,
        default: null
      }
    },
    data () {
      return {
        chart: null
      }
    },
    mounted () {
      this.initChart()
    },
    methods: {
      initChart () {
        this.chart = echarts.init(this.$refs.chart, 'purple-passion', {renderer: 'svg'})
        this.chart.setOption(this.option)
      }
    },
    computed: {
      option () {
        const opt = {
          color: [
            '#007bff',
            '#00edff',
            '#01a253',
            '#65c52e',
            '#fff004',
            '#fb8c03',
            '#AD148D',
            '#723CDD',
            '#0343DE',
            '#ac1b8c',
            '#703ddc',
            '#0a44dd'
          ],
          title: {
            show: true,
            text: this.title,
            textStyle: {
              color: '#ccc',
              fontSize: 20
            },
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            // formatter: '{b}  {c}  ({d}%)',
            formatter: params => {
              if (params.value) {
                return `${params.marker}${params.name}：${params.value} (${params.percent}%)`
              }
            },
            backgroundColor: 'rgba(0,0,0,0.5)',
            borderWidth: 0,
            textStyle: {
              color: '#fff'
            }
          },
          legend: [
            {
              icon: 'circle',
              textStyle: {
                color: '#ccc',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              // top: '20%',
              // left: '10%',
              left: '10%',
              top: 'top',
              orient: 'vertical',
              // data: this.list.slice(0, 20),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#ccc',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: 'center',
              right: '10%',
              orient: 'vertical',
              data: this.list.slice(20),
              y: 'right',
              type: 'scroll'
            }
          ],
          series: [
            {
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '50%'],
              label: {
                normal: {
                  show: false,
                  color: '#fff',
                  fontSize: 30,
                  position: 'center',
                  formatter: '{d}%'
                },
                emphasis: {
                  show: true, // 文字至于中间时，这里需为true
                  textStyle: { // 设置文字样式
                    fontSize: '26',
                    fontWeight: 700,
                    color: '#ffffff'
                  }
                }
                // show: false,
                // position: 'center'
              },
              labelLine: {
                show: false
              },
              data: this.list.concat().sort((a, b) => a.value - b.value)
              // data: [
              //   {value: 1048, name: '部门一'},
              //   {value: 735, name: '部门二'},
              //   {value: 580, name: '部门三'},
              // ]
            }
          ]
        }
        if (this.roseType) {
          opt.series[0].roseType = this.roseType
          opt.series[0].radius = ['25%', '50%']
          opt.legend.icon = 'circle'
        }
        return opt
      }
    },
    watch: {
      list () {
        this.option.series[0].data = this.list
        // this.chart.setOption(this.option);
        if (this.chart) {
          this.chart.setOption(this.option)
        } else {
          this.initChart()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: calc(100% - 2.5rem);
  }
</style>
