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

<script>
import * as 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: '190%'
    },
    height: {
      type: String,
      default: '240px'
    },
    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(row) {
         console.log(row,56)
          var colors = ["#FCA660","#59D4AB","#73C5EB", ];
        this.chart.setOption({

          // 设置环形中间的数据
          graphic: [
            {
              type: 'text',
              left: '26%',
              top: '50%',
              z: 10,
              style: {
                fill: '#333333',
                formatter: '{total|' + 200 +'}'+ '\n\r' + '{active|共发布活动}',
                rich: {
                    total:{
                        fontSize: 35,
                        fontFamily : "微软雅黑",
                        color:'#454c5c'
                    },
                    active: {
                        fontFamily : "微软雅黑",
                        fontSize: 16,
                        color:'#6c7a89',
                        lineHeight:30,
                    },
                }
              },
              textStyle: {
                color: '#333333',
                fontSize: 16,
                align: 'center'
              },

            }
          ],
               series: [
                           {
                             // name:'访问来源',
                             type:'pie',
                             radius: ['40%', '70%'],
                              center: ['30%', '39%'],
                             avoidLabelOverlap: false,
                             minShowLabelAngle: 2,
                             label: {
                                normal: {
                                               show: true,
                                               position: 'center',
                                               color:'#4c4a4a',
                                               formatter:  '{active|总告警数}' + '\n\r' +  ' {total|' + 200 + '}' + '{activen|/次}' ,
                                               rich: {
                                                   total:{

                                                       fontSize: 20,
                                                       fontWight:700,
                                                       fontFamily : "微软雅黑",
                                                       color:'#454c5c'
                                                   },
                                                   active: {
                                                       fontFamily : "微软雅黑",
                                                       fontSize: 16,
                                                       color:'#6c7a89',
                                                       lineHeight:30,
                                                   },
                                                   activen: {
                                                       fontFamily : "微软雅黑",
                                                       fontSize: 16,
                                                       color:'#666666',
                                                       lineHeight:30,
                                                   },
                                               }
                                           },
                                           emphasis: {//中间文字显示
                                               show: true,
                                           }
                             },
                             labelLine: {
                               normal: {
                                   show: false
                               }
                             },
                             data:[
                               {value:4,
                                   name:'火焰告警',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           // borderWidth: 5, // 为两个颜色之间那个宽度
                                           // borderColor: '#fff',  // 边框颜色白色
                                           color: colors[0]
                                       }
                                   }
                               },
                               {
                                   value:4,
                                   name:'陌生人告警',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           // borderWidth: 5,
                                           // borderColor: '#fff',
                                           color: colors[1]
                                       }
                                   }
                               },
                               {
                                   value:2,
                                   name:'徘徊告警',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           // borderWidth: 5,
                                           // borderColor: '#fff',
                                           color: colors[2]
                                       }
                                   }
                               },

                                ]
                              }
                               ]
              });
       }
   }
};
</script>
