<template>
  <div class="app-container-Dangerclose">
    <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: ['#4176f9', '#0848e9', '#0740cf', '#0635aa', '#052987'],
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '1%',
            top: '1%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            textStyle:{
              color: '#ffffff'//字体颜色
            }
          },
          series: [
            {
              name: this.$t('访问来源'),
              type: 'pie',
              radius: ['40%', '75%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,

                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  color: '#ffffff',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 1048, name: this.$t('按期关闭')},
                {value: 735, name: this.$t('逾期关闭')},
                {value: 580, name: this.$t('逾期开项')},
                {value: 484, name: this.$t('未逾期开项')}
              ]
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>
