<template>
  <div class="inspectionStatisticsEcharts" id="inspectionStatisticsEcharts-box"></div>
</template>

<script>
  import {
    securityIndexStatisticsCheckResults
  } from '@/api/safetyCheck/index'
  export default {
    name: 'inspectionStatisticsEcharts',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{},
      }
    },
    created(){
    },
    mounted(){
      this.securityIndexStatisticsCheckResults();
    },
    methods:{
      securityIndexStatisticsCheckResults(){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        securityIndexStatisticsCheckResults(obj).then(response => {
          let nameList = [];
          let standardsList = [];
          let notStandardsList = [];
          for(let i=0;i<response.data.length;i++){
            nameList.push(response.data[i].month)
            standardsList.push(response.data[i].qualifiedNum)
            notStandardsList.push(response.data[i].unqualifiedNum)

          }
          this.$nextTick(()=>{
            this.eCharts(nameList,standardsList,notStandardsList);
          })
        });
      },
      //eCharts方法
      eCharts(nameList,standardsList,notStandardsList){
        let myChart = this.$echarts.init(document.getElementById('inspectionStatisticsEcharts-box'));
        let option = {
          //你的代码
          tooltip: {
            show:true,
            trigger: 'axis',
            formatter: function(params) {
              let html = '<div>';
              html += '<p>'+params[0].name+'</p>'
              for(let i=0;i<params.length;i++){
                html += '<p>'+params[i].marker+'&nbsp'+params[i].seriesName+'&nbsp:&nbsp'+params[i].data+'<p>'
              }
              return html;
            },
            axisPointer: {
              lineStyle: {
                color: 'rgb(126,199,255)',
              },
            },
          },
          legend: {
            show: true,
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 12,
            right:20,
            textStyle: {
              color: 'rgba(0, 0, 0, 1)',
              fontSize: 14,
              padding: [0, 8, 0, 8]
            }
          },
          grid: {
            top: '20%',
            left: '10%',
            right: '7%',
            bottom: '15%',
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#D8D8D8',
                },
              },
              axisLabel: {
                textStyle: {
                  color: '#999999',
                  fontSize: 12,
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              data: nameList,
            },
          ],
          yAxis: [
            {
              name: "",
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
                padding: [0, 60, 0, 0]
              },
              // minInterval: 1,
              type: 'value',
              splitLine :{    //网格线
                lineStyle:{
                  type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show:true //隐藏或显示
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#D8D8D8',
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#999999',
                  fontSize: 14
                }
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '符合',
              type: 'line',
              symbol: 'circle',
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1,
                  color: '#0183FA', // 线条颜色
                },
              },
              showSymbol: false,
              itemStyle: {
                normal: {
                  color: '#0183FA',//拐点颜色
                  label: {
                    show: false, //开启显示
                    color: '#fff',
                    position: 'top', //在上方显示
                    formatter: function (res) {
                      console.log('res',res)
                      if (res.value) {
                        return res.value
                      } else {
                        return 0
                      }
                    },
                  },
                },
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [  // 渐变颜色
                    {
                      offset: 0,
                      color: 'rgba(0,174,255,1)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(0,174,255,0.38)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,174,255,0)',
                    },
                  ],
                  global: false,
                },
              },
              data: standardsList,
            },
            {
              name: '不符合',
              type: 'line',
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              smooth: true,
              lineStyle: {
                normal: {
                  width: 1,
                  color: '#F66F00', // 线条颜色
                },
              },
              showSymbol: false,
              itemStyle: {
                normal: {
                  color: '#F66F00',//拐点颜色
                  label: {
                    show: true, //开启显示
                    color: '#fff',
                    position: 'top', //在上方显示
                    formatter: function (res) {
                      if (res.value) {
                        return res.value
                      } else {
                        return 0
                      }
                    },
                  },
                },
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [  // 渐变颜色
                    {
                      offset: 0,
                      color: 'rgba(246,111,0,1)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(246,111,0,0.38)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(246,111,0,0)',
                    },
                  ],
                  global: false,
                },
              },
              data: notStandardsList,
            }
          ]
        };
        myChart.setOption(option);
      },
    }
  }
</script>

<style scoped>
  .inspectionStatisticsEcharts{
    height:170px;
  }
</style>
