<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-19 09:32:37
 * @FilePath: src/views/screen/components/video/components/EventType.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div :class="className" :style="{height:height,width:width,backgroundColor: 'transparent'}" />
</template>

<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'EventType',
  mixins: [resize],
  props: {
    data: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    data: {
      handler: function() {
        this.initChart()
      },
      deep: true
    }
  },
  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')
      let data = this.$props.data
      let colorList = ['#0064e8', '#00edfd']

      this.chart.setOption({
        backgroundColor: 'transparent',
        tooltip: {
          show: true
        },
        title: {
          subtext: '设备总数：' + this.$props.total,
          x: '30%',
          y: '42%',
          textStyle: {
            fontSize:20,
            fontWeight:'normal',
            color: ['#333']
          },
          subtextStyle: {
            color: '#f1bb4c',
            fontSize: 17
          },
        },
        grid: {
          bottom: 150,
          left: 0,
          right: '10%'
        },
        legend: {
          show: false,
          orient: 'vertical',
          x: '63%',
          y: 'center',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 10,
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
          data: data.map(item => item.name)
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['40%', '50%'],
            hoverAnimation: true,
            z: 10,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: '#003359',
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            label: {
              show: false
            },
            data: data,
            labelLine: {
              show: false
            }
          }
        ]
      })
    }
  }
}
</script>
