angular 实现 echarts 拖动区域进行放大 方法

• 实现逻辑:

  1.通过鼠标摁下事件  和弹出事件  获取x轴的index  之后去x轴的list中去获取两个坐标点 

  2.之后将这两个数据作为参数  传到后台更新数据

  3.记录下来这两个坐标点 放到list中  在前台提供向前一步和向后一步的按钮  实现回退功能

  4.需要注意的是:需要在myChart初始话之后再添加事件还有就是避免重复添加事件  只在mychart第一次初始化的时候才给他添加鼠标点击事件  否则会导致加载很多个事件

•  angular代码:

    myChart.setOption(option,true);if(flag==0){flag++;console.log("点击事件加载")var x_start;myChart.getZr().on('mousedown',function(params){const pointInPixel= [params.offsetX, params.offsetY];if (myChart.containPixel('grid',pointInPixel)) {var pointInGrid=myChart.convertFromPixel({seriesIndex:0},pointInPixel);var xIndex=pointInGrid[0]; x_start= Math.round(option.series[0].data[xIndex*2][0]);console.log("进入鼠标点击",xIndex);console.log("进入鼠标点击",option.series[0].data[xIndex*2][0]);}});myChart.getZr().on('mouseup',function(params){const pointInPixel= [params.offsetX, params.offsetY];if (myChart.containPixel('grid',pointInPixel)) {var pointInGrid=myChart.convertFromPixel({seriesIndex:0},pointInPixel);var xIndex=pointInGrid[0]; if(parseInt(x_start)0].data[xIndex*2][0]))){$scope.depth_start = x_start;$scope.depth_end =  Math.round(option.series[0].data[xIndex*2][0]);}else{$scope.depth_end= x_start;$scope.depth_start  =  Math.round(option.series[0].data[xIndex*2][0]);  }var a={'depth_start':    $scope.depth_start,'depth_end':$scope.depth_end};                           $scope.depth_data.push(a)$scope.index+=1;if($scope.depth_data.length==2){$scope.depth_data_Judge=1;  }else{$scope.depth_data_Judge=1; }$scope.createChart();}});}});

转载于:https://www.cnblogs.com/Mr-yl/p/10571624.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！