More powerful data filter by legend / visualMap

[100pah]

Consider these scenarios:

ScenarioA: series filter

In some monitoring systems, we offen see that there are so many line-series in one chart that the legend items are too many to be checked. That might be resolved some other data visualization design. But in lots of cases it is not practical. And the component "visualMap" can do this but it can only interfere the "visual" of graphic elements rather than "remove" some of them to re-layout or change the extent of the axes, which is necessary to dig into the data in some case.

So it will be good if "multiple legends" can take responsibility on filtering series or data.
For scenarioB, check this example for example: https://gallery.echartsjs.com/editor.html?c=xeSoAEHBI&v=1
But the usage in the example is too complicated, containing code on event listening and dummy series. It is necessary to simplify it.

The ideal solution for ScenarioA migth be:

// ExampleA: use multiple legend to fitler series.
option = {
    dataset: {
        source: [
            // x        ySer0, ySer1, ySer2, ySer3, ySer4, ySer5, ySer6
            ['2015-02', 12.3,   32,   44,    31,    12,    91,    32],
            ['2015-03', 33.1,   55,   77,    34,    35,    92,    14],
            ['2015-04', 39.3,   31,   34,    31,    61,    97,    56],
            ['2015-05', 44.1,   31,   43,    38,    15,    95,    12],
            ['2015-06', 12.4,   14,   22,    31,    15,    91,    52]
        ]
    },
    legend: [
        {data: ['X_a', 'X_b', 'yu09']},
        {data: ['tagA', 'tagB']},
        {data: ['Z1', 'Z4']}
    ],
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
        // The series will be filtered if and only if none of the names in
        // `legendNames` exists in the any of the selected legend items.
        {type: 'bar', legendNames: ['Z1', 'yu09']},
        {type: 'bar', legendNames: ['Z4', 'tagB', 'yu09']},
        {type: 'bar', legendNames: ['Z1', 'tagB', 'X_a']},
        {type: 'bar', legendNames: ['Z1', 'tagA', 'X_b']},
        {type: 'bar', legendNames: ['Z4', 'tagA', 'X_a']},
        {type: 'bar', legendNames: ['Z4', 'X_b']}
    ]
}

ScenarioB: custom series data filter

Suppose we are making a bar or custom series, where each "dataItem" is mapped to a graphic element. If there are so many data items that users need to filter them with user interaction.

Consider this example: https://echarts.apache.org/examples/en/editor.html?c=custom-gantt-flight
If we need to use legend to filter flights. Each legend item represents a criterion. Those criteria might not only be enumerable tags but probably also be some calculable condition like filter the flights earlier than 8:00.

The ideal solution for ScenarioB migth be:

{
    legend: {
        // By default, only the names in legend data existing in series names nad data
        // names will be displayed as a legend graphic item. That makes hard to customize
        // the behaviors of legend, where we have to make dummy series as a workaround.
        // So I propose to add this new option to force to display all of the names in
        // legend data as legend graphic items.
        alwaysAll: true,
        // This items might not be relevant with each other in there business meanings.
        data: ['Daytime', 'Nighttime', 'VIP', 'XX']
    },
    series: {
        type: 'custom',
        renderItem: function (api, params) {
            var departureTime = api.value(0);
            // Add a new API method to get a map to check the legend selection status.
            var selected = api.getLegendSelected();
            // Similiarly, we probably can ge piecewise visualMap seleteion.
            if (selected['Daytime']) {
                if (departureTime < 8 || departureTime > 19) {
                    return;
                }
                // ...
            }
            // ...
        },
        data: [ ... ]
    }
}

ScenarioC: filter series data with legend or visualMap

Suppose we have this data:

[
    ['Switzerland', 'Male', 12.3, 32, 44, 31, 12, 91, 32],
    ['Switzerland', 'Female', 33.1, 55, 77, 34, 35, 92, 14],
    ['Switzerland', 'Male', 63.1, 15, 47, 14, 55, 81, 52],
    ['Austria', 'Female', 39.3, 31, 34, 31, 61, 97, 56],
    ['Austria', 'Female', 94.1, 31, 43, 38, 15, 95, 12],
    ['Austria', 'Male', 41.4, 62, 11, 78, 35, 81, 13],
    ['Liechtenstein', 'Female', 15.4, 14, 22, 31, 15, 91, 52],
    ['Liechtenstein', 'Male', 11.4, 24, 32, 11, 16, 41, 12]
]

And we need to make a scatter chart, "Female" are mapped to green circles and "Male" are mapped to red circles. And "Female" and "Male" should be able to filtered and trigger subsequent change of axis extent.

We can achieve it by make users to split data to two series:

option = {
    legend: {},
    series: [{
        name: 'Male',
        data: [
            ['Switzerland', 'Male', 12.3, 32, 44, 31, 12, 91, 32],
            ['Switzerland', 'Male', 63.1, 15, 47, 14, 55, 81, 52],
            ['Austria', 'Male', 41.4, 62, 11, 78, 35, 81, 13],
            ['Liechtenstein', 'Male', 11.4, 24, 32, 11, 16, 41, 12]
        ]
    }, {
        name: 'Female',
        data: [
            ['Switzerland', 'Female', 33.1, 55, 77, 34, 35, 92, 14],
            ['Austria', 'Female', 39.3, 31, 34, 31, 61, 97, 56],
            ['Austria', 'Female', 94.1, 31, 43, 38, 15, 95, 12],
            ['Liechtenstein', 'Female', 15.4, 14, 22, 31, 15, 91, 52]
        ]
    }]
}

But it requires a extra workload of data process. Moreover, if we need to make some another filters on country, it is not easy to implement.

Probably the better way is we still use the original data, and make "multiple legend components" enable to filter data. Or we can also make "multiple visualMap components" enable to filter data, that can set customized color visual meanwhile. To achieve this goal, we need to define the two mechanism:

(1) Retrieve the enumrable data values from the given dimension.
(2) Make a customizable List::filterSlef.

option = {
    dataset: {
        source: [
            ['Switzerland', 'Male', 12.3, 32, 44, 31, 12, 91, 32],
            ['Switzerland', 'Female', 33.1, 55, 77, 34, 35, 92, 14],
            ['Switzerland', 'Male', 63.1, 15, 47, 14, 55, 81, 52],
            ['Austria', 'Female', 39.3, 31, 34, 31, 61, 97, 56],
            ['Austria', 'Female', 94.1, 31, 43, 38, 15, 95, 12],
            ['Austria', 'Male', 41.4, 62, 11, 78, 35, 81, 13],
            ['Liechtenstein', 'Female', 15.4, 14, 22, 31, 15, 91, 52],
            ['Liechtenstein', 'Male', 11.4, 24, 32, 11, 16, 41, 12]
        ]
    },
    legend: [{
        // Contry filter
        // Auto retrieve names from dimension 0 of each series data.
        // And filter data on dimension 0 for each series data.
        dimension: 0
    }, {
        // Sex filter
        dimension: 1
    }],
    series: [{
        encode: {
            // Add a new syntactic sugar: enable to assign data colors
            // by enumerable values in dimension 1. The color will be
            // retrieved from pallette, see `dataColor.js`.
            color: 1,
            x: 2,
            y: 3,
            tooltip: [0, 1]
        }
    }]
};

Legend selector (All, Reverse) defect

Another relevant issues needed to be resolved:
should only control one legend component, but not all legend components.
Check the example: https://gallery.echartsjs.com/editor.html?c=xeSoAEHBI&v=1

[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!