使用ngx-echarts从平行坐标图表中获取选定值

Question

我在让事件在我的图表上起作用时遇到了问题。我需要获取平行坐标图表的 selected 区域的值。我尝试使用 chartDataRangeSelected 但是当我 select 一些数据时它什么都不做。

这是我的代码：

<div echarts [options]="chartOption" class="demo-chart" (chartInit)="onChartInit($event)" (chartDataRangeSelected)="onChartSelect($event)"></div>

图表配置：

chartOption: EChartOption = {
    title: {
        text: 'Demo Parallel Coordinates',
        subtext: 'data from macrofocus',
        left: 'center',
        top: 5,
        itemGap: 0,
        textStyle: {
            color: '#000000'
        },
        z: 200
    },
    parallelAxis: this.makeParallelAxis(this.schema),
    grid: [{
        show: true,
        left: 0,
        right: 0,
        top: '0',
        bottom: 0,
        borderColor: 'transparent',
        backgroundColor: 'white',
        z: 99
    }],
    parallel: {
        top: '10%',
        left: 100,
        right: 100,
        bottom: 100,
        axisExpandable: true,
        axisExpandCenter: 15,
        axisExpandCount: 10,
        axisExpandWidth: 60,
        axisExpandTriggerOn: 'mousemove',

        z: 100,
        parallelAxisDefault: {
            type: 'value',
            nameLocation: 'start',
            nameRotate: 25,
            // nameLocation: 'end',
            nameTextStyle: {
                fontSize: 12
            },
            nameTruncate: {
                maxWidth: 170
            },
            nameGap: 20,
            splitNumber: 3,
            tooltip: {
                show: true
            },
            axisLine: {
                // show: false,
                lineStyle: {
                    width: 1,
                    color: '#000000'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            z: 100
        }
    },
    series: [
        {
            name: 'parallel',
            type: 'parallel',
            smooth: true,
            lineStyle: {
                color: '#577ceb',
                width: 0.5,
                opacity: 0.6
            },
            z: 100,
            data: this.rawData
        }
    ]
};

函数：

onChartSelect(e){
    console.log(e);
  }

我这样做是否使用了正确的事件？非常感谢您的帮助。

谢谢

Answer 1

根据 eCharts 文档，

the selectDataRange Event emitted after range is changed in visualMap. https://www.echartsjs.com/en/api.html#events.datarangeselected,

这是映射到ngx-echarts的chartDataRangeSelected

而且你可以看到，这是一个与visualMap相关的事件。你的图表根本没有可视化地图，所以我猜事件不会被触发。

您可以试试 chartAxisAreaSelected，因为这与您的图表更相关。

使用ngx-echarts从平行坐标图表中获取选定值

Getting selected value from parallel coordinates chart using ngx-echarts

echarts

ngx-charts