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

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

  const animationDuration = 6000

  export default {
    name: "OverdueCloseChart",
    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('OverduecloseChart'))

        this.chart.setOption({
          color: ['#4176f9', '#0848e9', '#0740cf', '#0635aa', '#052987', '#042372'],
          /* 周围边距 */
          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: 1048, name: this.$t('一般隐患')},
                {value: 735, name: this.$t('普通隐患')},
                {value: 580, name: this.$t('重大隐患')}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>
