Stack Exchange
Echarts filter data based on brush selected
I have a dataset that I'm passing as props to two charts:
function App() {
  return (
    <div>
      <BarPlot data={data} />
      <ScatterPlot data={data} />
    </div>
  );
}

In the BarPlot component I have this:
function BarPlot({ data }) {
  const onBrushSelected = params => {
    const selected = params.batch[0].selected;
    console.log(selected[0].dataIndex);
  };

  const option = {
    dataset: {
      source: data,
    },

    xAxis: {},
    yAxis: { type: 'category' },
    series: [
      {
        type: 'bar',
        encode: {
          x: 'amount',
          y: 'product',
        },
      },
    ],
    toolbox: {
      show: true,
    },
    brush: {
      toolbox: ['rect', 'clear'],
      throttleType: 'debounce',
      throttleDelay: 300,
    },
  };

  const onEvents = {
    brushselected: onBrushSelected,
  };

  return (
    <ReactEChartsCore echarts={echarts} option={option} onEvents={onEvents} />
  );
}

How do I filter the data passed to both chart components based on brush selection in one of the charts?
I'm only able to console.log the selection here:
  const onBrushSelected = params => {
    const selected = params.batch[0].selected;
    console.log(selected[0].dataIndex);
  };


lift up the selection logic to the common parent component, and exposing the event from the child to connect them, then pass the selected data as the props to both of the childs would be fine

Thanks! Could you please elaborate on exposing the event from the child?

checkout the react doc about it here, and the beta version for functional component
