点击echrtas折线图，el-table锚点，动态滚动到对应行数据

   <div id="chartDom" style="width: 100%; height: calc(100% - 0px)"></div>


mounted(){
// 初始化
  this.chartDom = this.$echarts.init(document.getElementById("chartDom"));
}
    // 此处忽略配置项的代码
     waterChartOption:{
       xxxxxxxxxxxxxxxxxxx
    }
     
          // 已获取服务数据  
         xxxxxxxxxxxxxxxxxxxxxxx
       this.chartDom.setOption(this.waterChartOption);
        let chartZR = this.chartDom.getZr();
        chartZR.on("click", (params) => {
          let pointInPixel = [params.offsetX, params.offsetY];
          if (this.chartDom.containPixel("grid", pointInPixel)) {
           //  获取数据项的索引
            let xIndex = this.chartDom.convertFromPixel({ seriesIndex: 0 }, [
              params.offsetX,
              params.offsetY,
            ])[0];

            let vm = this.$refs["tableBottom"].$el;
            vm.querySelectorAll(".el-table__body tr")[xIndex].scrollIntoView();
            //scrollIntoView()函数的作用：方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。
            //setCurrentRow（）作用：用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
            this.$refs.tableBottom.setCurrentRow(this.bottomTableData[index]);
          }

点击左侧 右侧数据对应跳转，适用于数据源一致的场景，根据索引来匹配