Echarts饼状图-柱状图点击事件

1、饼状图

 var chart = this.$charts.chart("chartBox", {
                chart: {
                    type: "pie",
                    backgroundColor: "transparent",
                    options3d: {
                        enabled: true,
                        alpha: 30,
                    },
                    spacing: [0, 0, 0, 0],
                },
                title: {
                    verticalAlign: "middle", //标题在环的中间显示
                    text: this.total,//总数
                    style: {
                        fontSize: "18px",
                        color: "#ffffff",
                    },
                },
                tooltip: {
                    pointFormat: "{series.name}:{point.percentage:.2f}%",
                    style: {
                        fontSize: "14px",
                        color: "#000000",
                    },
                },
                plotOptions: {
                   
                    pie: {
 point: {
                            events: {
                                click: function (event) {
                                    // 在这里添加点击事件的处理逻辑
                                    console.log("点击了饼图:", event.point.name, event.point.y);
                                   
                                },
                            },
                        },
                        allowPointSelect: true,
                        cursor: "pointer",
                        showInLegend: false,
                        innerSize: 60,
                        depth: 30,
                        dataLabels: {
                            enabled: false,
                            format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                            style: {
                                color:
                                    (this.$charts.theme &&
                                        this.$charts.theme.contrastTextColor) ||
                                    "black",
                            },
                        },
                    },
                },
                credits: {
                    enabled: false,
                },
                exporting: {
                    enabled: false,
                },
                colors: ["#00FFFF", "#00B7EE", "#007BEE", "#00EEA2", "#8DE022"],
                series: [
                    {
                        name: "",
                        data: this.info,//数据
                    },
                ],
            })

2、柱状图

  const chartDom = document.getElementById("chartBox")
            var myChart = this.$echarts.init(chartDom)
            myChart.resize()
            var option
            option = {
                grid: {
                    top: "10",
                    bottom: "20",
                    left: "50",
                    right: "40",
                },
                xAxis: {
                    type: "value",
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { show: false },
                    splitLine: { show: false },
                },
                label: {
                    position: "right",
                    show: true,
                },
                yAxis: {
                    type: "category",
                    data: ["标题1", "标题", "标题", "标题", "标题"],
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        color: "#ffffff",
                    },
                },
                series: [
                    {
                        data: this.data,//数据
                        type: "bar",
                        showBackground: true,
                        backgroundStyle: {
                            color: "#e4e7ed",
                        },
                        backgroundStyle: {
                            color: "rgba(180, 180, 180, 0.2)",
                        },
                        itemStyle: {
                            normal: {
                                barWidth: 20, // 每个柱子的宽度
                            },
                        },
                    },
                ],
            }
            myChart.on('click', function(params) {
                console.log('点击了柱状图:', params.name,params.data);
            });
            option && myChart.setOption(option)