<template>
  <!-- 整改完成率（%） -->
  <div class="rectificationFinish" id="rectificationFinish-box">

  </div>
</template>

<script>
import {
  securityIndexStatisticsCompleteRatio,
} from '@/api/safetyCheck/index'
  import echarts from 'echarts'
  export default {
    name: 'rectificationFinish',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{},
      }
    },
    created(){

    },
    mounted(){
      this.securityIndexStatisticsCompleteRatio();
    },
    methods: {
      securityIndexStatisticsCompleteRatio(){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        securityIndexStatisticsCompleteRatio(obj).then(response => {
          let nameList = [];
          let valueList = [];
          for(let i=0;i<response.data.length;i++){
            nameList.push(response.data[i].month)
            valueList.push(response.data[i].ratio)
          }
          this.$nextTick(()=>{
            this.eCharts(nameList,valueList);
          })
        });
      },
      eCharts(nameList,valueList){
        let myChart = this.$echarts.init(document.getElementById('rectificationFinish-box'));

        let option = {
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            itemWidth:16,
            itemHeigth:16,

            textStyle:{
              color:'#333333',
            }
          },
          grid: {
            top:'24%',
            left: '3%',
            right: '4%',
            bottom: '6%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : nameList,
              axisLabel: {
                textStyle: {//改变X轴字体颜色
                  color: '#999999',

                },
              },
              axisTick:{//去掉X轴刻度
                show:false,
              },
              axisLine:{
                lineStyle:{
                  color:'#D8D8D8',//改变X轴颜色

                }
              },
            }
          ],
          yAxis : [
            {
              type : 'value',

              nameTextStyle:{
                color:'#fff',
                align:'left',
              },
              splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  color: ['#171f2d'],
                  width: 1,
                  type: 'solid',
                  opacity:0.2
                },

              },
              axisLabel: {
                textStyle: {//改变X轴字体颜色
                  color: '#999999',

                },
              },
              axisTick:{//去掉X轴刻度
                show:false,
              },
              axisLine:{
                show:false,
              },

            },
          ],
          series : [
            {
              name:'整改完成率（%）',

              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#0183FA'},
                      {offset: 1, color: '#AED8FF'}
                    ]
                  )
                },

              },
              type:'bar',
              barWidth: '10',
              data:valueList
            }
          ]
        };
        myChart.setOption(option);
      },
    }
  }
</script>

<style scoped lang="scss">
  .rectificationFinish{
    width: 548px;
    height: 138px;

  }

</style>
