<template>
  <div
    v-if="data.length===0"
    style="font-size: 12px;
    position: relative;
    text-align: center;
    top: 40%;
    color: #909399;"
  >暂无数据</div>
  <pie v-else :id="'AlarmProportionStatistics'+id" width="100%" :option="option" :chart-data="data" />
</template>

<script>
import Pie from '@ability/components/Echarts/Pie'
export default {
  name: 'AlarmProportionStatistics',
  components: { Pie },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      option: {
        color: ['#3DA1FE', '#35CBCB', '#DF9E34', '#FF6C87', '#00eeff', '#ff6cc7', '#df5c34'],
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: '0%'
        },
        series: [
          {
            type: 'pie',
            left: '25%',
            radius: ['0%', '65%'],
            label: {
              show: true
            }
          }
        ]
      }
    }
  }
}
</script>
