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的所有特性都能实现：
- 比如设置
tooltip位置，不能用position回调，因为这里用了setTimeout来渲染节点，所以在position回调里面无法获取到渲染后的dom宽高， 当然可以提前写死。
我的解决方法是用css定位
比如这样
transform: translate(-55%, -170%);
