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

  </div>
</template>

<script>
    export default {
        name: "inFamily",
        title :"planCheck",
      data() {
        return {
          xc: '',
          construction: { //入户情况数据
            infamily: [38,10,22,11,31,19,23,12,57],//入户
            notmeet: [10,0,0,11,3,1,2,1,57],//到访不遇
            rejectcheck: [3,3,2,1,3,1,2,1,5],//拒检
          },
        }
      },

      methods:{
        setNum() {
          this.xc = this.$echarts.init(document.getElementById('safeCheck3'))
          var scale = 0.8
          this.xc.setOption({
              title: {
                text: '2019年入户情况分布',
                left: '40%',
                top: '1%',
                textAlign: 'center',
                textStyle: {color: "#00CDCD", fontSize: 20 * scale, fontWeight: "normal"}
              },
              colors: ['#458B00 ', '#8B4513 ', '#B23AEE'],
              tooltip: {
                trigger: 'axis'
              },

              legend: {
                data: ['入户', '到访不遇', '拒检',  ],
                left: '33%',
                top: '15%'
              },
              grid: {
                show: false,
                left: '10%',
                top: '25%',
                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.01],
                  data: ['2019.1', '2019.3', '2019.6', '2019.7', '2019.8', '2019.9', '2019.10', '2019.11', '2019.12']
                }
              ],

              yAxis: [{
                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',

                    }
                  },
                  markPoint: {
                    data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                    ]
                  },
                  markLine: {
                    data: [
                      {type: 'average', name: '平均值'}
                    ]
                  },
                  data: [38,10,22,11,31,19,23,12,57],
                },
                {
                  name: '到访不遇',
                  type: 'bar',
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  label: {
                    normal: {
                      show: true,
                      position: 'top'

                    }
                  },

                  data: [10,0,0,11,3,1,2,1,57],
                },
                {
                  name: '拒检',
                  type: 'bar',
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  label: {
                    normal: {
                      show: true,
                      position: 'top',

                    }
                  },
                  data: [3,3,2,1,3,1,2,1,5],
                }
              ]
            }
          )
        }
      },
      watch: {
        },
      ready()  {
        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>
