饼状图点击事件

例子：当点击饼状图扇面的时候，当前扇面的数据会以弹窗的形式展示出来

代码：(不包含css样式)

<template>
  <div class="box">
    <div id="main" class="echsty"></div>
    <Modal v-model="STdata" :mask-closable="false" footer-hide>
      <div class="alt_title">提示信息</div>
      <div class="Left">
        <div class="msg">扇面名称：</div>
        <div class="msg">扇面数据：</div>
        <div class="msg">扇面所占百分比：</div>
      </div>
      <div class="Right">
        <div class="Data">{{name}}</div>
        <div class="Data">{{data}}</div>
        <div class="Data">{{percent}}</div>
      </div>
    </Modal>
  </div>
</template>
<script>
import ECharts from "echarts";

export default {
  data() {
    return {
      name: "",
      data: "",
      percent: "",
      STdata: false,
      Mydata: [
        { value: 500, name: "测试用1" },
        { value: 400, name: "测试用2" },
        { value: 300, name: "测试用3" },
        { value: 200, name: "测试用4" },
        { value: 100, name: "测试用5" },
        { value: 600, name: "测试用6" },
      ],
    };
  },
  mounted() {
    window.addEventListener("resize", () => {
      const myChart = ECharts.init(document.getElementById("main"));
      myChart.resize();
    });
    this.$nextTick(function () {
      this.drawPie("main");
    });
  },
  methods: {
    //饼状图开始------------------------------------------------------------
    drawPie(id) {
      this.charts = ECharts.init(document.getElementById(id));
  　  this.charts.off("click");//解决重复点击问题
      this.charts.setOption({
        title: {
          text: "",
          subtext: "",
          left: "center",
        },
        gird: {
          top: "10%",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: this.Mydata,
          },
        ],
      });
      this.charts.on("click", (data) => {
        this.STdata = true;
        this.name = data.name;
        this.data = data.value;
        this.percent = data.percent + "%";
        // this.drawLine("Line");
        console.log(this.text);
        console.log(this.STdata);
        console.log("当前点击扇面所占百分比：", data.percent + "%");
        console.log("当前点击扇面数据：", data.value);
        console.log("当前点击扇面名称：", data.name);
        console.log("<--------------------我是分隔符-------------------->");
      });
    },
  },
};
</script>

 

效果

 

 

 

 

 

 

ps：一开始在点击事件中写的是

    this.charts.on("click", function(data) {
        this.STdata = true;
        this.name = data.name;
        this.data = data.value;
        this.percent = data.percent + "%";
        console.log("当前点击扇面所占百分比：", data.percent + "%");
        console.log("当前点击扇面数据：", data.value);
        console.log("当前点击扇面名称：", data.name);
        console.log("<--------------------我是分隔符-------------------->");
      });

运行程序的时候发现点击事件里的值都存在，但是无法将这些值赋值给外部，度娘之后发现是因为这里的 this 指向发生了改变，如果想要赋值，需要使用es6的箭头函数也就是代码中写的那种

 相关链接：https://es6.ruanyifeng.com/#docs/function#箭头函数