如何获取基本面积图中当前强调/突出显示的系列？

Question

我有一个基本的堆积面积图（设置了面积样式的折线图），当用户将鼠标放在系列区域之一上时，需要显示一个工具提示来识别该系列。这是一个基本需求，没什么花哨的，但我发现在 ECharts 中几乎不可能做到。

我已经得出结论，只有“轴”工具提示才有效，因为“项目”（数据点）仅存在于系列绘制区域的顶部边缘，而不是在该区域本身内，因此不会触发。但是“轴”工具提示没有任何明显的方法来知道鼠标悬停在哪个系列上。

我尝试过的：

考虑到悬停时我可以看到 ECharts 通过颜色偏移突出显示整个系列区域，ECharts 必须有“当前突出显示的系列”的概念。所以我尝试过：

1. 监听“突出显示”事件并设置轴工具提示可以引用的变量。但是，当在系列之间来回移动鼠标时，“突出显示”事件不会可靠/一致地触发。

2. 我尝试探索 Chart.getModel().getSeries() 对象树，但无法在模型中找到如何识别哪个系列处于活动状态的任何位置。

3. 我还探索了设置chart.getZr().on('mousemove')来获取鼠标offsetX/Y并使用chart.convertFromPixel计算鼠标下插值的x/y数据值然后行走的可能性通过我的源数据（包括堆叠逻辑）来重建在这些 x/y 值下应该可见的系列。但对于这样一个简单的任务来说，这似乎工作量太大了。

当然有某种方法可以找出给定 x/y 索引下可见的系列区域，或者更好的是，简单地了解当前突出显示的系列？？

**更新：我设法找到了一个非常hacky的解决方法，但肯定有更好的方法。我是这样做的：

// whenever the mouse moves over the chart, update our tooltip info
 chartObj.getZr().on('mousemove', e => {

   // set a small delay before continuing to ensure that series highlight/emphasis-state has already taken effect within Echarts. A single tick is not enough.
   let zrTimeout = setTimeout(() => {

     // get the polyline/polygon drawing element from the ZRender component which is servicing a series and is in emphasis/highlight state
     const seriesPolyShape = chartObj.getZr().storage._displayList.find(d => d.currentStates[0] === "emphasis" && d.parent?.parent?.__ecComponentInfo?.mainType === "series")

     // get the series index
     highlightedSeriesIndex = seriesPolyShape?.parent?.parent?.__ecComponentInfo?.index

   },20)
 })

Answer 1

Echarts 有很多事件https://echarts.apache.org/en/api.html#events.highlight

Instance.on('highlight', {seriesIndex: 1}, (e) => {
  // Do something ...
})

教程：https://echarts.apache.org/en/tutorial.html#Events%20and%20Actions%20in%20ECharts

您还可以查看我的个人资料中的链接集合（不是广告）。

Answer 2

Echarts 5.2.2 引入了triggerLineEvent，可以在线上启用

mouseover

和

mouseout

事件，无论突出显示的节点如何。

const myChart = echarts.init(document.getElementById('main'));

const option = {
  xAxis: {
    data: ["Category1", "Category2", "Category3", "Category4", "Category5", "Category6"]
  },
  yAxis: {},
  series: [{
    name: 'Series1',
    type: 'line',
    data: [5, 20, 36, 10, 10, 20],
    emphasize: {
      focus: 'series'
    },
    triggerLineEvent: true
  }, {
    name: 'Series2',
    type: 'line',
    data: [15, 120, 136, 110, 110, 120],
    emphasize: {
      focus: 'series'
    },
    triggerLineEvent: true
  }]
};

myChart.setOption(option);

myChart.on('mouseover', 'series', event => {
  document.getElementById("highlighted").innerHTML = event.seriesName;
});

myChart.on('mouseout', 'series', event => {
  document.getElementById("highlighted").innerHTML = 'None';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>

<h3>Highlighted:</h3>
<span id="highlighted">None</span>
<div id="main" style="width: 600px;height:400px;"></div>