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

<script>
  import { ehsData } from "@/api/plant/ehsopenitem";

  export default {
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '200px'
      },
    },
    data() {
      return {
        option: {
          color: ['#3398DB','#675bba'],
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '0%',
            top: '15%',
            containLabel: true
          },
          /* 标识 */
          legend: {
            data: [this.$t('未关闭数'),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: {
            //设置字体倾斜
            axisLabel: {
              interval: 0,
              rotate: 45,
              //倾斜度 -90 至 90 默认为0
              margin: 2,
            },
            data: []
          },
          yAxis: [{
            name: this.$t('总数'),
          },
            {
              type: 'value',
              name: this.$t('关闭率'),
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          series: [{
            name: this.$t('未关闭数'),
            type: 'bar',
            barWidth: '40%',
            data: []
          },
            {
              name: this.$t('关闭率'),
              type: 'line',
              yAxisIndex: 1,
              data: []
            }
          ]
        },

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