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

• 实现逻辑:

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

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

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

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

•  angular代码:

       

    myChart.setOption(option,true);
            if(flag==){
                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:},pointInPixel);
                           var xIndex=pointInGrid[]; 
                           x_start= Math.round(option.series[].data[xIndex*][]);
                         console.log("进入鼠标点击",xIndex);
                         console.log("进入鼠标点击",option.series[].data[xIndex*][]);

                         }
                    });
                    myChart.getZr().on('mouseup',function(params){
                         const pointInPixel= [params.offsetX, params.offsetY];
                             if (myChart.containPixel('grid',pointInPixel)) {
                             var pointInGrid=myChart.convertFromPixel({seriesIndex:},pointInPixel);
                           var xIndex=pointInGrid[]; 
                           if(parseInt(x_start)<parseInt( Math.round(option.series[].data[xIndex*][]))){
                               $scope.depth_start = x_start;
                                $scope.depth_end =  Math.round(option.series[].data[xIndex*][]);
                           }else{
                               $scope.depth_end= x_start;
                                $scope.depth_start  =  Math.round(option.series[].data[xIndex*][]);
                           }
                             var a={
                                     'depth_start':    $scope.depth_start,
                                     'depth_end':$scope.depth_end
                             };
                           $scope.depth_data.push(a)
                           $scope.index+=;
                           if($scope.depth_data.length==){
                               $scope.depth_data_Judge=;
                           }else{
                               $scope.depth_data_Judge=;
                           }
                            $scope.createChart();

                         }
                    });
            }
              });