Echarts 点击事件，this无法正确获取到对应的属性，this的指向问题

Echarts 点击事件，this无法正确获取到对应的属性，this的指向问题

Echarts 点击事件

<template>
  <div class="radiopie">
    <div ref="radiopieChart" class="radiopieChart"></div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import echarts from "echarts";
export default {
  name: "pieInfo",
  props: {
    question: {},
  },
  data() {
    return {
      datatitle: ["是", "否"],
      datainfo: [],
      isshow: false,
      chart: null,
      status: "",
      gridNo: "",
      showModel: false,
    };
  },
  methods: {
    find() {
      this.datainfo.push({
        value: this.question.values["是"],
        name: "是",
        text: this.question.key,
      });
      this.datainfo.push({
        value: this.question.values["否"],
        name: "否",
        text: this.question.key,
      });
      this.chart = echarts.init(this.$refs.radiopieChart);
      const option = {
        title: {
          top: 20,
          text: this.question.key,
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 0,
          left: "center",
          data: this.datatitle,
        },
        series: [
          {
            name: "数据",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.datainfo,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.chart.setOption(option);
      this.chart.on("click", function (param) {
       console.log("param", param);
      });
    },
  },
  mounted() {
    this.find();
  },
  created() {},
};
</script>

<style  lang="less" scoped>
.radiopie {
  width: 19%;
  height: 280px;
  margin-bottom: 30px;
}
.radiopieChart {
  height: 280px;
}
</style>

Echarts 点击事件，this的指向问题

<template>
  <div class="radiopie">
    <div ref="radiopieChart" class="radiopieChart"></div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import echarts from "echarts";
export default {
  name: "pieInfo",
  props: {
    question: {},
  },
  data() {
    return {
      datatitle: ["是", "否"],
      datainfo: [],
      isshow: false,
      chart: null,
      status: "",
      showModel: false,
    };
  },
  methods: {
    find() {
      this.datainfo.push({
        value: this.question.values["是"],
        name: "是",
        text: this.question.key,
      });
      this.datainfo.push({
        value: this.question.values["否"],
        name: "否",
        text: this.question.key,
      });
      this.chart = echarts.init(this.$refs.radiopieChart);
      const option = {
        title: {
          top: 20,
          text: this.question.key,
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 0,
          left: "center",
          data: this.datatitle,
        },
        series: [
          {
            name: "数据",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.datainfo,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
        this.chart.setOption(option);
      //解决办法一,提前定义this
       let that = this;
      this.chart.on("click", function (param) {
       console.log("param", param);
       //输出为空
       this.status="123"
       console.log("this.status"this.status)
        //输出为123
        that .status="123"
       console.log("that.status"that.status)
      });
      //解决办法二,用=》替换function
         this.chart.on("click", param => {
        console.log("status"this.status)
      });
    },
  },
  mounted() {
    this.find();
  },
  created() {},
};
</script>

<style  lang="less" scoped>
.radiopie {
  width: 19%;
  height: 280px;
  margin-bottom: 30px;
}
.radiopieChart {
  height: 280px;
}
</style>