// demo页面import * as echarts from "echarts";
// 需求：产品要求在折线图的tooltip上新加一个输入框，可以编辑这个输入框保存备注信息，需要两种交互方式： 1.鼠标滑过展示备注信息。2.鼠标点击某一个日期时，鼠标可以滑到tooltip上做保存/编辑操作。
// 思路：1.保留初始鼠标滑过echarts图效果。
// 2.主要难点是点击时tooltip固定可编辑，有尝试通过动态改变echarts自带tooltip的显示隐藏，但是效果并不好，并且因为react是虚拟dom, 所以在react中没办法使用on监听事件，使用ReactEcharts也只是必须要点击某一个symbol圆点才可以出发点击事件，最后放弃使用自有api的想法
// 3.最终方案：用一个div包裹echarts, 然后在echarts的同级新建一个div用来用来模拟真实tooltip，通过鼠标移入移出事件控制真实tooltip的显示与隐藏。
// 思路大概就是这样，下面就是代码部分的实现。因为此页面只是用来当做demo，所以只提供伪代码
const [echartsParams, setEchartsParams] = useState([]); // tooltip formatter的params数据 const [echartsData, setEchartsData] = useState({}); // 编辑或保存时输入框的数据 const [chart, setChart] = useState(); // 记录当前echarts, 鼠标移入移出时控制tooltip显示隐藏 const [chartAllData, setChartAllData] = useState(); // echaers数据源 const save = (date, id) => { const value = echartsData.annotation; const url = id === null ？ axios('/save', { method: 'post', data: { date, annotation: value } }) : axios('/update', { method: 'post', data: { date, annotation: value, id, } }) } window.save = save; // 必须挂载在window上 // echarts。 data: 数据源 const initCharts = (data) => { setChartAllData（data） let option = { tooltip: { className: 'chartsTooltip', trigger: "axis", enterable: true, appendToBody: true, axisPointer: { type: "line", label: { backgroundColor: "#6a7985", }, }, formatter: (params) => { setEchartsParams(params); let str = ''; const annotation = data.filter((v) => v.time === params[0].name)[0].annotation || { annotation: '', id: null }; params.forEach((item) => { str += '<div class="box">' + `<div>${item.marker + item.seriesName}</div>` + `<div>${item.value}</div>` + '</div>'; })
return `<div class="test" id="tooltipDom"> ${params[0].name} <br /> ${str} <textarea class="ipt" id="inputId">${annotation.annotation}</textarea> <p onclick='save("${params[0].name}", "${annotation.id}")' class="save-btn">保存</p> </div>` }, }, } let Chart = echarts.getInstanceByDom( document.getElementById("enterprise-ratio") ); //有的话就获取已有echarts实例的DOM节点。 if (Chart) { // 如果不存在，就进行初始化。 Chart.clear(); } else { Chart = echarts.init(document.getElementById("enterprise-ratio")); } Chart.setOption(option); setChart(Chart); } return（ <div // 最外层的盒子 onMouseLeave={() => { chart.dispatchAction({ type: 'showTip', }) chart.setOption({ tooltip: { show: true, }, }) const chartsTooltip = document.getElementsByClassName('chartsTooltip')[0]; if (chartsTooltip) { chartsTooltip.style.display = 'none'; } const tooltipId = document.getElementById('tooltipId') if (tooltipId) { tooltipId.style.display = 'none'; } > <div>这是这个区域的标题</div> <div className="echarts-content" onClick={() => { chart.dispatchAction({ type: 'hideTip', }) chart.setOption({ tooltip: { show: false, }, }) const annotationData = chartAllData.filter((v) => v.time === echartsParams[0].name)[0].annotation || { annotation: '', id: null }; // annotation: '后端接口返回的数据', id: '编辑时需要的id, 根据id是否未null判断是要保存还是编辑' setEchartsData(annotationData) const tooltipId = document.getElementById('tooltipId') if (tooltipId) { tooltipId.style.display = 'block'; } }} > { echartsParams.length ? ( <div className="tooltip-box" id="tooltipId"> {echartsParams[0].name} { echartsParams.map((item, i) => { return ( <div className="box" key={i}> <> <div> <span dangerouslySetInnerHTML={{ __html: item.marker }}></span> <span>{item.seriesName}</span> </div> <div>{item.value}</div> </> </div> ) }) } <Input.TextArea value={echartsData.annotation} className="ipt" onChange={(e) => { const v = e.target.value; echartsData.annotation = v; setEchartsData({ ...echartsData }) }} ></Input.TextArea> <p onClick={() => save(echartsParams[0].name, echartsData.id)} className="save-btn">保存</p> </div> ) : '' } <div className="flex-1" id="enterprise-ratio" style={{ height: '200px', width: '100%' }}></div> // echarts折线图 </div> </div> ）
标签：const,tooltip,annotation,react,输入框,id,tooltipId,echarts From： https://www.cnblogs.com/lou-0820/p/17390455.html