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

  • 本文关键字:系列 显示 面积图 echarts
  • 更新时间 :
  • 英文 :


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

我已经得出结论,只有"轴"工具提示才能工作,因为"项目"(数据点(只存在于系列绘制区域的顶部边缘,而不在区域本身内,因此不会触发。但是"axis"工具提示并没有任何明显的方法来知道哪个系列被悬停在上面。

我尝试过的:

假设在悬停时我可以看到ECharts用颜色偏移突出显示整个系列区域;当前突出显示的系列";。所以我尝试过:

  1. 侦听"highlight"事件并设置轴工具提示可以引用的变量。但是,当在系列之间来回移动鼠标时,"高亮显示"事件不会可靠/一致地触发。

  2. 我试着探索chart.getModel((.getSeries((对象树,但在模型中找不到如何识别哪个系列是活动的。

  3. 我还探索了将chart.getZr((.on('musemove'(设置为鼠标偏移x/Y的可能性,并使用chart.overtFromPixel计算鼠标下的插值x/Y数据值,然后遍历我的源数据,包括堆栈逻辑,以重建在这些x/Y值下应该可见的序列。但对于这么简单的任务来说,这似乎工作量太大了。

当然有一些方法可以找出在给定的x/y索引下哪个序列区域是可见的,或者更好的方法是,简单地说,当前突出显示的是哪个序列??

**更新:我设法找到了一个非常棘手的解决方法,但肯定有更好的方法。我是这样做的:

// 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)
})

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

你也可以看看我的个人资料中的链接集合(不是广告(。

最新更新