echarts饼图点击事件vue3

### 实现 Vue3 中 ECharts 饼图的点击事件 为了在 Vue3 中为 ECharts 饼图添加点击事件处理程序，可以按照如下方法操作： 创建组件并初始化 ECharts 图表实例，在 `mounted` 生命周期钩子中完成图表绘制，并设置监听器来捕获用户的交互行为。下面是一个完整的例子展示如何绑定点击事件到饼图上。 #### 组件模板部分 ```vue <template> <div class="pie-chart-wrap"> <!-- 使用 ref 属性获取 DOM 节点 --> <div ref="PieChart" :style="{ width: '100%', height: height }"></div> </div> </template> ``` #### JavaScript (setup 函数内) ```javascript import { onMounted, ref, watchEffect } from "vue"; import * as echarts from "echarts"; export default { setup() { const PieChart = ref(null); let myChart; function initChart() { // 基于准备好的DOM节点初始化echarts实例 myChart = echarts.init(PieChart.value); // 设置初始配置项和数据源 const option = { series: [ { name: "访问来源", type: "pie", // 定义系列类型为饼图 data: [ { value: 335, name: "直接访问" }, { value: 310, name: "邮件营销" }, { value: 234, name: "联盟广告" }, { value: 135, name: "视频广告" }, { value: 1548, name: "搜索引擎" } ] } ], tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" // 显示提示框的内容格式化函数 } }; // 加载选项至图表对象 myChart.setOption(option); // 添加点击事件处理器 myChart.on('click', params => handleClick(params)); window.addEventListener('resize', () => myChart.resize()); } function handleClick({ name }) { console.log(`您选择了 ${name}`); alert(name); // 可替换为其他逻辑 } onMounted(() => { initChart(); }); return { PieChart, }; } }; ``` 通过上述代码片段可以看到，当用户单击某个扇区时会触发相应的回调函数 `handleClick()` 并传递参数给它；这些参数包含了所选区域的信息，比如名称、数值等[^4]。