<template>
  <!-- 使用 ref 绑定一个 DOM 元素，用于后续在 JavaScript 中引用 -->
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from "echarts"; // 引入 ECharts 库

export default {
  props: {
    // 定义组件的 props，接收一个名为 chartData 的对象
    chartData: {
      type: Object, // 指定 prop 的类型为对象
      required: true, // 表示这个 prop 是必需的
      default: () => ({ xAxis: [], seriesData: [] }) // 如果没有传递该 prop，则使用默认值
    }
  },
  data() {
    return {
      chartInstance: null // 声明一个变量来保存 ECharts 实例
    };
  },
  mounted() {
    // 组件挂载完成后执行的钩子函数
    this.initChart(); // 初始化图表
  },
  watch: {
    chartData: {
      deep: true, // 深度监听，确保对象内部的变化也能触发
      handler() {
        this.$nextTick(() => {
          this.initChart(); // 重新初始化图表
        });
      }
    }
  },
  methods: {
    initChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose(); // 如果 ECharts 实例已经存在，先销毁旧实例
      }
      this.chartInstance = echarts.init(this.$refs.chart); // 初始化 ECharts 实例

      // 处理数据，按值降序排序
      const sortedSeriesData = this.chartData.seriesData
        .map((value, index) => ({ value, index })) // 将值和索引映射为对象
        .sort((a, b) => b.value - a.value) // 按值降序排序
        .map(({ value, index }) => ({ value, name: this.chartData.xAxis[index] })); // 重新映射为包含名称的对象

      // 定义 ECharts 的配置选项
      const option = {
        title: {
          text: "巡检地点统计情况", // 图表标题
          left: "left" // 标题位置
        },
        tooltip: {
          trigger: "axis", // 提示框触发方式，这里设置为坐标轴触发
          axisPointer: {
            type: "shadow" // 提示框的指示器类型，这里设置为阴影
          }
        },
        grid: {
          left: "3%", // 网格左间距
          right: "4%", // 网格右间距
          bottom: "3%", // 网格底间距
          containLabel: true // 网格是否包含标签
        },
        xAxis: {
          type: 'value' // X 轴类型，这里设置为数值轴
        },
        yAxis: {
          type: 'category', // Y 轴类型，这里设置为类目轴
          data: sortedSeriesData.map(item => item.name) // Y 轴数据，显示类别名称
        },
        series: [
          {
            data: sortedSeriesData.map(item => item.value), // 系列数据，显示数值
            type: 'bar' // 图表类型，这里设置为柱状图
          }
        ]
      };

      this.chartInstance.setOption(option); // 设置图表的配置选项
    }
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose(); // 销毁 ECharts 实例，释放资源
    }
  }
};
</script>

<style>
/* 可以在这里添加样式 */
</style>