<template >
  <div class="TodayHiddenTroubleProcessingResults">
    <div class="top-content">
      预警处理率：<span class="value">26.6%</span>
    </div>
    <VChart class="chart" autoresize :option="options"/>
    <LegendLabel class="legend" :data="data"/>
  </div>
</template>

<script>
import { LegendLabel } from '@/components'
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TooltipComponent,
  LegendComponent,
  PolarComponent
} from "echarts/components";
import VChart from "vue-echarts";


use([
  CanvasRenderer,
  PieChart,
  TooltipComponent,
  LegendComponent,
  PolarComponent,
]);

export default {
  name: 'TodayHiddenTroubleProcessingResults',
  components: {
    LegendLabel,
    VChart
  },
  data() {
    return {
      data: [
            {
              name: '真实火情',
              value: 2,
              color: '#00EAFF'
            },
            {
              name: '误报',
              value: 3,
              color: '#E77052'
            },
            {
              name: '消防测试',
              value: 4,
              color: '#CAF6FF'
            },
            {
              name: '维保检修',
              value: 5,
              color: '#054B99'
            },
            {
              name: '其他',
              value: 6,
              color: '#00CEBD'
            }
          ],
      options: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '今日隐患处理结果占比',
            type: 'pie',
            radius: ['75%', '80%'],
            avoidLabelOverlap: false,
            label: {
              position: 'center',
              formatter: () => `3234\n\n次数`,
              fontSize: '20',
              color: '#fff',
              fontWeight: '100'
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '真实火情', value: 2, itemStyle: { color: '#00EAFF'  } },
              { name: '误报', value: 3, itemStyle: { color: '#E77052'  } },
              { name: '消防测试', value: 4, itemStyle: { color: '#CAF6FF' } },
              { name: '维保检修', value: 5, itemStyle: { color: '#054B99'  } },
              { name: '其他', value: 6, itemStyle: { color: '#00CEBD' } }
            ]
          }
        ]
}
    }
  },
  methods: {}
}
</script>

<style scoped lang='less'>
.TodayHiddenTroubleProcessingResults {
  position: relative;
  .top-content {
    color: #fff;
    height: 225px;
    .value {
      color: #ffde24;
      font-size: 23px;
      font-family: Anton-Regular;
    }
  }

  .chart {
    width: 11vw;
    height: 11vw;
    position: absolute;
    left: -35px;
    top: 35px;
  }

  .legend {
    position: absolute;
    right: -20px;
    top: 55px;
  }
}
  
</style>
