<template>
  <div class="safeCheck">
    <div class="label">2019年入户情况分布</div>
    <div id="safeCheck2"></div>

  </div>
</template>

<script>
    export default {
        name: "hidderDanger",
        title :"planCheck",
      data() {
        return {
          xc: '',
          construction: { //隐患情况数据
            infamily: [0,8,8,7,9,10,0,0,0],//现场处理
            notmeet: [10,7,2,6,9,20,10,0,0],//用户整改
            rejectcheck: [0,1,2,6,6,0,10,0,8],//转交维修
          },
        }
      },

      methods:{
        setNum() {
          this.xc = this.$echarts.init(document.getElementById('safeCheck2'))
          var scale = 0.8
          this.xc.setOption({
              title: {
                text: '2019年隐患结果处理情况',
                left: '40%',
                top: '3%',
                textAlign: 'center',
                textStyle: {color: "#00CDCD", fontSize: 20 * scale, fontWeight: "normal"}
              },
              colors: ['#009ACD', '#9400D3', '#00688B'],
              tooltip: {
                trigger: 'axis'
              },

              legend: {
                data: ['现场处理', '用户整改', '转交维修',  ],
                left: '40%',
                top: '18%'
              },
              grid: {
                show: false,
                left: '2%',
                top: '27%',
                containLabel: true,
                width: '90%',
                height: '70%'
              },

              toolbox: {
                show: true,
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },

              xAxis: [
                {
                  type: 'category',
                  // name: '2019年度月份',
                  nameLocation: 'center',
                  nameGap: '30',
                  nameTextStyle: {
                    fontSize: 16
                  },
                  //axisLabel:{
                  //             interval:0,//横轴信息全部显示
                  //            rotate:-30,//-30度角倾斜显示
                  //       }  ,
                  axisTick: {
                    alignWithLabel: true
                  },
                  boundaryGap: [0, 0.03],
                  data: ['2019.1', '2019.3', '2019.6', '2019.7', '2019.8', '2019.9', '2019.10', '2019.11', '2019.12']
                }
              ],

              yAxis: [{
                gridIndex: 0,
                type: 'value',
                name: '隐患户数（户）',
                nameLocation: 'center',
                nameGap: '30',
                nameTextStyle: {
                  fontSize: 16
                },
                axisLine: {
                  lineStyle: {
                    //color: colors[1]
                  }
                },
                splitLine: {
                  show: false
                }
              }],
              series: [

                {
                  name: '现场处理',
                  type: 'bar',
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  label: {
                    normal: {
                      show: true,
                      position: 'top',

                    }
                  },

                  data: [0,8,8,7,9,10,0,0,0],
                },
                {
                  name: '用户整改',
                  type: 'bar',
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  label: {
                    normal: {
                      show: true,
                      position: 'top'

                    }
                  },

                  data: [10,7,2,6,9,20,10,0,0],
                },
                {
                  name: '转交维修',
                  type: 'bar',
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  label: {
                    normal: {
                      show: true,
                      position: 'top',

                    }
                  },
                  data:[0,1,2,6,6,0,10,0,8],
                }
              ]
            }
          )
        }
      },
      watch: {
      },
      ready()  {
        console.log(this)

        this.setNum()
      }

    }
</script>

<style scoped>
  .label {
    margin-left: 10%;
    font-size: 0.85em;
    float: left;
    color: #fff;
    height: 8%;
  }

  #safeCheck {
    height: 91%;
    width: 100%;
  }
</style>
