How to use the @antv/component/lib/legend.HtmlCategory function in @antv/component

}

      item.checked = _.isNil(item.checked) ? true : item.checked;
    });
    const posArray = position.split('-');
    const maxLength = posArray[0] === 'right' || posArray[0] === 'left' ? panelRange.height : this.viewRange.width;
    const legendCfg = _.deepMix({}, viewTheme.legend[posArray[0]], legendOptions, fieldOption, {
      maxLength,
      viewTheme,
      items,
      container,
      canvas,
    });
    const useHtml = !!legendCfg.useHtml;

    const legend = useHtml ? new HtmlCategory(legendCfg) : new CanvasCategory(legendCfg);

    legend.on('itemclick', (ev: EventType) => {
      if (legendOptions.onClick) {
        // 用户自定义图例点击事件
        legendOptions.onClick(ev);
      }
    });
    this.bindHoverEvent(legend); // 用户自定义 hover 图例项的事件交互
    return legend;
  }

container: this.container.addGroup({ name: 'legend' }),
      });
    }

    const legendCfg = _.deepMix({}, defaultLegendCfg, legendOptions, fieldOption, {
      maxLength,
      canvas,
      items,
      position,
    });
    if (legendCfg.showTitle) {
      _.mix(legendCfg, {
        title: scale.alias || scale.field,
      });
    }
    const legend = useHtml ? new HtmlCategory(legendCfg) : new CanvasCategory(legendCfg);

    this.bindClickEvent(legend, scale, filteredValues, legendCfg.onClick);
    return legend;
  }