使用自定义React）组件（在Echarts工具提示中带有钩子

Question

我目前正在使用echarts实现散点图。我想使用一个 i18n 函数，该函数使用 intl lib 中的 formatNumber。

问题是我不知道是否需要编写一个自定义函数来在图表之外显示此工具提示，或者是否有任何方法可以使用 echart 选项使其正常工作。

这是我的方法。它是使用自定义图块（无钩子）的测试功能。如果我只有这个就可以了。一旦我尝试使用 formatNumberWithUnit 来格式化数字，它使用来自react-intl的（使用来自intl的useIntl钩子）。

formatter: (params: Record<string, any>, ...other) => {
  return renderToString(
    <div>
      <TileWithHeading headerContent={"test"}>
        {formatNumberWithUnit(0.05, "kw")}
      </TileWithHeading>
    </div>
  );
},

它不起作用，我很清楚为什么。我只是不知道是否以及如何解决这个问题？

编辑： 这是格式化程序功能的文档 https://echarts.apache.org/en/option.html#tooltip.formatter

这可以解决这个问题，但如果可能的话我想避免这种情况。

formatter: (params: Record<string, any>, ...other) => {
        return renderToString(
          <div>
            <TileWithHeading headerContent={"test"}>
              <IntlProvider locale={"de"}>
                {formatNumberWithUnit(0.05, "kw")}
              </IntlProvider>
            </TileWithHeading>
          </div>
        );
      }

Answer 1

我认为这是一个可以接受的解决方案？它似乎工作正常，我不需要再次处理语言环境，...

  const intl = useIntl();

...some code ....
 formatter: (params: Record<string, any>, ...other) => {
        const formattedNumber = formatNumber1(0.05, "kw");
        return renderToString(
          <RawIntlProvider value={intl}>
            <div>
              <TileWithHeading headerContent={"test"}>
                {formattedNumber}
              </TileWithHeading>
            </div>
          </RawIntlProvider>
        );
      },