<template>
  <div class="chars-wrapper">
    <!-- <div class="bg">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div> -->
    <div ref="chart" class="pressure-bar-chart"></div>
  </div>
</template>

<script>
export default {
  name: "PressureBarChart",
  props: {
    data: {
      type: Array,
      default() {
        return [
          { name: "白官屯镇", value: 90 },
          { name: "七树庄镇", value: 78 },
          { name: "丰登坞镇", value: 75 },
          { name: "新军屯镇", value: 70 },
          { name: "小张各庄镇", value: 68 },
          { name: "欢喜庄乡", value: 65 },
          { name: "李钊庄镇", value: 64 },

        ];
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.updateChart();
      },
    },
  },
  methods: {
    initChart() {
      if (!this.$refs.chart) {
        return;
      }
      this.chart = this.$echarts.init(this.$refs.chart);
      this.updateChart();
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    updateChart() {
      if (!this.chart) {
        return;
      }
      const names = this.data.map((item) => item.name);
      const values = this.data.map((item) => item.value);
      const maxValue = Math.max(...values, 1);

      this.chart.setOption({
        grid: {
          left: 0,
          right: 20,
          top: 0,
          bottom: 0,
          containLabel: true,
        },
        xAxis: {
          type: "value",
          max: Math.ceil(maxValue * 1.25),
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false },
        },
        yAxis: [
          {
            type: "category",
            data: names,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              color: "#ffffff",
              fontSize: 16,
            },
          },
          {
            type: "category",
            data: values.map(item=>`${item}%`),
            offset:20,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              color: "#ffffff",
              fontSize: 16,
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: values,
            barWidth: 14,
            barCategoryGap: 5,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(255,255,255,0.12)",
              borderRadius: 6,
            },
            itemStyle: {
              borderRadius: [0, 6, 6, 0],
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#2ea6ff" },
                { offset: 1, color: "#14e0ff" },
              ]),
            },
            label: {
              show: false,
              position: "right",
              color: "#ffffff",
              fontSize: 14,
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chars-wrapper{
  width: 100%;
  position: relative;
}
.bg {
  position: absolute;
  width: 100%;
  height: 234px;
  // display: flex;
  // flex-direction:column;
  // justify-content: space-between;
  padding-top: 5px;

  .item {
    width: 100%;
    height: 40px;
    // background: rgba(130, 202, 255, 0.18);
    background: rgba(130, 202, 255, 0.18);
    margin-bottom: 10px;
  }

  // width: 100%;
  // height: 120px;
}
.pressure-bar-chart {
  position: relative;
  // position:absolute;
  // background: red;
  width: 100%;
  height: 234px;
  // overflow: hidden;
  // background: red;
}
</style>
