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%);
