在Echarts扇形图中添加点击事件


有这样一个需求,在echarts中点击某一块弹出列表展示数据,这个时候需要用到echarts的点击事件

在vue中使用echarts

<template>
  <div class="pie" style="width:100%">
    <div id="pie1" style="width:100%">
      <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
      <div id="sed1" ref="charts" style="width:100%;height: 325px"></div>
    </div>
  </div>
</template>

script 部分

<script>
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
import { fileCount } from "@/request/api";
export default {
  name: "echarts",
  data() {
    return {
      opinionData1: [],
      title: [],
      myChart: null,
    };
  },

  methods: {
    //初始化数据
    initData() {
      // 基于准备好的dom,初始化echarts实例
      this.myChart = echarts.init(document.getElementById("sed1"));
      // 绘制图表
      this.myChart.setOption(
        {
          title: {
            text: "部门统计", //主标题
            x: "center", //x轴方向对齐方式
          },

          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            orient: "vertical",
            right: "right",
            data: this.title,
          },
          series: [
            {
              name: this.title,
              type: "pie",
              radius: ["40%", "70%"],
              center: ["50%", "60%"],
              data: this.opinionData1,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        },
        true
      );

      this.myChart.off("click");
      this.myChart.on("click", function(params) {
        //  var a = params.dataIndex
          console.log(params,"我被点击了");
      });
    },
  },
  mounted() {
    fileCount().then((res) => {
      if (res.code == 200) {
        let data = res.data;
        var array = [];
        data.forEach((element) => {
          array.push({
            name: element.pkBranchName,
            value: element.fileUploadCount,
          });
          this.title.push(element.pkBranchName);
        });
        this.opinionData1 = array;
        this.initData();
      
      }
    });
  },
};
</script>
Logo

前往低代码交流专区

更多推荐