// 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的显示与隐藏。
// 思路大概就是这样，下面就是代码部分的实现。因为此页面只是用来当做demo，所以只提供伪代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | import * as echarts from "echarts";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 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> { 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> { 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 id="tooltipId"> {echartsParams[0].name} { echartsParams.map((item, i) => { return ( <div> <div> <span></span> <span>{item.seriesName}</span> </div> <div>{item.value}</div> > </div> ) }) } { const v = e.target.value; echartsData.annotation = v; setEchartsData({ ...echartsData }) }} ><p> save(echartsParams[0].name, echartsData.id)} className="save-btn">保存</p> </div> ) : '' } <div id="enterprise-ratio" style="{{"></div> // echarts折线图 </div> </div>） |
到此这篇关于react echarts tooltip 区域新加一个输入框，可以编辑保存数据的文章就介绍到这了,更多相关react echarts tooltip内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
