ECharts 图例“复杂”React 组件

Question

我目前正在 ECHARTS 中处理图表，我需要根据 React 应用程序中的数据动态设置图例标签的格式。 我只能通过 renderToString 让它工作，但这是客户端代码😒。 RawIntlProvider 中使用的值是一个 React 组件，它由来自 React Intl 组成。

我需要使用这个值，它已经包含以正确方式格式化数字所需的所有元数据。 RenderedToString 返回 ->

<div><div class="">28.8<span class="formattedNumberUnit"> <!-- -->kWh</span></div></div> 

      formatter: (seriesName) => {
    const component = renderToString(
      <RawIntlProvider value={intl}>
        {
          data
            .map((row) => row?.[stateParams?.group?.key])
            .find((row) => row?.["sortValue"] == seriesName)?.["value"]
        }
      </RawIntlProvider>
    );
    const parser = new DOMParser();
    const formattedNumberHTML = parser.parseFromString(
      component,
      "text/html"
    );
    const element = formattedNumberHTML.querySelector("*");
    return element ? element.textContent.trim() : "";
  },
  orient: "horizontal",
  bottom: 0,
  left: "center",
},

关于如何改进这个丑陋的黑客有什么想法吗？

问题：Echarts Legend仅支持字符串，Intl hook（需要不破坏任何hook规则），....

Answer 1

React 文档有一节关于 从客户端代码中删除

renderToString

。

示例（未测试）：

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';


formatter: (seriesName) => {
  const div = document.createElement('div');
  const root = createRoot(div);

  const element = flushSync(() => {
    root.render(
      <RawIntlProvider value={intl}>
        {data
          .map((row) => row?.[stateParams?.group?.key])
          .find((row) => row?.["sortValue"] == seriesName)?.["value"]
        }
      </RawIntlProvider>
    );
  });

  return element.textContent.trim();
}

然而，这看起来有点矫枉过正。您只需要一个带有单位格式的数字。您并不真正关心 HTML 结构。我可能会直接在值上使用 Intl.NumberFormat() 构造函数，以获取使用单位格式化的数字，但是

kWh

不受支持。目前还不清楚 React Intl 如何格式化该单位，因为它在底层使用了 Intl.NumberFormat()

。可能有一个库支持这个单元，或者您可能编写一个特定的函数。