FE-V2-PC/src/views/safetyCheck/worktable/hiddenDangerStatisticsEcharts.vue

<template>
  <div class="hiddenDangerStatisticsEcharts">
    <div class="title-button-box">
      <p :class="hdLevel==1?'check-p':''" @click="titleButtonClick(1)">一级指标</p>
      <p :class="hdLevel==2?'check-p':''" @click="titleButtonClick(2)">二级指标</p>
      <p :class="hdLevel==3?'check-p':''" @click="titleButtonClick(3)">三级指标</p>
    </div>
    <p v-if="nullType" style="line-height:100px;text-align: center;color:#999;">暂无数据</p>
    <div class="hiddenDangerStatisticsEcharts-box" id="hiddenDangerStatisticsEcharts-box">
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import { hiddenCountByType, collegCheckHiddenCountByType,isSCollege } from '@/api/safetyCheck/index'
  export default {
    name: 'hiddenDangerStatisticsEcharts',
    data(){
      return{
        hdLevel:1,
        userFlg:true,
        nullType:false,
      }
    },
    created(){

    },
    mounted(){
      this.isSCollege();
    },
    methods:{
      isSCollege(){
        isSCollege().then(response => {
          this.$set(this,'userFlg',response.data.userFlg);
          if(this.userFlg){
            this.departmentEcharts();
          }else{
            this.schoolEcharts();
          }
        })
      },
      titleButtonClick(type){
        if(this.hdLevel != type){
          this.$set(this,'hdLevel',type);
          if(this.userFlg){
            this.departmentEcharts();
          }else{
            this.schoolEcharts();
          }
        }
      },
      //校级
      schoolEcharts(){
        hiddenCountByType({hdLevel:this.hdLevel}).then(response => {
          let myChart = this.$echarts.init(document.getElementById('hiddenDangerStatisticsEcharts-box'));
          let data = [];
          if(!response.rows[0]){
            this.$set(this,'nullType',true);
            return
          }else{
            this.$set(this,'nullType',false);
          }
          for(let i=0;i<response.rows.length;i++){
            // substring
            console.log(response.rows[i].collegeName.length)
            let obj = {
              name:response.rows[i].collegeName.length>8?response.rows[i].collegeName.substring(0,8)+'..':response.rows[i].collegeName,
              nameText:response.rows[i].collegeName,
              value:response.rows[i].sumTotal,
            }
            data.push(obj);
          }
          let option = {
            legend: {
              show:false,
            },
            tooltip: {
              confine: true,
              trigger: 'item',
              // formatter: '{b} : {c}'

              formatter: params => {
                console.log('params',params)
                return `${params.data.nameText} 隐患:${params.data.value} 占比:${params.percent}%`
              },
            },
            series: [
              {
                avoidLabelOverlap: false,
                type: 'pie',
                left:20,
                right:20,
                roseType: 'area', // 玫瑰图
                center: ['50%', '50%'],
                radius: ['0%', '40%'],
                label: {
                  normal: {
                    formatter: '{b}\n隐患{c}\t占比{d}%',
                    textStyle: {
                      fontSize: 12,
                      color:'#333'
                    },
                    padding: [0, -110, 26, -110],
                  }
                },
                labelLine: {
                  normal: {
                    length: 30,
                    length2: 110,
                  }
                },
                data: data,
                itemStyle: {
                  normal: {
                    color: function (colors) {
                      var colorList = ['#0183FA', '#A069FF', '#80C459', '#FFA200', '#39DBED', '#FF2A00', '#009DFF', '#41BE26', '#2758E0', '#FFE019', '#FF5E86'];
                      return colorList[colors.dataIndex];
                    }
                  },
                }
              }
            ]
          };
          myChart.setOption(option);
        });
      },
      //院系
      departmentEcharts(){
        collegCheckHiddenCountByType({hdLevel:this.hdLevel}).then(response => {
          let myChart = this.$echarts.init(document.getElementById('hiddenDangerStatisticsEcharts-box'));
          let data = {
            name:[],
            nameText:[],
            text:[],
            num: [],
          }
          if(!response.rows[0]){
            this.$set(this,'nullType',true);
            return
          }else{
            this.$set(this,'nullType',false);
          }
          response.rows.sort(this.compare('sumTotal', true))
          for(let i=0;i<response.rows.length;i++){
            data.name.push(response.rows[i].subjectName.length>8?response.rows[i].subjectName.substring(0,8)+'..':response.rows[i].subjectName)
            data.nameText.push(response.rows[i].subjectName)
            data.text.push(response.rows[i].hazardCheckName)
            data.num.push(response.rows[i].sumTotal)
          }
          let option = {
            grid: {
              left: '30%',
              top: '8%',
              right: '15%',
              bottom: '15%',
            },
            tooltip: {
              trigger: 'axis',
              formatter: params => {
                return data.nameText[params[0].dataIndex] +' 隐患:'+ data.num[params[0].dataIndex]
                // return `${params.data.nameText} 隐患:${params.data.value} 占比:${params.percent}%`
              },
              backgroundColor: 'rgba(0, 0, 0, 0.6)', // 提示框背景色
              borderColor: '#05050F', // 提示框边框色
              textStyle: {
                color: '#fff', // 提示框文本颜色
              },
              axisPointer: {
                type: 'none',
              },
            },
            legend: {
              show:false,
            },
            xAxis: {
              type: 'value',
              position: "bottom",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: '#333',
                  fontSize: 12,
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(216,216,216,1)',
                },
              },
            },
            yAxis: {
              type: 'category',
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              data: data.name,
              axisLabel: {
                textStyle: {
                  color: '#333',
                  fontSize: 12,
                },
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(216,216,216,1)',
                },
              },
            },
            series: [
              {
                name: '隐患',
                type: 'bar',
                data: data.num,
                itemStyle: {
                  emphasis: {
                    barBorderRadius: [0, 20, 20, 0],
                  },
                  normal: {
                    barBorderRadius: [0, 20, 20, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                      [
                        {
                          offset: 0,
                          color: 'rgba(246,111,0,0.1)', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(246,111,0,1)', // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                  },
                },
                label: {
                  normal: {
                    show: true,
                    formatter: params => {
                      return '隐患'+params.data
                    },
                    position: 'insideRight',
                    offset: [40, 1.5],
                    textStyle: {
                      color: '#333',
                      fontSize: 12,
                    },
                  },
                },
              },
            ],
            barCategoryGap: '60%',
          };
          myChart.setOption(option);
        })
      },
      compare (attr,rev) {
        // console.log(attr, rev)
        if(rev ==  undefined){
          rev = 1;
        }else{
          rev = (rev) ? 1 : -1;
        }
        return (a,b) => {
          a = a[attr];
          b = b[attr];
          if(a < b){
            return rev * -1;
          }
          if(a > b){
            return rev * 1;
          }
          return 0;
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .hiddenDangerStatisticsEcharts{
    height:483px;
    .title-button-box{
      display: flex;
      border:1px solid #0183fa;
      width:300px;
      margin:32px 71px 0;
      p{
        width:100px;
        line-height:30px;
        text-align: center;
        color:#0183fa;
        cursor: pointer;
      }
      p:nth-child(2){
        border-left:1px solid #0183fa;
        border-right:1px solid #0183fa;
      }
      .check-p{
        background-color: #0183fa;
        color:#fff;
      }
    }
    .hiddenDangerStatisticsEcharts-box{
      height:420px;
    }
  }
</style>