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

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

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

捕获线形图中的点击事件（ngx-echarts）

3 个答案: