<template>
    <div class="container4">
      <div ref="bar" class="bar"></div>
      <div class="right">
        <div class="top">性别比例</div>
        <div class="bottom">
            <div>
                <div class="renshu">0人</div>
                <div class="bili">20%</div>
            </div>
            <div>
                <div class="renshu">0人</div>
                <div class="bili">20%</div>
            </div>
        </div>
      </div>
    </div>
  </template>
      
  <script>
  import {getDyqk,getDyqk2} from '@/api/zhdjxt.js'
  export default {
    data () {
      return{
         data:[],
         text:[],
         number:[]
      }
    },
    computed: {
      randomRgbColor() {
        //随机生成RGB颜色
        var r = Math.floor(Math.random() * 256); //随机生成256以内r值
        var g = Math.floor(Math.random() * 256); //随机生成256以内g值
        var b = Math.floor(Math.random() * 256); //随机生成256以内b值
        return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
      },
    },
  created(){
    this.getDyqk()
  },
    methods: {
      gr() {
        let myChart = this.$echarts.init(this.$refs.bar);
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "2%",
            right: "25%",
            bottom: "10%",
            top: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false, //刻度线
            },
            axisLabel: {
              show: false, //隐藏刻度值
            },
            splitLine: {
              //网格线
              show: false,
            },
          },
          yAxis: {
            axisLabel: {
              textStyle: {
                show: true,
                color: "#fff",
                fontSize: "12",
              },
            },
            type: "category",
            data: this.text,
          },
          series: [
            {
              name: "案件",
              type: "bar",
              barWidth: "20%",
              color: this.randomRgbColor,
              label: {
                formatter: "{c}" + "人",
                show: true,
                position: "right",
                textStyle: {
                  fontSize: "12",
                  color: "#fff",
                },
              },
              data: this.number,
            },
          ],
        };
        myChart.setOption(option);
        let sizeFun = function () {
          myChart.resize();
        };
        window.addEventListener("resize", sizeFun);
      },
      async getDyqk() {
        try {
          const res = await getDyqk()
          const res2 = await getDyqk2()
          this.data = res.data.list
          //  console.log(this.data);
           this.data.forEach(item => {
              this.number.push(...item.columns)
              this.text.push(item.name)
           })
          //  console.log(res2);
           this.$nextTick(()=>{
            this.gr();
           })
        } catch (error) {
          console.log('数据获取失败');
        }
      }
    },
    mounted() {
      // setTimeout(() => {
      //   this.gr()
        
      // }, 500);

      
    },
  };
  </script>
      
  <style scoped lang="scss">
  .container4 {
    /* border: 1px solid #00ffff;  */
    overflow: hidden;
    width: 23.5417vw;
    height: 21.9354vh;
    display: flex;

    .right{
        width: 10.4167vw;
        height: 21.9354vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 2.1505vh;
        .top{
            font-size: 1.3021vw;
            color: #fff;
        }
        .bottom{
            display: flex;
            justify-content: space-around;
            color: #fff;
            .renshu{
                font-size: .625vw;

            }
            .bili{
                font-size: 1.0417vw;
            }
        }
    }
    .bar {
     width: 13.125vw;
     height: 21.9354vh;
  }
  }
  
  
  </style>