<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
 watch: {
     chartData: {
       deep: true,
       handler(val) {
         this.setOptions(val)
       }
     }
   },
   data() {
     return {
       chart: null
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
     })
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
     this.chart.dispose()
     this.chart = null
   },
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons');
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
       setOptions(data) {
         console.log(data,568)
        this.chart.setOption({
                  tooltip: {
                         trigger: 'item',
                         formatter: "{a} <br/>{b}: {c} ({d}%)"
                     },
                     legend: {
                         orient: 'vertical',
                         show: false,
                         x: 'left',
                         data: []
                     },
                     // 设置环形中间的数据
                     graphic: [
                       {
                         type: 'text',
                         left: '41%',
                         top: '49%',
                         z: 10,
                         style: {
                           fill: '#333333',
                           text: ' 总计'+ data.count ,
                           font: '16px Microsoft YaHei'
                         },
                         textStyle: {
                           color: '#333333',
                           fontSize: 17,
                           align: 'center'
                         }
                       }
                     ],
                     series: [

                         {
                             name: '异常统计',
                             type: 'pie',
                             radius: ['30%', '55%'],

                             labelLine: {
                                 normal: {
                                     length: 20,
                                     length2: 70,
                                     lineStyle: {
                                         color: '#A3D2F6'
                                     }
                                 }

                             },
                             label: {
                                 normal: {
                                     // formatter: '{b|{b}}{a|{d}%}\n\n',
                                     formatter: '{b|{b}}\n\n',
                                     borderWidth: 20,
                                     borderRadius: 4,
                                     padding: [0, -70],
                                     rich: {
                                         a: {
                                             color: '#333',
                                             fontSize: 12,
                                             lineHeight: 20
                                         },
                                         b: {
                                             fontSize: 12,
                                             lineHeight: 20,
                                             color: '#333'
                                         }
                                     }
                                 }
                             },
                             data: [
                               {
                                   value: data.qk,
                                   name: '缺卡',
                                   itemStyle:{color:'#FFA7A7'}
                               },
                               {
                                 value: data.wq,
                                 name: '外勤',
                                 itemStyle:{color:'#609CDE'}
                             }, {
                                 value: data.cd,
                                 name: '迟到',
                                 itemStyle:{color:'#3DD18E'}
                             }, {
                                 value: data.zt,
                                 name: '早退',
                                 itemStyle:{color:'#FF9A49'}
                             },
                             ]
                         }
                     ]
              });
       }
   }
};
</script>
