[Bug] Can't select data after change the legend label name

[mengxi-ream]

Version

1.12.6

Link to Minimal Reproduction

use the spec below

Steps to Reproduce

const data = [
  { city: 'City A', type: 'fruit', value: 14500 },
  { city: 'City A', type: 'rice', value: 8500 },
  { city: 'City A', type: 'specialty snacks', value: 10000 },
  { city: 'City A', type: 'tea', value: 7000 },
  { city: 'City B', type: 'fruit', value: 9000 },
  { city: 'City B', type: 'rice', value: 8500 },
  { city: 'City B', type: 'specialty snacks', value: 11000 },
  { city: 'City B', type: 'tea', value: 6000 },
  { city: 'City C', type: 'fruit', value: 16000 },
  { city: 'City C', type: 'rice', value: 5000 },
  { city: 'City C', type: 'specialty snacks', value: 6000 },
  { city: 'City C', type: 'tea', value: 10000 },
  { city: 'City D', type: 'fruit', value: 14000 },
  { city: 'City D', type: 'rice', value: 9000 },
  { city: 'City D', type: 'specialty snacks', value: 10000 },
  { city: 'City D', type: 'tea', value: 9000 },
  { city: 'City E', type: 'fruit', value: 14000 },
  { city: 'City E', type: 'rice', value: 9000 },
  { city: 'City E', type: 'specialty snacks', value: 10000 },
  { city: 'City E', type: 'tea', value: 6000 },
  { city: 'City F', type: 'fruit', value: 9000 },
  { city: 'City F', type: 'rice', value: 8500 },
  { city: 'City F', type: 'specialty snacks', value: 10000 },
  { city: 'City F', type: 'tea', value: 6000 },
  { city: 'City G', type: 'fruit', value: 17000 },
  { city: 'City G', type: 'rice', value: 6000 },
  { city: 'City G', type: 'specialty snacks', value: 7000 },
  { city: 'City G', type: 'tea', value: 10000 },
  { city: 'City H', type: 'fruit', value: 18000 },
  { city: 'City H', type: 'rice', value: 11000 },
  { city: 'City H', type: 'specialty snacks', value: 15000 },
  { city: 'City H', type: 'tea', value: 14000 }
];
const spec = {
  type: 'bar',
  data: [
    {
      id: 'bar',
      values: data
    }
  ],
  xField: ['city', 'type'],
  yField: 'value',
  seriesField: 'type',
  legends: {
    orient: 'right',
    position: 'start',
    item: {
      focus: true // enable focus
    },
    data: items => items.map((item) => {item.label=item.label.toUpperCase(); return item;}),
    defaultSelected: ['RICE'], // config default selected data
    allowAllCanceled: true, // allow all canceled
    padding: {
      top: 0,
      left: 20
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

I change the label by data: items => items.map((item) => {item.label=item.label.toUpperCase(); return item;}) (This is just an example, in other cases, I may change the label names in different logic)

Then the data of rice can't be selected.

Current Behavior

Expected Behavior

data for rice should be selected.

This behaviour might not be a BUG, but the design pattern issue, i.e. should we change the legend labels and select using the new labels? Or we may have the pattern like:

1. You can change the label of legends, this label is like alias of the label
2. We have the underline id for the label, selecting items in the legend is to select the item with that id, not the label (alias)
3. Because id won't change, so selecting items from legend will always work. This id can be the original label from data

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response