<template>
  <div class="com-wapper">
    <div class="func-btns">
      <el-button type="primary" plain @click="showPoint('2023')">
        固定显示2023年数据
      </el-button>
      <el-button type="success" plain @click="clearFixedTooltip">
        恢复
      </el-button>
    </div>
    <div ref="chartRef" class="chart-content"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "com-page",
  components: {},
  props: {},
  data() {
    return {
      myData: {
        xData: ["2021", "2022", "2023", "2024", "2025"],
        dataList: [
          {
            name: "概率论",
            value: [61, 58, 72, 76, 83],
          },
          {
            name: "高等数学",
            value: [78, 62, 86, 83, 80],
          },
          {
            name: "离散数学",
            value: [91, 78, 66, 79, 92],
          },
        ],
      },
      myChart: null,
      option: null,
      isShow: false,
    };
  },
  mounted() {
    this.drawingChart();
    window.addEventListener("resize", this.resize);
  },
  methods: {
    /**
     * 画图
     */
    drawingChart() {
      this.myChart = echarts.init(this.$refs.chartRef);
      this.option = {
        grid: {
          containLabel: true,
        },
        legend: {
          data: this.myData.dataList.map((item) => {
            return {
              name: item.name,
            };
          }),
        },
        tooltip: {
          show: true,
          trigger: "axis",
          alwaysShowContent: false,
        },
        xAxis: [
          {
            type: "category",
            data: this.myData.xData,
            boundaryGap: true,
          },
        ],
        yAxis: [
          {
            splitNumber: 5,
            min: 0,
            max: 100,
          },
        ],
        series: this.myData.dataList.map((item) => {
          return {
            type: "line",
            data: item.value,
            name: item.name,
            smooth: true,
            showSymbol: true,
          };
        }),
      };
      this.myChart.setOption(this.option);
    },
    /**
     * 重置图表
     */
    resize() {
      this.myChart && this.myChart.resize();
    },
    /**
     * 显示固定点的tooltip
     */
    showPoint(point) {
      let xAxisData = this.myData.xData; // 横轴数据
      const index = xAxisData.findIndex((item) => item === point);
      if (index !== -1) {
        // 显示当前数据tooltip
        this.myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: index, // 要显示的数据点索引值
        });
        // 修改配置，保持tooltip一直显示
        this.myChart.setOption({
          tooltip: {
            alwaysShowContent: true,
          },
        });
        // 临时禁用鼠标事件
        this.myChart.getZr().off("globalout");
        this.myChart.getZr().off("click");
        this.myChart.getZr().off("mousemove");
        // 标记一下
        this.isShow = true;
      }
    },
    /**
     * 恢复tooltip的正常使用
     */
    clearFixedTooltip() {
      if (this.isShow) {
        this.isShow = false;
        // 取消常显配置
        this.myChart.setOption({
          tooltip: {
            alwaysShowContent: false,
          },
        });
        // 恢复默认交互，重新绑定mousemove和globalout
        const zr = this.myChart.getZr();
        const that = this;
        zr.on("mousemove", function (e) {
          that.myChart._api.dispatchAction({
            type: "showTip",
            x: e.offsetX,
            y: e.offsetY,
          });
        });
        zr.on("globalout", function () {
          that.myChart._api.dispatchAction({
            type: "hideTip",
          });
        });
        // 隐藏当前tooltip
        this.myChart.dispatchAction({
          type: "hideTip",
        });
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
    this.myChart && this.myChart.dispose();
  },
};
</script>

<style lang='scss' scoped>
.com-wapper {
  height: 100%;
  .func-btns {
    text-align: center;
  }
  .chart-content {
    width: 100%;
    height: 70%;
    padding-top: 40px;
    margin-top: 30px;
    background: rgba(237, 237, 237, 0.2);
  }
}
</style>