如何处理 ECharts 图表中图例项和数据点的事件冲突？

在使用 ECharts 图表时，图例项和数据点的事件可能会发生冲突，因为它们都绑定了鼠标交互事件，比如点击。为了解决这种冲突，你可以采取以下几种方法：

1. 事件分离：为图例项和数据点分别绑定不同的事件处理函数。例如，可以将图例项的点击事件用于切换数据系列的显示或隐藏，而将数据点的点击事件用于执行特定的数据详情展示或其他操作。

2. 判断事件源：在事件处理函数中，可以通过判断触发事件的元素类型来执行不同的逻辑。例如，在点击事件中获取事件对象的 `target` 属性，判断是图例项还是数据点，然后执行相应的逻辑。

3. 使用事件委托：通过为图表容器绑定事件，并在事件处理函数中使用事件委托的方式，来区分是哪个图例项或数据点触发了事件。这通常涉及到对事件冒泡的控制以及对事件目标的判断。

4. 禁用图例项的默认行为：在图例项的点击事件中，可以通过调用 `event.stop()` 或设置事件处理函数返回 `false` 来阻止事件进一步传播和默认行为。

下面是一个简单的代码示例来展示如何分离事件和使用事件委托处理图例项和数据点的冲突：

// ECharts 实例化代码省略...

// 分离图例项和数据点的点击事件
chart.setOption({
    // 图例项点击事件
    legend: {
        selectedMode: false, // 关闭图例项的默认选中行为
        itemclick: function (data) {
            // 切换图例项的显示状态
            chart.dispatchAction({
                type: 'legendToggleSelect',
                name: data.name
            });
        }
    },
    // 数据点点击事件
    series: [{
        data: [/* 数据项 */],
        type: 'scatter', // 假设使用散点图类型
        markPoint: {
            symbol: 'circle',
            symbolSize: 20,
            data: [/* 标记点数据项 */],
            itemStyle: {
                normal: {
                    color: '#ff0000'
                }
            },
            // 标记点点击事件
            itemclick: function (event) {
                var point = event.data.dataIndex;
                // 根据点击的数据点索引，执行特定操作，例如弹出详情框
            }
        }
    }]
});

// 为图表容器绑定点击事件
chart.on('click', function (params) {
    // 判断点击的是图例项还是数据点
    // 执行相应的逻辑
});