<template>
  <div id="inspectChart" class="inspectChart"></div>
</template>

<script>
  import { taskInspectStatistics } from "@/api/checktask/inspect";
  export default {
    name: "charts",
    data(){
      return{
        myChart: null,
      }
    },
    methods: {
      getStatisticsInfo(){
        taskInspectStatistics(this.$parent.queryParams).then(res =>{
          if(res.code == 200){
            const dataX = res.data.map((item) => {
                return item.timeType;
            });
            const dataY = res.data.map((item) => {
                return item.countNum;
            });
            this.myChart = this.$echarts.init(document.getElementById("inspectChart"));
            const option = this.charsOption(dataX, dataY);
            this.myChart.setOption(option);
          }
        })
      },
      charsOption(dataX, dataY) {
        return {
             title: {
              text: "入户安检信息统计图",
            },
            legend: {},
            tooltip: {
                  show: true,
                  trigger: "item",
                  // formatter: "{b}:设备总数;{c},在线:{c},离线:{e},报警:{f}",
                  formatter: (params, ticket) => {
                        return `入户安检次数 ${params.data}`;
                  },
                  position: function (point, params, dom, rect, size) {
                    // 固定在顶部
                    return [point[0] + 20, point[1]];
                  },
            },
            xAxis: {
              data: dataX,
                axisLabel: {
                interval: 0,
                  rotate: 40,
                  fontSize: "10",
              },
            },
            yAxis: {
              itemWidth: 10,
            },
            series: [
              {
                type: "bar",
                data: dataY,
                barMaxWidth: 100,
                itemStyle: {
                  normal: {
                    color: "#5470c6",
                    label: {
                      show: true,
                      position: "top",
                      textStyle: {
                        color: "gray",
                        fontSize: 12,
                      },
                    },
                  },
                },
              },
            ],
        };
      },
    },


  }
</script>

<style scoped lang="scss">

  .inspectChart {
    width: 100%;
    height: 300px;
    text-align: center;
    line-height: 20;
    font-size: 10px;
    // background: red;
  }
</style>
