React中如何在ECharts提示框（Tooltip）中直接渲染React组件？

结论先行：ECharts的Tooltip formatter无法直接返回React组件。原因是ECharts底层基于原生DOM渲染，只识别字符串、原生HTMLElement或HTML结构字符串，而React组件是虚拟DOM对象，ECharts无法直接解析渲染它。

下面提供两种可行的实现方式，帮你在Tooltip中嵌入React组件（比如react-router-dom的Link）：

方法一：用ReactDOM.render把组件转成原生DOM元素 #

通过ReactDOM.render将React组件渲染到临时DOM容器，再把容器返回给formatter。记得在Tooltip销毁时清理DOM，避免内存泄漏。

示例代码：

import { Link } from "react-router-dom";
import ReactDOM from 'react-dom/client';

const options = {
  tooltip: {
    trigger: "item",
    enterable: true,
    formatter: (params) => {
      const { value, name } = params as { value: number; name: string };
      // 创建临时DOM容器
      const tempDiv = document.createElement('div');
      // 把React组件渲染到容器里
      const root = ReactDOM.createRoot(tempDiv);
      root.render(<Link to="/">{name} - {value}</Link>);
      // 返回容器给ECharts渲染
      return tempDiv;
    },
    // 监听Tooltip隐藏事件，卸载React组件释放内存
    hide: () => {
      const tooltipElements = document.querySelectorAll('.echarts-tooltip');
      tooltipElements.forEach(el => {
        const tempDiv = el.querySelector('div');
        if (tempDiv) {
          ReactDOM.unmountComponentAtNode(tempDiv);
        }
      });
    }
  },
  // 其他ECharts配置（比如series、坐标轴等）
};

方法二：自定义Tooltip容器，手动挂载React组件 #

指定一个自定义DOM容器作为Tooltip的内容载体，然后监听ECharts的tooltipShow和tooltipHide事件，手动挂载/卸载React组件。

示例代码：

import { useEffect, useRef } from 'react';
import { Link } from "react-router-dom";
import * as echarts from 'echarts';
import ReactDOM from 'react-dom/client';

const EChartWithCustomTooltip = () => {
  const chartRef = useRef<HTMLDivElement>(null);
  const tooltipContainerRef = useRef<HTMLDivElement>(null);
  let chartInstance: echarts.ECharts | null = null;
  let tooltipRoot: ReactDOM.Root | null = null;

  useEffect(() => {
    if (!chartRef.current) return;
    chartInstance = echarts.init(chartRef.current);

    const options = {
      tooltip: {
        trigger: "item",
        enterable: true,
        // 指定自定义容器作为Tooltip内容
        content: tooltipContainerRef.current,
        // 关闭ECharts默认的内容渲染
        formatter: () => ''
      },
      series: [
        {
          type: 'pie',
          data: [
            { name: 'A', value: 10 },
            { name: 'B', value: 20 }
          ]
        }
      ]
    };

    chartInstance.setOption(options);

    // Tooltip显示时，挂载React组件
    chartInstance.on('tooltipShow', (params: any) => {
      if (!tooltipContainerRef.current) return;
      const { value, name } = params.data as { value: number; name: string };
      tooltipRoot = ReactDOM.createRoot(tooltipContainerRef.current);
      tooltipRoot.render(<Link to="/">{name}: {value}</Link>);
    });

    // Tooltip隐藏时，卸载React组件
    chartInstance.on('tooltipHide', () => {
      if (tooltipRoot) {
        tooltipRoot.unmount();
        tooltipRoot = null;
      }
    });

    // 组件卸载时清理资源
    return () => {
      chartInstance?.dispose();
      tooltipRoot?.unmount();
    };
  }, []);

  return (
    <div style={{ position: 'relative' }}>
      <div ref={chartRef} style={{ width: '100%', height: 400 }} />
      {/* 自定义Tooltip容器，初始隐藏 */}
      <div 
        ref={tooltipContainerRef} 
        style={{ 
          position: 'absolute', 
          display: 'none',
          background: 'white',
          border: '1px solid #ccc',
          padding: '8px',
          borderRadius: '4px',
          pointerEvents: 'auto'
        }} 
      />
    </div>
  );
};

export default EChartWithCustomTooltip;

注意事项 #

• 方法一要严格处理Tooltip隐藏时的组件卸载，不然会有内存泄漏风险；
• 方法二需要自己控制Tooltip的样式和位置（ECharts默认会帮你调整位置，但自定义容器可能需要微调）；
• 用函数式组件时，要注意ref和生命周期的配合，避免重复渲染导致的异常。

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