echarts tooltip中使用react

  tooltip: {
  //......
    formatter: function (params: any) {
      setTimeout(() => {
        const root = document.getElementById('tool-tip')
        if(root) {
          ReactDOM.render(
            <div>{ params.data.name } : { params.data.value } </div>,
            root
          )
        }
      }, 0)
      return '<div id="tool-tip"></div>'
    }
  },
// ...

原理很简单，就是调用ReactDOM.render去渲染jsx，这里稍微要注意下获取root的时机，因为只有formatter被echarts调用后才会被渲染，所以我们将react的渲染时机放在了下一个宏任务中，这样就能确保可以获取到root元素。

这个方法并不能保证react或者echarts的所有特性都能实现：

1. 比如设置tooltip位置，不能用position回调，因为这里用了setTimeout来渲染节点，所以在position回调里面无法获取到渲染后的dom宽高， 当然可以提前写死。
   我的解决方法是用css定位
   比如这样

  transform: translate(-55%, -170%);