echarts中的legend事件被外层的div事件遮挡，怎么解决

如果您使用 ECharts 绘制的图表，同时在图表外层包裹了一个 div，可能会遇到图例（legend）的点击事件被外层 div 的事件遮挡的问题。这是因为 ECharts 的图例是绘制在 canvas 上的，而 canvas 是一个独立的 HTML 元素，其内部的事件处理与外层的 div 不同。

解决该问题的方法是，可以在外层 div 上添加一个鼠标事件，并通过判断事件的 target 是否为图例元素来决定是否处理该事件。示例代码如下：

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);

// 绑定图例的点击事件
myChart.on('legendselectchanged', function(params) {
  console.log(params);
});

// 绑定外层 div 的鼠标事件
var divDom = document.getElementById('div');
divDom.addEventListener('click', function(event) {
  if (event.target.tagName === 'SPAN' && event.target.className.indexOf('ec-legend-item') >= 0) {
    // 如果点击的是图例元素，则处理该事件
    event.stopPropagation();
    myChart.dispatchAction({
      type: 'legendToggleSelect',
      name: event.target.innerText
    });
  }
});

在上述代码中，我们先通过 `myChart.on` 方法绑定了图例的点击事件，并在外层 div 上添加了一个事件监听器。当点击 div 时，我们可以通过 `event.target` 属性获取到实际被点击的元素，如果该元素是一个图例元素，则处理该事件，并通过 `myChart.dispatchAction` 方法来触发图例的展示或隐藏。同时，我们在处理事件时调用了 `event.stopPropagation` 方法来阻止事件冒泡到外层 div，从而避免了被遮挡的问题。