[Bug] 离散图例自定义 data 后，图例筛选失效

[kkxxkk2019]

Version

latest

Link to Minimal Reproduction

none

Steps to Reproduce

const list = [
    { status: 'A', label: '提交成功', color: '#a9a9a9' },
    { status: 'B', label: '正在执行', color: '#0097e0' },
    { status: 'C', label: '暂停', color: '#057c72' },
    { status: 'D', label: '失败', color: '#F13939' },
    { status: 'E', label: '成功', color: '#95DF96' },
    { status: 'F', label: '需要容错', color: '#FF8C00' }
  ];

  const data = [
    {
      start_time: 1681926000,
      end_time: 1681926000,
      type: 'TOP 1',
      status: 'A',
      id: 'a90292870-9282',
      useTime: '100ms'
    },
    {
      start_time: 1681926000,
      end_time: 1681959600,
      type: 'TOP 2',
      status: 'B',
      id: 'a90292870-9282',
      useTime: '100ms'
    },
    {
      start_time: 1681925400,
      end_time: 1681974000,
      type: 'TOP 3',
      status: 'C',
      id: 'a90292870-9282',
      useTime: '100ms'
    },
    {
      start_time: 1681924800,
      end_time: 1681933200,
      type: 'TOP 4',
      status: 'D',
      id: 'a90292870-9282',
      useTime: '100ms'
    },
    {
      start_time: 1681959600,
      end_time: 1681963200,
      type: 'TOP 5',
      status: 'E',
      id: 'a90292870-9282',
      useTime: '100ms'
    }
    // {
    //   start_time: 1681970400,
    //   end_time: 1681971000,
    //   type: 'TOP 5',
    //   status: 'F',
    //   id: 'a90292870-9282',
    //   useTime: '100ms'
    // },
    // {
    //   start_time: 1681992000,
    //   end_time: 1681992600,
    //   type: 'TOP 5',
    //   status: 'G',
    //   useTime: '100ms'
    // },
    // {
    //   start_time: 1681956000,
    //   end_time: 1681963200,
    //   type: 'TOP 6',
    //   status: 'H',
    //   id: 'a90292870-9282',
    //   useTime: '100ms'
    // },
    // {
    //   start_time: 1681990200,
    //   end_time: 1681993800,
    //   type: 'TOP 7',
    //   status: 'I',
    //   id: 'a90292870-9282',
    //   useTime: '100ms'
    // },
    // {
    //   start_time: 1681948800,
    //   end_time: 1681959600,
    //   type: 'TOP 8',
    //   status: 'J',
    //   id: 'a90292870-9282',
    //   useTime: '100ms'
    // },
    // {
    //   start_time: 1681945200,
    //   end_time: 1681956000,
    //   type: 'TOP 9',
    //   status: 'K',
    //   id: 'a90292870-9282',
    //   useTime: '100ms'
    // }
  ];

  const spec = {
    type: 'rangeColumn',
    direction: 'horizontal',
    yField: 'type',
    minField: 'start_time',
    maxField: 'end_time',
    seriesField: 'status',
    dataZoom: [
      {
        orient: 'bottom',
        height: 20,
        start: 0,
        end: 1,
        filterMode: 'axis',
        brushSelect: false,
        startText: {
          formatMethod: text => Math.floor(text)
        },
        endText: {
          formatMethod: text => Math.floor(text)
        }
      }
    ],
    axes: [
      { orient: 'left', type: 'band', bandPadding: 0.5, visible: true },
      {
        type: 'time',
        orient: 'bottom',
        min: 1681926000,
        max: 1681963200 + 28800,
        layers: [
          {
            tickStep: 28800,
            timeFormat: '%Y%m%d %H:%M'
          }
        ]
      }
    ],
    bar: {
      style: {
        fill: datum => {
          const target = list.filter(item => item.status === datum.status);
          return target[0].color;
        }
      }
    },
    barMinHeight: 10,
    legends: {
      visible: true,
      data: items => {
        return list.map(item => {
          return {
            id: item.status,
            label: item.status,
            shape: {
              fill: item.color,
              symbolType: 'rect'
            }
          };
        });
      },
      item: {
        label: {
          formatMethod: text => {
            const target = list.filter(item => item.status === text);
            return target[0].label ?? text;
          }
        }
      }
    },
    title: {
      textStyle: {
        character: [
          {
            text: 'Time-Consuming Distribution',
            fontWeight: 400,
            fill: '#222'
          },
          {
            text: 'Show the SQL distribution of TOP 100',
            fontWeight: 200,
            fontSize: 10,
            fill: '#555'
          }
        ]
      }
    },
    tooltip: {
      visible: true,
      dimension: {
        visible: false
      },
      mark: {
        title: {
          key: 'Query ID',
          value: datum => 'Query ID: ' + datum['id']
        },
        content: [
          {
            key: 'Time Consuming',
            value: datum => datum['useTime']
          },
          {
            key: 'start time',
            value: datum => datum['start_time']
          },
          {
            key: 'end time',
            value: datum => datum['end_time']
          }
        ]
      }
    },
    data: [
      {
        id: 'data0',
        values: data.reverse()
      }
    ]
  };

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

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

Current Behavior

图例无法筛选

Expected Behavior

图例可正常筛选

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response