React Echarts ToolTip新增输入框，如何编辑并保存数据？

本文共计1042个文字，预计阅读时间需要5分钟。

plaintext// demo页面// 需求：产品要求在折线图的tooltip上新增一个输入框，可以编辑这个输入框保存备注信息，需要两种交互方式：

1.鼠标滑过显示备注信息

2.鼠标点击某一天时间，鼠标可点击输入框

// demo页面
// 需求：产品要求在折线图的tooltip上新加一个输入框，可以编辑这个输入框保存备注信息，需要两种交互方式： 1.鼠标滑过展示备注信息。2.鼠标点击某一个日期时，鼠标可以滑到tooltip上做保存/编辑操作。
// 思路：1.保留初始鼠标滑过echarts图效果。
// 2.主要难点是点击时tooltip固定可编辑，有尝试通过动态改变echarts自带tooltip的显示隐藏，但是效果并不好，并且因为react是虚拟dom, 所以在react中没办法使用on监听事件，使用ReactEcharts也只是必须要点击某一个symbol圆点才可以出发点击事件，最后放弃使用自有api的想法
// 3.最终方案：用一个div包裹echarts, 然后在echarts的同级新建一个div用来用来模拟真实tooltip，通过鼠标移入移出事件控制真实tooltip的显示与隐藏。
// 思路大概就是这样，下面就是代码部分的实现。