ECharts 饼图点击交互

本示例展示如何在 Vue 3 中为 ECharts 饼图添加点击事件,点击不同扇区查看详情信息

点击详情

点击饼图扇区查看详情

点击左侧饼图的任何部分将会在此显示详细信息

{{ clickData.name }}
数值: {{ clickData.value }}
百分比: {{ clickData.percent }}%
描述: {{ getDescription(clickData.name) }}
所属系列: {{ clickData.seriesName }}
数据索引: {{ clickData.dataIndex }}

实现说明

  • 使用 ECharts 的 chart.on('click') 方法监听饼图点击事件
  • 点击事件参数包含名称(name)、值(value)、百分比(percent)等关键数据
  • 通过 Vue 的响应式特性更新点击信息展示区域
  • 添加了窗口大小变化监听器,确保图表响应式调整
  • 在组件卸载时正确销毁 ECharts 实例和事件监听器