react echarts tooltip 区域新加输入框编辑保存数据功能

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 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>
）