[Feature] Draw a line with the result of brushend event

[inlann]

What problem does this feature solve?

Hello:

Users can draw any tangent line in the graph based on adding a line graphic with the result of a "brush" event

The following is an example:

// TODO: Initial values should be 0
let xStart = 317;  // These values need to be updated while the brush ends
let xEnd = 576;
let yStart = 123;
let yEnd = 320;

option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: [
    {
      type: 'inside',
      filterMode: 'none'
    },
    {
      type: 'inside',
      orient: 'vertical',
      filterMode: 'none'
    }
  ],
  brush: {
    toolbox: ['rect', 'clear'],
    brushType: 'rect',
    transformable: false,
    removeOnClick: false
  },
  graphic: [{
    type: 'line',
    shape: {
        x1: xStart,
        y1: yStart,
        x2: xEnd,
        y2: yEnd
    },
    style: {
        lineWidth: 2,
        stroke: 'red'
    }
  }],
  series: [
    {
      data: [
        [1, 150],
        [2, 230],
        [3, 224],
        [4, 218],
        [5, 135],
        [6, 147],
        [7, 260]
      ],
      type: 'line',
      smooth: true,
    }
  ]
};

myChart.on('brushend', (param: any) => {
  console.log(param);
  xStart = param.areas[0].range[0][0]
  xEnd = param.areas[0].range[0][1]
  yStart = param.areas[0].range[1][0]
  yEnd = param.areas[0].range[1][1]
  console.log(xStart, xEnd, yStart, yEnd);
});

Expected results are as follows:

** But this example needs to be running in a React application since xStart, xEnd, yStart and yEnd need to be stored in states. **

What does the proposed API look like?

Maybe we could add a drawDiagonalLine to the options for brush like:

  brush: {
    toolbox: ['rect', 'clear'],
    brushType: 'rect',
    transformable: false,
    removeOnClick: false,
    drawDiagonalLine: true  // Default false.
  },

[helgasoft]

Here is how to just draw the diagonal of the brushed area.
Demo Code
Real tangent to the curve is more difficult to do. Please share if you pull it off.

[inlann]

@helgasoft Really helpful!! Thanks 😉

Is there any callback for the clear selections button so that the line drawed with the brush result could be cleared too?

[helgasoft]

yes: brushselected - Demo Code

[inlann]

@helgasoft Really thanks 😉

[inlann]

@helgasoft Hello

The brush function allows user to select outside the scope of the chart. In the Demo, if the chart is zoomed, the brush function appears to work fine, but when the chart is not zoomed (i.e. in its initial state), the brush function appears to select a range of data outside the current chart. This will cause the generated lines to be visually different from the box brush selected:

How can I avoid it?

[helgasoft]

use xAxis: { min:0, max:8 }

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!