echarts [Feature] brushSelect + brushLink for large scale data scatter

ktecyv1j  于 5个月前  发布在  Echarts
关注(0)|答案(5)|浏览(50)

What problem does this feature solve?

My use case is as follows:

  • I have a large dataset that contains different metrics for some categorical data over time
  • for each metric (called y1-y4 in the examples) I need a scatter plot showing the metric on the y-axis and the time on the x-axis
  • each point should be colored according to its category
  • I want to use the brush tool to select data, even when largeTreshhold is exceeded

My Current Approaches:

Option 1:
Example

  • one series for each metric
  • use visualmap to color according to categories

Results:
+ brushLink all series and links work as expected (apart from this bug)
- category colors are not displayed with large data optimization, i.e. when largeThreshold is exceeded (because visualMap is disabled)
- as of version 5.4.3 brush is not working at all with large data optimization (as mentioned here )

Option 2:
Example

  • one filtered dataset for each category
  • one series for each dataset and metric
  • color each sereis according to its category

Results:
+ category colors are displayed with large data optimization
- its not possible to apply brushLink in a senseful way
- as of version 5.4.3 brush is not working at all with large data optimization (same as with option 1)

What does the proposed API look like?

Since the whole point of large data optimization is to disable individual item styling, I think visual maps wont work here. So lets consider option 2. There are multiple steps to achieve the described feature:

  1. implement a brush behaviour similar to the zoom which works with large data optimization, i.e. if largeThreshold is exceeded, dont highlight & rerender points within the selected region while drawing the select box (on every mousemove). Instead only do calculations & rerendering once on brushEnd
  2. it must be possible to brushLink in a more complex way

My suggestion for a more complex brushLink API would be to make it possible to link on dimensions of underlying datasets, i.e. link points of other series where the value of the specified dimension is equal. In the given use case a link over the time dimension would do the trick since all data items can be distinguished by their time value (which is a common use case I imagen). In case of the underlying x-axis as a linked dimension this would not impose performance constraints (since the lookup can be restricted to the visable points only and the data is already in use anyways).
Additionally, for specific usecases, it would be possible to create a new dimension for linking and have full control over the data items that should get linked.
Further, it would be nice to be able to define multiple links.
A possible API could look like this:

brush: {
    brushLink: [
        {
            seriesIndex: [seriesIndex] | 'all',
            dimension: dataset.dimension | 'index',
        },
        {
            ...
        }
    ]
}

defaulting to 'index' if no dimension is specified. The above use case (option 2) could be solved with that in the following ways:
1.

brush: {
    brushLink: [{
        seriesIndex: 'all',
        dimension: 'time',
    }]
}
  1. If this bug is fixed:
brush: {
    brushLink: [
        {
            seriesIndex: [0,1,2,3],
            dimension: 'index',
        },
        {
            seriesIndex: [4,5,6,7],
        },
        {
            seriesIndex: [8,9,10,11],
        },
        {
            seriesIndex: [12,13,14,15],
        },
    ]
}
mzaanser

mzaanser1#

This Issue is related if I understand correctly.
Is someone working on this?
If not, I would like to try and fix it myself but I am not very experienced and changes in echarts/lib to not take effect because its auto-generated code.
Can someone point me to where I can modify the code?
@Ovilia@pissang@100pah

koaltpgm

koaltpgm2#

Can someone plaese tell me how I can modify the auto-generated code in echarts/lib? @plainheart@Ovilia@pissang@100pah

2wnc66cl

2wnc66cl4#

This aktually helped, thank you. I tried modifying the code in node modules (which doesnt contain the src folder with the typescript files) in my project and the vite dev server I am using cached the node modules bundle such that edits in the code didnt apply.

Now I am using the echarts repo and building from typescript.

yhxst69z

yhxst69z5#

Hello,do u fixed this problem? I'm in trouble, too. Can u tell me what you modified?

相关问题