<template>
  <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, defineProps } from "vue";
import { chartAdaptation } from "@/utils/tools";
import { progressProps } from "element-plus";
//   import { deepClone } from "@/utils/tools";

const props = defineProps({
  pxslTime: {
    type: Array,
    default: []
  },
  pxslNum: {
    type: Object,
    default: {}
  }
});
const {
  5200: sj,
  5201: gy,
  5202: lps,
  5203: zy,
  5204: as,
  5205: bj,
  5206: tr,
  5213: tzgs,
  5219: yky,
  5223: qxn,
  5226: qdn,
  5227: qn,
  5290: gaxq,
  5299: fkc
} = props.pxslNum;
onMounted(() => {
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    grid: {
      top: '20%',
      // left: '3%',
      bottom: '5%',
      height: '60%'
    },
    legend: {
      top: '20%',
      data: ["隐患数量"],
      textStyle: {
        color: "#319177"
      }
    },
    barMaxWidth: '30px',
    xAxis: [
      {
        type: "category",
        data: props.pxslTime,
        axisPointer: {
          type: "shadow"
        },
        axisLine: {
          lineStyle: {
            color: "#319177",
            fontSize: '20%'
          },
          axisLabel: {
            fontSize: 11
          }
        }
      }
    ],
    yAxis: [
      {
        nameGap: '5',
        type: "value",
        name: "隐患数量",
        axisLabel: {
          formatter: "{value} "
        },
        axisLine: {
          lineStyle: {
            color: "#07c8bd"
          }
        }
      }
    ],
    series: [
      // ,itemStyle: {normal: {color: '#319177'}},
      {
        name: "安顺",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: as
      },
      {
        name: "复烤厂",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: fkc
      },
      {
        name: "贵安新区",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: gaxq
      },
      {
        name: "贵阳",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: gy
      },
      {
        name: "六盘水",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: lps
      },
      {
        name: "黔东南",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: qdn
      },
      {
        name: "黔南",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: qn,
        itemStyle: { normal: { color: "yellow" } }
      },
      {
        name: "黔西南",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: qxn
      },
      {
        name: "省局",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: sj
      },
      {
        name: "铜仁",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: tr
      },
      {
        name: "投资公司",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: tzgs
      },
      {
        name: "烟科院",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: yky
      },
      {
        name: "遵义",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: zy
      },
      {
        name: "毕节",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: bj,
        itemStyle: { normal: { color: "#07c8bd" } }
      }
    ]
  };
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>
<style scoped>
::v-deep canvas {
  /* top: -59px !important; */
  height: 183px !important;
}
</style>

