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)<parseInt( Math.round(option.series[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