<template>
  <div class="container9">
    <div ref="bar" class="bar"></div>
  </div>
</template>
      
<script>
  import {getLyfwxx} from '@/api/jcxxxt.js'
export default {
  data(){
    return{
          data:[],
          name:[],
          value:[]
    }
  },
  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.getLyfwxx()
 },
  methods: {
    gr() {
      let myChart = this.$echarts.init(this.$refs.bar);
      var tootipTimer = null;
      let option = {
        legend: {
          textStyle: {
            color: "#fff",
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "2%",
          right: "10%",
          bottom: "5%",
          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.name,
        },
        series: [
          {
            name: "房屋信息",
            type: "bar",
            barWidth: "70%",
            color: this.randomRgbColor,
            label: {
              formatter: "{c}" + "间",
              show: true,
              position: "right",
              textStyle: {
                fontSize: "12",
                color: "#fff",
              },
            },
            data: this.value,
          },
        ],
      };
      myChart.setOption(option);
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);
      tootipTimer && tootipTimer.clearLoop();
      tootipTimer = null;
      // 调用轮播的方法
      tootipTimer = window.loopShowTooltip(myChart, option, {
        interval: 2000, // 轮播间隔时间
        loopSeries: true, // 是否开启轮播循环
      });
    },
     async getLyfwxx() {
      try {
        const res = await getLyfwxx()
        //  console.log(res);
         this.data = res.data.list
         this.data.forEach(item =>{
          this.name.push(item.name)
          this.value.push(...item.columns)
         })
         this.$nextTick(() => {
                    this.gr();
                })
      } catch (error) {
        console.log('获取数据失败');
      }
     }
  },
  mounted() {
    // this.gr();
  },
};
</script>
      
<style scoped lang="scss">
.container9 {
  // border: 1px solid #00ffff;  
  width: 23.2813vw;
  height: 51.3978vh;
  text-align: left;

  .bar {
    width: 23.2813vw;
    height: 51.3978vh;
  }
}
</style>