<template>
  <div class="safeCheck">
    <div class="label">2019年月安检户数分布</div>
    <div id="safeCheck1"></div>

  </div>
</template>

<script>
    export default {
      name: "checkFamily",
      title:"planCheck",
      data() {
        return {
          xc: '',
          construction: { //安检数据
            inPlan: [12,21,3,1,10,8,9,20,32],//计划内数据
            actual: [8,6,3,1,10,8,9,5,32],//实际数据
            outPlan: [8,6,3,1,10,8,9,5,32],//计划外数据
            normal: [8,6,3,1,10,8,9,5,32],//正常数据
            hiddenDanger: [8,6,3,1,10,8,9,5,32],//隐患数据
          },
        }
      },
      methods:{
        setNum() {
          this.xc = this.$echarts.init(document.getElementById('safeCheck1'))
          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: ['#00EEEE ', '#BF3EFF ', '#00B2EE', '#FF7F00', '#8B1A1A '],
            tooltip: {
              trigger: 'axis'
            },

            legend: {
              data: ['计划内', '实际', '计划外', '正常', '隐患'],
              left: '30%',
              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',

                  }
                },
                data: [12, 21, 3, 1, 10, 8, 9, 20, 32]
              },
              {
                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: [8, 6, 3, 1, 10, 8, 9, 5, 32]
              },
              {
                name: '计划外',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                label: {
                  normal: {
                    show: true,
                    position: 'top',

                  }
                },
                data: [8, 6, 3, 1, 10, 8, 9, 5, 32]
              },
              {
                name: '正常',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                label: {
                  normal: {
                    show: true,
                    position: 'top',

                  }
                },
                data: [8, 6, 3, 1, 10, 8, 9, 5, 32]
              },
              {
                name: '隐患',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                label: {
                  normal: {
                    show: true,
                    position: 'top',

                  }
                },
                data: [8, 6, 3, 1, 10, 8, 9, 5, 32]
              }
            ]
          }
          )
        },

      },

      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>
