echarts tooltip 渲染 react组件

如果要在ECharts的tooltip中渲染React组件，可以通过formatter参数自定义tooltip的显示内容。具体方法如下：

1. 在React组件中，定义一个方法来渲染tooltip的内容，并返回一个字符串模板，例如：

class MyTooltip extends React.Component {
  renderTooltip(params) {
    const { data } = params;
    const { name, value } = data;
    return `<div>
              <h3>${name}</h3>
              <p>Value: ${value}</p>
              <MyCustomReactComponent/>
            </div>`;
  }

  render() {
    return <ECharts option={option} onEvents={{'mousemove': this.onMouseMove}} />;
  }
}

其中，`MyCustomReactComponent`是你要在tooltip中渲染的React组件。

2. 在ECharts的option中，指定tooltip的formatter参数为一个回调函数。在该函数中，调用React组件的`renderTooltip`方法，将tooltip的参数传递给该方法。

const option = {
  tooltip: {
    trigger: 'item',
    formatter: (params) => {
      const { componentType } = params;
      if (componentType === 'series') {
        return this.renderTooltip(params);
      } else {
        return '';
      }
    },
  },
  ...
};

这里判断`componentType`是为了避免在坐标轴上也显示tooltip。

在这个例子中，`MyCustomReactComponent`会被渲染到tooltip中，并且可以使用React的所有功能。你可以自由地在tooltip中添加任何React组件或自定义的HTML元素。