container包含3个dom:X轴Div、Y轴Div、element的表格
根据表格的@cell-click事件,获取点击的单元格cell
通过cell.getBoundingClientRect()获取单元格宽width,高height及位置top、left
将单元格宽度width及位置偏移量(单元格left - Y轴left)赋值给Y轴
将单元格高度height及位置偏移量(单元格top - X轴top)赋值给X轴
考虑到表格滚动情况
<template>
<div id="container" style="position: relative; z-index: 1; overflow: hidden;">
<div id="xAxis"></div>
<div id="yAxis"></div>
<el-table
class="elTable"
ref="elTable"
:data="tableData"
border
:height="450"
@cell-click="cellClick"
cell-class-name="cell-custom"
>
<el-table-column prop="time" label="时间" width="90">
<template slot-scope=&#