关于ECharts折线图非节点的点击事件

lyning 发布于2019-08-23 18:15 / 2273人阅读

摘要：这种方法仅响应图表区域的响应事件，通过获取到可能需要的一些信息，可以很好的实现需求，并且不会有其它的性能影响，完美实现了如题的需求。

ECharts官网教程

详情请看官网教程

前言：相信很多人有这种需求，在点击折线图非节点的时候不能触发点击事件，而官网又没有这方面的教程，只能自己默默的研究了

解决方案如下:

     // 基于准备好的dom，初始化echarts实例
    var mychart = echarts.init(document.getElementById("main"));
     // 指定图表的配置项和数据
     var option = {
            title: {
                text: "ECharts 入门示例"
            },
            tooltip: {},
            legend: {
                data:["销量"]
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

    // 使用刚指定的配置项和数据显示图表。
    mychart.setOption(option);
    //绑定点击事件
    mychart.getZr().on("click", function(params) {
        const pointInPixel = [params.offsetX, params.offsetY];
        if (mychart.containPixel("grid", pointInPixel)) {
          let xIndex = mychart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY
          ])[0];
          /*事件处理代码书写位置*/
         
        }
      });

实现的代码解释如下：

使用getZr添加图表的整个canvas区域的点击事件，并获取params携带的信息：

mychart.getZr().on("click",params=>{})

获取到鼠标点击位置：

const pointInPixel= [params.offsetX, params.offsetY];

使用containPixel API判断点击位置是否在显示图形区域，下面的例子过滤了绘制图形的网格外的点击事件，比如X、Y轴lable、空白位置等的点击事件。

if (this.echart.containPixel("grid",pointInPixel)){}

使用API convertFromPixel获取点击位置对应的x轴数据的索引值，我的实现是借助于索引值的，当然可以获取到其它的信息，详细请查看文档。

let xIndex=this.echart.convertFromPixel({seriesIndex:0},[params.offsetX,
params.offsetY])[0];

其实在上一步骤中可以获取到丰富的诸如轴线、索引、ID等信息，可以在自己的事件处理代码中方便的使用。

这种方法仅响应图表区域的响应事件，通过convertFromPixel获取到可能需要的一些信息，可以很好的实现需求，并且不会有其它的性能影响，完美实现了如题的需求。

GPU云服务器云服务器折线图绘制折线图 jfreechart折线图 jsp 折线图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104907.html

关于ECharts折线图非节点的点击事件

摘要：这种方法仅响应图表区域的响应事件，通过获取到可能需要的一些信息，可以很好的实现需求，并且不会有其它的性能影响，完美实现了如题的需求。 ECharts官网教程详情请看官网教程前言：相信很多人有这种需求，在点击折线图非节点的时候不能触发点击事件，而官网又没有这方面的教程，只能自己默默的研究了解决方案如下: // 基于准备好的dom，初始化echarts实例 var ...

_ipo 2019-08-02 15:22 评论0 收藏0
关于ECharts折线图非节点的点击事件

摘要：这种方法仅响应图表区域的响应事件，通过获取到可能需要的一些信息，可以很好的实现需求，并且不会有其它的性能影响，完美实现了如题的需求。 ECharts官网教程详情请看官网教程前言：相信很多人有这种需求，在点击折线图非节点的时候不能触发点击事件，而官网又没有这方面的教程，只能自己默默的研究了解决方案如下: // 基于准备好的dom，初始化echarts实例 var ...

Steve_Wang_ 2019-08-30 11:14 评论0 收藏0
echarts3的折线图怎么分段显示不同的颜色

摘要：原来的格式修改为现在的格式篇幅所限，我这里没有详细列出来详细请访问我的的折线图怎么分段显示不同的颜色再次刷新，是不是两条断线连上了呢。一.场景在使用echarts3做图表的时候，可能会遇到一些特殊的需求：星期一到星期四这几个点的折线显示一个颜色，周五到周日这几个点的折线显示另外一个颜色，来起到强调区别的作用。二.效果图先看一下效果图，你会有一个更清晰的认识: showImg(...

J4ck_Chan 2019-08-21 10:52 评论0 收藏0
echarts3的折线图怎么分段显示不同的颜色

摘要：原来的格式修改为现在的格式篇幅所限，我这里没有详细列出来详细请访问我的的折线图怎么分段显示不同的颜色再次刷新，是不是两条断线连上了呢。一.场景在使用echarts3做图表的时候，可能会遇到一些特殊的需求：星期一到星期四这几个点的折线显示一个颜色，周五到周日这几个点的折线显示另外一个颜色，来起到强调区别的作用。二.效果图先看一下效果图，你会有一个更清晰的认识: showImg(...

mumumu 2019-06-27 13:50 评论0 收藏0