echarts饼图给legend图例增加自定义点击事件

最新推荐文章于 2025-06-11 14:08:37 发布

x_1999

最新推荐文章于 2025-06-11 14:08:37 发布

阅读量2.9k

点赞数 8

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/x_1999/article/details/135594559

文章讲述了在Echarts中，如何通过监听legendselectchanged事件来处理图例点击，当用户手动取消选中时，通过发送自定义事件并动态设置图例选项，确保图例状态恢复到默认状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts图例点击会有一个默认的点击事件，会把点击的图例对应的legend取消

解决办法：legendselectchanged事件中将取消选中的legend动态设置回来，主要代码如下：

  let chart = echarts.init(document.getElementById('main'), null)
//图例点击事件
  chart.on('legendselectchanged', params => {
//父组件通过click-legend事件，写真正要实现的点击事件代码
    emit('click-legend', {
      series: params
    })
    //将默认点击事件中取消选中的legend动态设置回来
    chart.setOption({
      legend: { selected: { [params.name]: true } }
    })
  })