<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>

import { FontChart } from '../../utils/utils'

export default {
  name: 'echarts1',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
      xdata: [],
      ydata: [],
      data: [{
        name: '桐乡市',
        value: 80
      }, {
        name: '南湖区',
        value: 90
      }, {
        name: '嘉善县',
        value: 100
      }, {
        name: '海盐县',
        value: 60
      }, {
        name: '秀洲区',
        value: 20
      }, {
        name: '平湖市',
        value: 20
      }, {
        name: '海宁市',
        value: 20
      }]
    }
  },
  watch: {},
  mounted () {
    this.drawLine()
  },
  methods: {
    getpre (e) {
      let list = this.data
      var num = 0
      list.forEach((type) => {
        if (type.name == e) {
          num = Number(type.value)
        }
      })
      console.log(this.total)
      console.log(num / this.total)
      return ((num / this.total) * 100).toFixed(2)
    },
    drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var total = 0
      let list = this.data
      list.forEach((type) => {
        total = Number(total) + Number(type.value)
      })
      this.total = total
      var colors = [
        'rgba(255, 196, 81, 1)',
        'rgba(62, 246, 196, 1)',
        'rgba(8, 229, 255, 1)',
        'rgba(241, 218, 26, 1)',
        'rgba(254, 125, 48, 1)',
        'rgba(129, 123, 255, 1)',
        'rgba(9, 188, 255, 1)',
        'rgba(250, 71, 83, 1)',
        'rgba(74, 225, 74, 1)',
        'rgba(62, 131, 246, 1)',
      ]
      var option = {
        color: colors,
        legend: {
          orient: 'horizontal',
          bottom: '10',
          right: 'center',
          itemGap: 20,
          itemWidth: 10,
          itemHeight: 10,
          width: '90%',
          formatter: function (name) {
            return (
              '{name| ' + name + '} ' + '{value| ' + that.getpre(name) + '%}'
            )
          },
          textStyle: {
            color: '#000',
            rich: {
              name: {
                verticalAlign: 'right',
                align: 'left',
                fontSize: FontChart(14),
                width: 60,
                color: 'rgba(255, 255, 255, 1)',
              },
              value: {
                align: 'left',
                fontSize: FontChart(14),
                color: 'rgba(255, 255, 255, 1)',
              }
            }
          }
        },
        tooltip: {
          trigger: 'item',
          show: false,
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '日常巡查',
            type: 'pie',
            radius: ['45%', '50%'],
            center: ['50%', '30%'],
            minShowLabelAngle: 0,
            label: {
              normal: {
                show: false,
                position: 'center',
                fontSize: FontChart(14),
                color: 'auto',
                formatter: (params) => {
                  return params.value + '\n' + params.name
                },
              },
              emphasis: {
                show: true,
                position: 'center',
                fontSize: FontChart(14),
                color: 'auto',
                formatter: function (value, index) {
                  console.log(value)
                  return '{label|' + value.percent + '%}\n'
                    + '{value|' + value.name + '}'
                },
                rich: {
                  label: {
                    padding: 0,
                    align: 'center',
                    verticalAlign: 'middle',
                    fontSize: FontChart(26),
                    color: 'rgba(0, 255, 255, 1)',
                    fontFamily: 'Helvetica Condensed Bold'
                  },
                  value: {
                    align: 'center',
                    color: '#fff',
                    padding: [0, 0, 10, 0],
                    fontSize: FontChart(16),
                    verticalAlign: 'middle',
                  },
                },
              },
            },
            labelLine: {
              length: 1,
              length2: 20,
              show: false
            },
            data: that.data
          }
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>