美文网首页
echarts 折线图 点击事件扩大范围

echarts 折线图 点击事件扩大范围

作者: 张宪宇 | 来源:发表于2021-07-16 22:50 被阅读0次

1.

/初始化过程/
this.echarts.getZr().on('click',function (params) {
var pointInPixel= [params.offsetX, params.offsetY];
if (that.echarts.containPixel('grid',pointInPixel)) {

                    /*此处添加具体执行代码*/
                    var pointInGrid=that.echarts.convertFromPixel({seriesIndex:0},pointInPixel);
                    //X轴序号
                    var xIndex=pointInGrid[0];
        
                    //获取当前图表的option
                    var op=that.echarts.getOption();
        
                    //获得图表中我们想要的数据
                    var monthData=op.xAxis[0].data[xIndex];
                    //if(that.OnlyPie){
                      //  that.datas.map((i)=>{
                        //if(i.date == monthData){
                          //  that.$emit("platformData",i)
                        //}
                    //})
                }
          }
});
 //将可以响应点击事件的范围内,鼠标样式设为pointer--------------------

2. that.echarts.getZr().on('mousemove',function (params) {

                var pointInPixel= [params.offsetX, params.offsetY];
                if (that.echarts.containPixel('grid',pointInPixel)) {
                    that.echarts.getZr().setCursorStyle('pointer');
                };
    });

3. that.echarts.on('mouseout', function (params) {

                var pointInPixel= [params.offsetX, params.offsetY];
                if (!that.echarts.containPixel('grid',pointInPixel)) {
                    that.echarts.getZr().setCursorStyle('default');
                };
     });

相关文章

网友评论

      本文标题:echarts 折线图 点击事件扩大范围

      本文链接:https://www.haomeiwen.com/subject/mldipltx.html