<template>
  <el-row>
    <div id="index2" style="height:100%;width:110%;margin:-2em 0 0 -5%;"></div>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["resData"],
  data() {
    return {};
  },
  watch: {
    resData() {
      this.getData();
    }
  },
  methods: {
    getData() {
      let chartDom = document.getElementById("index2");
      let myChart = echarts.init(chartDom);
      let name = []
      let num = []
      this.resData.forEach(val =>{
        name.push(val.deviceTypeS)
        num.push(val.deviceCount)
      })
      setTimeout(()=>{
        console.log(name)
      },1000)

      // num =[1,10,20,30,40,50]
      let option = {
          xAxis: {
            type: 'category',
            data: name,
            axisLine: {
              lineStyle: {
                color: "#6F99FA"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "#6F99FA"
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          },
          series: [
            {
              data:num,
              type:'bar'
            },
          ],
          color: ['#FF0087', '#00DDFF', '#37A2FF', '#FF5801', '#FFBF00']
      };
      option && myChart.setOption(option);
      setTimeout(function (){
          window.onresize = function () {
            myChart.resize();
          }
      },200)

    },
  }
};
</script>

<style lang="scss" scoped></style>
