如何解决在组合图中，上层面积图遮挡下层点图的问题？

问题标题
如何解决在组合图中，上层面积图遮挡下层点图的问题？
问题描述
我在使用VChart创建了一个组合图，其中包含两个子图，子图类型都是面积图。因为第二个子图绘制在第一个子图的上面，所以它的区域会遮挡住第一个子图的数据点，使得第一个子图的数据点无法触发hover和click事件。我想问一问，有没有什么方法可以解决这个问题？
图表的配置如下：

const spec = {
"data": [...],
"series": [
{
"id": "area",
"type": "area",
"xField": "time",
"yField": "value",
"seriesField": "groupName",
...
},
{
"id": "compare",
"type": "area",
"name": "compare",
"xField": "time",
"yField": "compareValue",
"seriesField": "groupName",
...
"interactive": {
"line": false,
"area": false
}
}
]
}

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();

解决方案：
这个问题可以通过设置第二个面积图series的line.interactive和area.interactive属性为false来解决。配置如下:

{
"data": [...],
"series": [
{
"id": "area",
"type": "area",
"xField": "time",
"yField": "value",
"seriesField": "groupName",
...
},
{
"id": "compare",
"type": "area",
"name": "compare",
"xField": "time",
"yField": "compareValue",
"seriesField": "groupName",
...
"line":{
"interactive":false
},
"area":{
"interactive":false
},
}
]
}

这样，第二个面积子图就不会响应交互事件，用户的hover和click事件可以透过第二个面积子图触发第一个面积子图的数据点。

结果展示
使用上述配置，进行图表渲染，你会发现，第二个子图的线和面积图都不会再响应鼠标操作，这样就可以成功触发第一个子图的hover和click了。
在线效果参考：codesandbox.io/s/common-ch…
相关文档
相关api：www.visactor.io/vchart/api/…
github：github.com/VisActor/VC…