<!-- 物资情况 -->
<template>
  <div class="box">
    <div ref="wzqk" class="charts"></div>
    <div class="title">物资可用统计</div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const wzqk = ref(null);
let data = [
  [34, 123, 22, 80, 150, 200, 123, 233, 222],
  [122, 233, 143, 120, 170, 160, 222, 122, 122]
];
let xdata = ["被服", "床具", "用具", "帐篷", "抢险物料", "救生器材", "抢险机具", "排水设备", "供水器具"];
let legends = ["可用物资", "不可用物资"];
const series = data.map((item, index) => {
  return {
    name: legends[index],
    type: "bar",
    stack: "total",
    label: {
      show: false
    },
    emphasis: {
      focus: "series"
    },
    data: item
  };
});
let zeroArr = xdata.map((v) => 0);

onMounted(() => {
  let myChart = echarts.init(wzqk.value);
  let option: any;
  series.push({
    name: null,
    type: "bar",
    stack: "total",
    barWidth: "30%",
    label: {
      show: true,
      color: "#333",
      position: "top",
      distance: 10,
      fontSize: 12,
      formatter: function (lp) {
        let datas = 0;
        option.series.map((v) => {
          let data_ = v.data[lp.dataIndex];
          datas += data_;
        });
        return datas || "";
      }
    },
    emphasis: {
      select: false
    },
    tooltip: {
      show: false
    },
    data: zeroArr
  });
  option = {
    backgroundColor: "",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      top: "20%",
      right: "10%",
      color: "#fff",
      textStyle: {
        color: "#fff",
        fontSize: 12,
        lineHeight: 24
      }
    },
    grid: {
      left: "18%",
      // right: '4%',
      // bottom: '3%',
      top: "40%",
      width: "70%",
      height: "60%",

      containLabel: true
    },
    yAxis: {
      type: "value"
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#fff",
        interval: 0,
        rotate: 45
        // fontSize:12,
        // padding:0
      },
      data: xdata
    },
    color: ["#98EECC", "#FC4F00"],
    series: series
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.box .charts {
  width: 100%;
  height: 100%;
  /* background: pink; */
}

.title {
  font-size: 20px;
  color: red;
  position: absolute;
  left: 14%;
  top: 6%;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, rgb(29, 233, 234));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
