ECharts图例动态格式化优化求助：替代renderToString方案

方案1：直接复用react-intl的格式化函数（推荐） #

react-intl提供的useIntl Hook可以直接获取格式化方法，无需通过渲染组件再提取文本。在组件顶层调用useIntl拿到intl对象，用它的formatNumber等方法直接处理数据，生成ECharts图例需要的字符串即可。

示例代码：

import { useIntl } from 'react-intl';
import ReactECharts from 'echarts-for-react';

const MyChart = ({ data }) => {
  const intl = useIntl();

  // 生成格式化后的图例标签
  const legendData = data.map(item => 
    `${item.category}: ${intl.formatNumber(item.value, {
      // 填入项目中已有的数字格式化配置，如货币、百分比规则
      style: 'decimal',
      minimumFractionDigits: 2
    })}`
  );

  const option = {
    legend: {
      data: legendData
    },
    // 其他ECharts配置项...
  };

  return <ReactECharts option={option} />;
};

这个方案完全避开renderToString和DOM解析的弊端，直接复用react-intl核心能力，符合React Hook规则，代码简洁高效。

方案2：自定义图例渲染（复杂场景） #

如果图例需要复杂排版（如多样式文本、图标），可以利用ECharts的格式化特性或自定义DOM实现：

2.1 HTML富文本格式化 #

ECharts的legend.formatter支持返回HTML字符串，结合react-intl格式化结果拼接即可：

const MyChart = ({ data }) => {
  const intl = useIntl();

  const option = {
    legend: {
      formatter: (name) => {
        const item = data.find(d => d.category === name);
        const formattedValue = intl.formatNumber(item.value, { /* 格式化配置 */ });
        return `<span style="font-weight:bold">${name}</span>: <span style="color:#1890ff">${formattedValue}</span>`;
      },
      data: data.map(item => item.category)
    },
    // 其他ECharts配置...
  };

  return <ReactECharts option={option} />;
};

2.2 结合React Portal自定义图例DOM #

如果需要用React组件渲染带交互的图例，可以通过Portal将react-intl组件挂载到ECharts图例容器：

import { useIntl, FormattedNumber } from 'react-intl';
import ReactECharts from 'echarts-for-react';
import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const MyChart = ({ data }) => {
  const chartRef = useRef(null);
  const legendContainerRef = useRef(null);

  useEffect(() => {
    if (!chartRef.current) return;
    const chartInstance = chartRef.current.getEchartsInstance();
    const legendDom = chartInstance.getDom().querySelector('.echarts-legend');
    if (legendDom) legendContainerRef.current = legendDom;
  }, []);

  return (
    <div>
      <ReactECharts ref={chartRef} option={{
        legend: { show: false }, // 隐藏默认图例
        // 其他ECharts配置...
      }} />
      {/* 通过Portal挂载自定义图例组件 */}
      {legendContainerRef.current && (
        ReactDOM.createPortal(
          <div className="custom-legend">
            {data.map(item => (
              <div key={item.category} className="legend-item">
                <span className="legend-color" style={{ backgroundColor: item.color }}></span>
                <span>{item.category}: <FormattedNumber value={item.value} /* 格式化配置 */ /></span>
              </div>
            ))}
          </div>,
          legendContainerRef.current
        )
      )}
    </div>
  );
};

方案3：抽离格式化配置为纯函数 #

如果项目有统一的数字格式化规则，可抽离成纯函数，基于react-intl底层API实现：

// utils/formatters.js
import { createIntl, createIntlCache } from '@formatjs/intl';

const cache = createIntlCache();

export const formatNumber = (value, options, locale = 'zh-CN') => {
  const intl = createIntl({ locale }, cache);
  return intl.formatNumber(value, options);
};

// 组件中使用
import { formatNumber } from './utils/formatters';

const MyChart = ({ data }) => {
  const legendData = data.map(item => 
    `${item.category}: ${formatNumber(item.value, { /* 格式化配置 */ })}`
  );

  const option = {
    legend: { data: legendData },
    // 其他配置...
  };

  return <ReactECharts option={option} />;
};

这个方案适合在非React组件环境复用格式化逻辑，同时保证和react-intl配置一致。

内容的提问来源于stack exchange，提问作者Gavaii