捕捉折线图中的点击事件(ngx-echarts)

Question

我项目中使用的是echarts Angular版本-ngx-echarts。我想捕捉在折线图上完成的点击事件。 chartClick 或 ngx-echarts 库的任何鼠标事件不适用于折线图，但它们适用于条形图。如何使用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

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

Answer 2

你可以通过这种方式完成。当你构建你的选项时，在系列对象中填充：

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 3

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

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

捕捉折线图中的点击事件(ngx-echarts)

Catching click event in line graph(ngx-echarts)

echarts