<template>
  <div class="safeCheck">
    <div class="label">2019年概率况分布</div>
    <div id="safeCheck4"></div>

  </div>
</template>

<script>
    export default {
        name: "chanceSituation",
        title:"planCheck",
      data() {
        return {
          xc: '',
        }
      },
      methods: {
        setBar() {
          this.xc = this.$echarts.init(document.getElementById('safeCheck4'))
          var scale = 0.8
          var xAxisData = ['2019.1', '2019.3', '2019.6', '2019.7', '2019.8', '2019.9', '2019.10', '2019.11', '2019.12'];
          var legendData = ['安检率', '隐患率'];
          var serieData = [];
          var metaDate = [
            [22.73, 5.77, 3.60, 0.68, 16, 42.62, 36.84, 5.57, 78.68],
            [10.73, 7.77, 3.50, 2.68, 1, 12.62, 16.84, 5.57, 18.68]
          ]
          for (var v = 0; v < legendData.length; v++) {
            var serie = {
              name: legendData[v],
              type: 'line',
              symbol: "circle",
              symbolSize: 5 * scale,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    shadowBlur: 10 * scale,
                    shadowOffsetY: 15 * scale,
                  }
                }
              },
              data: metaDate[v]
            }
            serieData.push(serie)
          }
          var colors = ["#006400", "#483DBD"];

          this.xc.setOption({
            title: {
                text: '2019年概率况分布',
                textAlign: 'center',
                left: '40%',
                top: '3%',
                textStyle: {color: "#00CDCD", fontSize: 20 * scale, fontWeight: "normal"}
            },
            legend: {
              data: ['安检率', '隐患率'],
                left: '40%',
                top: '18%'
            },
            color: colors,
              toolbox: {
              show : true,
                feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
              }
            },

            grid:{
              show: false,
                left: '2%',
                top: '27%',
                containLabel: true,
                width: '90%',
                height: '70%'
            },

              xAxis: {
                  type: 'category',
                  // name: '2019年度月份',
                  nameLocation: 'center',
                  nameGap: '30',
                  nameTextStyle: {
                  fontSize: 16
                },
                boundaryGap: false,
                  //axisLabel:{
                  //             interval:0,//横轴信息全部显示
                  //            rotate:-30,//-30度角倾斜显示
                  //       }  ,
                  axisTick: {
                  alignWithLabel: true
                },
                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: '40',
                nameTextStyle: {
                fontSize: 16
              },
              axisLabel: {
                show: true,
                  interval: 'auto',
                  formatter: '{value}'
              },
              axisLine: {
                lineStyle: {
                  //color: colors[0]
                }
              },
              splitLine: {
                show: false
              }
            },
            series: serieData
            })
      },
    },
            ready() {
               this.setBar(),
               console.log(1111111)
            }
    }


</script>

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

  #chanceSituation {
    height: 91%;
    width: 99%;
    padding: 1% 2% 3% 2%;
  }
</style>
