在折线图中捕获单击事件(ngx-echarts)

Question

我在我的项目中使用echarts Angular版本- ngx-echarts。我想捕捉在折线图上完成的点击事件。chartClick或ngx-echarts库的任何鼠标事件都不适用于折线图，但它们适用于barGraphs。如何使用ngx-echarts在折线图中捕获点击事件

<div echarts [options]="chartOption" 
    (chartClick)="onChartEvent($event, 'chartClick')">
</div>

onChartEvent(event: any, type: string) {
    console.log('chart event:', type, event);
}

即使执行了单击，逻辑实体也不会进入onChartEvent功能

Answer 1

你可以用这种方法做。在构建选项时，在序列中填充对象：

series: [
                { // your bar
                    type: 'bar',
                    barWidth: '30%',
                    data: myData
                },
                { // shadow bar
                    type: 'bar',
                    barWidth: '30%',
                    itemStyle: {
                        // transparent bar
                        normal: { color: 'rgba(0, 0, 0, 0)' }
                    },
                    barGap: '-100%',
                    data: myDataShadow,
                    animation: false
                }
]

其中myDataShow是myData的副本。

我建议您将最大值放在myDataShadow的所有位置，以使所有栏都可单击。

Answer 2

在折线图中，只有当您单击线的点时，'chartClick‘事件才会触发。

Answer 3

请继续添加符号，您可以单击该点，事件将被触发。例如，替换none上的triangle，如下所示：

private mySeries = {
   type: 'line',
   name: 'prod',
   data: myData, 
   symbol: 'triangle',
   itemStyle: {
      color: '#35b53a'
   }
};