<template>
  <div class="app-container-Overdueclose">
    <div id="DangerCloseChart" :style="{height:height,width:width}"></div>
  </div>
</template>

<script>
require('echarts/theme/macarons')

const animationDuration = 6000

export default {
  name: "DangerCloseChart",
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '330px'
    },
    year: {
      type: Number,
    }
  },
  mounted() {
    this.$nextTick(() => {
      /*this.queryParams.year = this.searchFormField.year;*/
      this.getList()
    })
  },
  methods: {
    getList() {
      this.initChart()
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('DangerCloseChart'))

      this.chart.setOption({
        color: ['#00ff26', '#038e6e', '#f87474','#8e8585'],
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        label: {
          color: '#ffffff'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle:{
            color: '#ffffff'//字体颜色
          }
        },
        series: [
          {
            name: this.$t(''),
            type: 'pie',
            radius: '75%',
            data: [
              {value: 1000, name: this.$t('已验收')},
              {value: 200, name: this.$t('已延期')},
              {value: 100, name: this.$t('未延期')},
              {value: 50, name: this.$t('已取消')}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
