<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: [
            '#0085ff',
            '#703ddc',
            '#ff25d1',
            '#c90003',
            '#ff8080',
            '#f16c00',
            '#fff600',
            '#00ad00',
            '#00f0ff',
            '#0a44dd',
            '#ac1b8c'
          ],
          /*        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: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              // top: '20%',
              // left: '10%',
              left: '10%',
              top: 'top',
              orient: 'vertical',
              data: this.list.slice(0, 1),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: '4.5%',
              left: '10%',
              orient: 'vertical',
              data: this.list.slice(1, 2),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: '9%',
              left: '10%',
              orient: 'vertical',
              data: this.list.slice(2, 3),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: '13.5%',
              left: '10%',
              orient: 'vertical',
              data: this.list.slice(3, 4),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: '13.5%',
              left: '50%',
              orient: 'vertical',
              data: this.list.slice(4, 5),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: '18%',
              left: '10%',
              orient: 'vertical',
              data: this.list.slice(5, 6),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: '18%',
              left: '50%',
              orient: 'vertical',
              data: this.list.slice(6, 7),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: '22.5%',
              left: '10%',
              orient: 'vertical',
              data: this.list.slice(7, 8),
              y: 'left',
              type: 'scroll'
            },
            {
              icon: 'circle',
              textStyle: {
                color: '#fff',
                fontSize: 20
              },
              itemWidth: 8,
              itemHeight: 8,
              top: '22.5%',
              left: '48%',
              orient: 'vertical',
              data: this.list.slice(8, 9),
              y: 'left',
              type: 'scroll'
            }
          ],
          series: [
            {
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '50%'],
              label: {
                normal: {
                  show: false,
                  color: '#fff',
                  hoverAnimation: false,   // 是否开启 hover 在扇区上的放大动画效果。
                  minAngle: 3,          // 防止某个值过小导致扇区太小影响交互。
                  fontSize: 30,
                  position: 'center',
                  formatter: '{d}%'
                },
                emphasis: {
                  show: true, // 文字至于中间时，这里需为true
                  textStyle: { // 设置文字样式
                    fontSize: '26',
                    fontWeight: 700,
                    color: '#ffffff'
                  }
                }
                // show: false,
                // position: 'center'
              },
              labelLine: {
                show: false
              },
              avoidLabelOverlap: true,
              // data: this.list.concat().sort((a, b) => a.value - b.value)
              data: this.list
              // 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>
