React+AntD+AntV 前端实例 鼠标移动事件 触发显示 浮动DIV图层展现一个趋势图

最近在做性能平台的前端，PRD有个需求：当鼠标移到table中某列的数据上，要显示该数据近期一段时间内的趋势图，鼠标移开，趋势图浮动层消失，最终实现效果如图（图中数据是mock数据）：

1.table，趋势图组件是用的Ant Design和Ant V画的，首先画一个趋势图：

import createG2 from 'g2-react';
import { Stat } from 'g2';
import React,{ Component } from "react";

class TrendGraph extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data,forceFit: false,width: 500,height: 250,plotCfg:{
                margin: [25,50,40,50],border: {
                    fill: '#FFE4E1',fillOpacity: 0.7,},background: {
                    fill: '#FFE4E1',fillOpacity: 0.4,}
            }
        };
    }

    render() {
        const Chart = createG2(chart => {
            chart.col('startDate',{
                alias: ' ',type: 'time',mask: 'mm-dd'
            });
            chart.col('totalError',{
                alias: ' '
            });
            chart.line().position('startDate*totalError').color('#1E90FF').size(2).shape('smooth');
            chart.area().position('startDate*totalError').color('#87CEFF').shape('smooth');
            chart.render();
        });

        return (
            <div>{!!this.state.data ? <Chart
                data={this.state.data}
                width={this.state.width}
                height={this.state.height}
                forceFit={this.state.forceFit}
                plotCfg={this.state.plotCfg}
                /> : null}</div>
        );
    }
}

export default TrendGraph;

然后放到我的页面中

 <div id="TrendGraphDiv" style={{ display: "none" }}> <TrendGraph data={this.state.trendata} /> </div>

其次就是在div中设置鼠标事件,比如：

{
                title: "总错误数(占比)",key: 'totalError',render: (text,record,index) => {
                    let errorcolor = "";
                    if (record.errorPctColor == 0) {
                        errorcolor = "#000000";
                    } else if (record.errorPctColor == 1) {
                        errorcolor = "#CD9B1D";
                    } else {
                        errorcolor = "#EE0000";
                    }
                    return <div id="1" onMouseOut={() => { this.hideTrendGraph() }} onMouseOver={(e) => { this.showTrendGraph(e.currentTarget,e.clientX,e.clientY) }} style={{ color: errorcolor }}>{record.totalError}({record.errorPct}%)</div>
                }
            },

然后完成事件代码，这里需要注意，我们鼠标移到任意Table上，还需要获取相关信息用于请求趋势图数据与绘制图形，注意上面代码里的传参：

showTrendGraph(value,x,y) {
        let id = value.id;
        let sysName = value.parentElement.parentElement.getElementsByTagName("td")[1].innerText;
        let testName = value.parentElement.parentElement.getElementsByTagName("td")[2].innerText;
        let applicationEnv = value.parentElement.parentElement.getElementsByTagName("td")[3].innerText;
        httpRequest(
            HOST_IP + "api-perf-rest/load-summary/attention" + "?flag=7" + "&systemName=" + sysName + "&testName=" + testName + "&testEnv=" + applicationEnv + "&chart=" + id,{
                method: 'POST',credentials: 'include',headers: {
                    "content-type": 'application/json',(response) => {
                this.setState({ trendata: !!response.value ? response.value : [] });
            })

        var tg = window.document.getElementById("TrendGraphDiv");
        if (tg == null) return;
        tg.style.display = "block";
        tg.style.position = "absolute";
        tg.style.zIndex = 99;
        tg.style.left = x - 200 + "px";
        tg.style.top = y +80 + "px";
    }

    hideTrendGraph() {
        var tg = window.document.getElementById("TrendGraphDiv");
        if (tg == null) return;
        tg.style.display = "none";
    }

好了，完成，前端大神们如果有知道更好的table参数获取方法，请留言指教！