<template>
  <div>
    <div id="yearChart" :style="{width:width,height:height}"></div>
  </div>
</template>

<script>
  import { yearData } from "@/api/reliability/abnormalreport";

  export default {
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '200px'
      },
    },
    data() {
      return {
        option: {
          color: ['#3398DB'],
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '1%',
            top: '15%',
            containLabel: true
          },
          /* 标识 */
          legend: {
            data: [this.$t('异常报告')],
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              magicType: {
                show: true,
                type: ['pie', 'funnel']
              },
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          /* 坐标轴显示 */
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              /*type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'*/
              type: 'cross',
              label: {
                backgroundColor: '#a0a0a0'
              }
            }
          },
          xAxis: {
            data: []
          },
          yAxis: {
            name: this.$t('总数'),
          },
          series: [{
            name: this.$t('异常报告'),
            type: 'bar',
            barWidth: '40%',
            data: []
          }]
        },

        // 查询参数
        queryParams: {
          item: 1,
        },
        chart: null,
        chartData : []
      }
    },
    mounted() {
      this.$nextTick(() => {
        yearData(this.queryParams).then(response => {
          this.chartData = response
          for(let i = 0 ; i <this.chartData.length ; i++){
            if(this.chartData[i].dataName!= null && this.chartData[i].dataName!= ''){
              this.option.xAxis.data.push(this.chartData[i].dataName)
              this.option.series[0].data.push(this.chartData[i].dataNum)
            }
          }
          this.initChart()
        });
      })
    },
    methods: {
      /** 获取当前年份 */
      getNowTime() {
        var now = new Date();
      },
      initChart() {
        // 基于准备好的dom，初始化echarts实例
        this.chart = this.echarts.init(document.getElementById('yearChart'))
        this.chart.setOption(this.option)
      }
    }
  }
</script>
