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的时机,因为只有formatterecharts调用后才会被渲染,所以我们将react的渲染时机放在了下一个宏任务中,这样就能确保可以获取到root元素。

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

  1. 比如设置tooltip位置,不能用position回调,因为这里用了setTimeout来渲染节点,所以在position回调里面无法获取到渲染后的dom宽高, 当然可以提前写死。
    我的解决方法是用css定位
    比如这样
  transform: translate(-55%, -170%);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容