<!--报警统计-->
<template>
  <div class="alarmStatistics">
    <div class="title-box-max-box">
      <div class="title-left-box">
        <p></p>
        <p>报警统计</p>
      </div>
      <div class="title-right-box">
        <p @click="goPage">查看更多 <i class="el-icon-d-arrow-right"></i></p>
      </div>
    </div>
    <img class="null-data-img" v-show="!dataType" src="@/assets/ZDimages/basicsModules/null-data-1.png">
    <div id="eCharts-alarm" v-show="dataType">

    </div>
  </div>
</template>
<script>
import { chemicalIndexChemicalGroup, chemicalIndexWarnCount } from '@/api/chemicalManage'

  export default {
    name: 'alarmStatistics',
    data () {
      return {
        dataType:false,
        dataX:[],
        dataY:[],
      }
    },
    created(){
      this.chemicalIndexWarnCount();
    },
    mounted(){
      this.getInfo();
    },
    methods:{
      //页面跳转
      goPage(){
        this.$router.push({ path: '/chemicalManage/earlyWarningEvent'});
      },
      chemicalIndexWarnCount(){
        let self=this;
        chemicalIndexWarnCount().then(response => {
           this.$set(this, 'dataX',response.data.dictName)
           this.$set(this, 'dataY',response.data.dictValue)
          this.getInfo();
        });
      },
      //获取数据
      getInfo(){
        this.$set(this,'dataType',true);
        this.eChartsDraw();
      },
      //eCharts绘制
      eChartsDraw(){
        let myChart = this.$echarts.init(document.getElementById('eCharts-alarm'));
        let dataValue = this.dataY;
        let dataName = this.dataX;
        let option = {
          grid: {
            left: '8%',
            right: '5%',
            top: '10%',
            bottom: '20%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              lineStyle: {
                color: '#57617B',
              },
            },
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#333',
              },
            },
            offset: 5,
            axisTick: {
              show: false,
              alignWithLabel: true,
              lineStyle: {
                color: '#D8D8D8',
              },
            },
            axisLabel: {
              fontSize: 12,
              formatter: function (params) {
                var str = "";                 // 最终拼接成的字符串
                var paramsLen = params.length;// 获取每项文字的个数
                var len = 6;                  // 每行能显示的字的个数（根据实际情况自己设置）
                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
                  for (var i = 0; i < rowNumber; i++) {
                    var temp = "";            // 表示每一次截取的字符串
                    var start = i * len;      // 开始截取的位置
                    var end = start + len;    // 结束截取的位置
                    if (i == rowNumber - 1) { // 最后一次不换行
                      temp = params.substring(start, paramsLen);
                    } else {                  // 每一次拼接字符串并换行
                      temp = params.substring(start, end) + "\n";
                    }
                    str += temp;              // 最终拼成的字符串
                  }
                } else {                      // 给新的字符串赋值
                  str = params;
                }
                return str;                   //返回字符串
              }
            },
            data: dataName,
          },
          yAxis: {
            name: '数量',
            type: 'value',
            min: 0, // 可设置最大值
            axisLine: {
              show: true,
              lineStyle: {
                color: '#333',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: '#dddddd',
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              fontSize: 12,
            },
            boundaryGap: ['20%', '20%'],
          },
          series: [{
            name: '',
            type: 'line',
            stack: '总量',
            smooth: true,
            symbol: 'none',
            showSymbol: false,
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#00AEFF',
                lineStyle: {
                  color: '#00AEFF',
                  width: 2,
                },
                areaStyle: {
                  color: 'rgba(255, 255, 255,0)',
                },
              },
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: 'red',
                },
              },
            },
            data: dataValue,
          }, ],
        };
        myChart.setOption(option);
      },
    },
  }
</script>
<style scoped lang="scss">
  .alarmStatistics{
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
    border-radius: 10px;
    width:650px;
    height:346px;
    margin:0 20px;
    .title-box-max-box{
      display: flex;
      padding:24px 22px;
      .title-left-box{
        display: flex;
        flex:1;
        p:nth-child(1){
          width:4px;
          height:18px;
          margin-right:11px;
          background: #0183FA;
        }
        p:nth-child(2){
          color:#333;
          font-size:18px;
          line-height:18px;
        }
      }
      .title-right-box{
        p{
          font-size:14px;
          line-height:18px;
          color:#666666;
          cursor: pointer;
        }
      }
    }
    #eCharts-alarm{
      width:650px;
      height:279px;
    }
  }
</style>
