echarts中饼图旁边的小方块也就是legend区域的点击事件

在echarts中，legend区域的点击事件默认是不生效的。只有饼图区域内的点击事件才会被绑定。如果你想要实现legend区域的点击事件，可以通过以下方式解决。

首先，需要注意的是，在echarts 5.0版本以下，当给legend加入type: 'scroll'时，如果在textStyle中使用了rich来实现图例的翻页效果，可能会导致legend重叠在一起的问题。升级到5.0以上版本可以解决这个问题，但是会发现在使用5.0以上版本的时候，加入type: 'scroll'后，虽然图例显示正常，但是series中套用的用来描绘样式的数据也会有自己的一个图例（也就是那个小方块），由于没有数据没有name，所以会显示为一个单纯的小方块。

解决这个问题的办法是给legend添加一个data属性，属性值是series中data的name数据的一个集合。这样就可以让legend用来描述特定的一个数据。如果你的图例描述很简单，可以参考官方示例。但是如果你想要自定义图例的描述以及相应的样式，就不能单纯地使用官网示例。

总结一下，当你的echarts中的series中有多个数据，想要让legend用来描述特定的一个数据时，可以给legend添加一个data属性，属性值是那个特定数据的data中的name。这样就可以实现legend区域的点击事件了。另外，如果你想要避免默认触发两次事件的问题，可以在事件处理函数的前面加上一行代码off，这样就只会触发一次了。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* *3* [echarts中饼图旁边的小方块也就是legend区域的点击事件](https://blog.csdn.net/weixin_44029226/article/details/120431329)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [echarts 多个饼图套用时legend匹配问题(series中有多个数据)](https://blog.csdn.net/bobringtheboys/article/details/124420215)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]