我有一个基本的堆叠面积图(设置了areaStyle的折线图(,当用户将鼠标放在其中一个系列区域上时,需要显示一个工具提示来识别该系列。这是一种基本的需求,没有什么特别的,但我发现在ECharts几乎不可能做到。
我已经得出结论,只有"轴"工具提示才能工作,因为"项目"(数据点(只存在于系列绘制区域的顶部边缘,而不在区域本身内,因此不会触发。但是"axis"工具提示并没有任何明显的方法来知道哪个系列被悬停在上面。
我尝试过的:
假设在悬停时我可以看到ECharts用颜色偏移突出显示整个系列区域;当前突出显示的系列";。所以我尝试过:
-
侦听"highlight"事件并设置轴工具提示可以引用的变量。但是,当在系列之间来回移动鼠标时,"高亮显示"事件不会可靠/一致地触发。
-
我试着探索chart.getModel((.getSeries((对象树,但在模型中找不到如何识别哪个系列是活动的。
-
我还探索了将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
你也可以看看我的个人资料中的链接集合(不是广告(。