echarts 点击方法总结，点任意一点获取点击数据，举例说明:在多图联动中点击绘制标线

关于点击（包括左击，双击，右击等）echarts图形任意一点，获取相关的图形数据，尤其是多图，我想部分人遇到这个问题一直很头大。下面我用举例说明，如何在多图联动基础上，我们点击任意一个图上任意一点，在点击处绘制一条标注线。
多图联动的用法，我就不详细解释，不明白或者感兴趣的同学可以看我上一篇：http://www.cnblogs.com/mobeisanghai/p/7683158.html ，虽然最近很忙，很久没更新，但是基本清晰。
关于引入样式和js,以及初始元素如下:

    <script src="js/colpick/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/echarts.js"></script>
 <style type="text/css">
        .main{margin:0 auto;width: 100%;
         overflow-y: auto; position: relative;border:1px #000 solid; }
        #mainf{height: 30px;background: #70787b;  }
        #come{ height: 20px;margin-left:50px;width: 80px;background: red;  }
        .startmian{height: 100%;width: 100%;position: relative;}
    </style>
   <div id="come"  style="width: 200px">数据进入 </div>
       <div id="startmian" class="startmian"></div>

其次 初始化的方法和 假数据如下：

 var a=[{"F_X":["2017-3-1","2017-3-15","2017-4-1","2017-4-12","2017-5-21","2017-6-5","2017-8-12","2017-9-1","2017-10-11"],"F_Y":[{"name":"TT","type":"line","symbol":"emptycircle","data":["23","56","32","41","32","45","39","47","58"]},{"name":"KK","type":"line","symbol":"emptycircle","data":["233","345","322","251","342","350","233","279","228"]}],"F_Z":"温度"},{"F_X":["2017-3-1","2017-3-15","2017-4-1","2017-4-12","2017-5-21","2017-6-5","2017-8-12","2017-9-1","2017-10-11"],"F_Y":[{"name":"TT","type":"line","symbol":"emptycircle","data":["34","45","32","25","57","45","39","47","58"]},{"name":"KK","type":"line","symbol":"emptycircle","data":["345","345","322","251","373","350","290","279","228"]}],"F_Z":"水压"},{"F_X":["2017-3-1","2017-3-15","2017-4-1","2017-4-12","2017-5-21","2017-6-5","2017-8-12","2017-9-1","2017-10-11"],"F_Y":[{"name":"TT","type":"line","symbol":"emptycircle","data":["23","56","32","25","57","45","39","47","58"]},{"name":"KK","type":"line","symbol":"emptycircle","data":["33","45","32","51","73","50","90","79","48"]}],"F_Z":"气压"}];

        var dataGoz=[], //总数据
         mdataeahars=[]; //echarts集合 ，用于联动使用
        require.config({
            paths: {
                echarts: ‘js/echarts-2.2.7/src‘
            }
        });
(function(){
        $.each(a,function(i,t){   //添加标线样式，这里是绘制多条标线
            $.each(t.F_Y,function(m,n){
                n.markLine={itemStyle:{
                    normal:{lineStyle:{type:‘solid‘,color:‘#000‘},label:{show:true,position:‘left‘}}
                    },large:true,silent:false,data:[]}
        });})
        dataGoz=a; //得到赋值
    startmiandiv();   //开始制图
    }
)();
//开始方法
function startmiandiv(){
    mdataeahars=[];
    $("#come").click(function(){  //点击数据进入
        $("#come").hide();
        nstart(dataGoz);  //开始入口
        });
}

上面是给数据“数据进入"元素一个点击事件，用于后面绘图;下面展示绘图方法：

//核心绘图方法
function  nstart(dataGoz){
    var  mainheight=0,
    bodyheight=document.body.clientHeight,  //获取总高度
    mainheight=(bodyheight-40),      //分配高度
    startmiandiv=$(‘#startmian‘);
    startmiandiv.empty();
    var maindiv=‘<div  class="main"  style="height:‘+mainheight+‘px;max-height:‘+mainheight+‘px"></div>‘;
    startmiandiv.append(maindiv);
    mainFn(dataGoz,mdataeahars);
    linkFn(dataGoz,dataGoz.length);  //联动方法
}
//charts画图入口方法
function  mainFn(data,mdataeahars){
    var jing_class=‘jing‘,
    sv="", //动态生成名称
    main0=$(".main")[0];
       $.each(data,function(i,t){
        var  div1=‘<div class="‘+jing_class+‘" style="height:150px;width:100%;"></div>‘;
                $(main0).append(div1);
                sv=jing_class+i;
                youjin(i,t,sv,mdataeahars,data.length,jing_class);
        });
}
//油井封装数据
function youjin(item,t,tempmyech,mdataeahars,alength,jin_cid){
    var  legendshow=false; //只让第一个lengend显示
    if(item==0){
        legendshow=true;
    }
    require(
            [
                ‘echarts‘,
                ‘echarts/chart/bar‘, // 使用柱状图就加载bar模块，按需加载
                ‘echarts/chart/line‘
            ],
  function (ec){
   tempmyech = ec.init($("."+jin_cid)[item]);  // 基于准备好的dom，初始化echarts实例
    $($("."+jin_cid)[item]).contextmenu(
       function(e){
            e.preventDefault();
            chartcontextmenu()
       }
    );
      $($("."+jin_cid)[item]).bind("dblclick.a", chartDbck);  //双击方法，防止事件冲突
            var sj=[]; //名称集合
            var f_y=t.F_Y;
            var colors=[
                     ‘#ff7f50‘,‘#87cefa‘,‘#da70d6‘,‘#32cd32‘,‘#6495ed‘,
                     ‘#ff69b4‘,‘#ba55d3‘,‘#cd5c5c‘,‘#ffa500‘,‘#40e0d0‘,
                     ‘#1e90ff‘,‘#ff6347‘,‘#7b68ee‘,‘#00fa9a‘,‘#ffd700‘,
                     ‘#6699FF‘,‘#ff6666‘,‘#3cb371‘,‘#b8860b‘,‘#30e0e0‘
                    ];
            for(var i=0;i<f_y.length;i++){
                sj.push(f_y[i].name);
               // forstr+= "<br/><font color="+colors[i]+">&nbsp;●&nbsp;</font>{a"+i+"} : {c"+i+"}"
            }
            var option = {
                    tooltip: {
                        trigger: ‘axis‘, //坐标轴触发提示框，多用于柱状、折线图中
                        formatter:  function (param){
                         var forstr=""+param[0].name;
                         for(var i=0, h=param.length;i<h;i++){
                        forstr+= "<br/><font color="+colors[i]+">&nbsp;●&nbsp;</font>"+param[i].seriesName+" : "+param[i].value+""
                                    }
                          Fmtresult(param[0].name,);  //通过它传递值
                        return   forstr;
                  },
                        axisPointer: {
                            type: ‘cross‘
                        },
                    },
                    grid: {
                        y:25,
                        left: ‘3%‘,
                        right: ‘4%‘,
                        height:"64%",
                        containLabel: true
                    },
                    dataZoom : {
                        y:130,
                        show : false,    //
                        realtime: true,
                        height:15,
                        start : 0,
                        end : 100
                    },
            toolbox: {    //工具栏显示
                        show: true,
                         x:900,
                        feature: {
                            dataZoom : {
                                show : true,  //legendshow
                                title : {
                                    dataZoom : ‘区域缩放‘,
                                    dataZoomReset : ‘区域缩放后退‘
                                }
                            },
                             restore : {
                                show : true,
                                title : ‘还原‘
                            },
                        }
                    },
                    xAxis: {
                        type: ‘category‘,
                        position:‘bottom‘,
                        boundaryGap : true,
                        axisTick: {onGap:false},
                        splitLine: {show:false},
                        data: t.F_X ,     //填入X轴数据
                    },
                    color:colors,
                    legend: {    //图表上方的类别显示
                        show:legendshow,
                        data:sj
                    },
                    series: f_y,
                    yAxis : [
                        {
                             type : ‘value‘,
                             name : t.F_Z
                         }
                    ]
                };
      var ecConfig = require(‘echarts/config‘)
                tempmyech.showLoading();    //数据加载完之前先显示一段简单的loading动画
                tempmyech.hideLoading();    //隐藏加载动画
                tempmyech.resize();
                tempmyech.setOption(option);    //载入图表
                tempmyech.on(ecConfig.EVENT.CLICK, eConsole);   //网上经典方法
                tempmyech.on(‘click‘,  conck);  //精简版方法
                mdataeahars.push(tempmyech);
          }
    )}

我想有眼睛亮的同学已经看到某些微妙的点了，例如 右键阻止和绑定方法，以及双击绑定方法，因为浏览自身有右键属性，所以这里先禁用，后添加。

   tempmyech = ec.init($("."+jin_cid)[item]);  // 基于准备好的dom，初始化echarts实例
    $($("."+jin_cid)[item]).contextmenu(
       function(e){
            e.preventDefault();
            chartcontextmenu()
       }
    );
      $($("."+jin_cid)[item]).bind("dblclick.a", chartDbck);  //双击方法，防止事件冲突

　　之后我们继续把联动的相关方法补进来：

 //生成静态控制图形
function  mainFactory(mdataeahars){
     require(
        [  ‘echarts‘,
                ‘echarts/chart/bar‘,// 使用柱状图就加载bar模块，按需加载
                ],
     function(ec){
        var fmian=‘<div id="mainf"></div>‘
        $("#startmian").append(fmian);
        var sf=document.getElementById(‘mainf‘);
            var main0_ec=ec.init(sf);
             main0_ec.setTheme("macarons");
            var  option={
                    grid: {
                        y:300,
                        left: ‘3%‘,
                        right: ‘4%‘,
                        height:"0%",
                        containLabel: true
                    },
                    dataZoom : {
                        y:2,
                        show : true,
                        height:20,
                        start : 0,
                        end : 100,
                        backgroundColor:"#fff",  //背景色
                        dataBackground :"#5285b3",   //数据阴影的样式
                        fillerColor :"#5285b3",   //选中范围的填充颜色。
                    },
                    xAxis : [
                        {
                            type : ‘category‘, //x轴为类目类型
                            data : [‘‘,‘‘]

                    }],
                    yAxis : [
                        {
                            type : ‘value‘  //y轴为值类型
                        }
                    ],
                    series : [{
                        name:‘ctroller‘,
                        type:‘line‘,
                        data:[‘‘,‘‘]
                    }]
            };
                main0_ec.setOption(option);    //载入图表
                mdataeahars.push(main0_ec);
     })
    }
 //所有图表集合
function linkFn(adata,adatalength){
    var time2= setInterval(function(){
        if(mdataeahars.length==adatalength){
        clearInterval(time2) ;
        mainFactory(mdataeahars);
        var  sokf; // 接临时删除的数据
          $.each(mdataeahars,function(i,t){
            if(mdataeahars.length==adatalength+1){
                sokf=mdataeahars[0];
                var  em=arydlt(mdataeahars[0],mdataeahars);
                 mdataeahars.push(sokf);
                linkage(mdataeahars[mdataeahars.length-1],em);
            }
          });
         }
    },500)
}
//联动数组
 function  linkage(mit ,em){
    mit.connect(em);
 }
 //去除元素
 function  arydlt(item,arr){
    var dtemparr=arr||[];
         dtemparr.remove(item);
      return  dtemparr;
 }
Array.prototype.remove= function(val) {
 for(var i=0; i<this.length; i++) {
      if(this[i] == val) {
          this.splice(i, 1);
          break;
        }
  }
}

你们会发现，怎么多了一个静态的echart图形，不要急，这是在多图联动基础上把 滚动条功能独立出来，用grid定位和压缩方式，让这个静态图变成一个滚动条控制所有图，部分人或许能用到这样的方式；给大家看看效果怎么吧。

好了，估计一部分人已经有点不耐烦了，叫嚣着”给本大人拿出点干货来“；哈哈，不罗嗦，我们继续下面的点击事件为核心进行讲解；

首先我们先看看网上常用，两种经典点击事件案例说到一下：

//常用单击曲线方法
  //方法一
   function conck (param) {
      console.log(param);
      var  dataxtime=  param.name;
      alert(dataxtime);
    }
     //方法二
 function eConsole (param) {
      console.log(param);
      var  dataxtime=  param.name;
      alert(dataxtime);
}

上面这两种，方法一是精简版的：只需要在上面使用tempmyech.on(‘click‘,  conck);  //精简版方法。给一个回调就可以了。用法很简洁，我就称其精简版方法吧。第二种需要

  var ecConfig = require(‘echarts/config‘);
   tempmyech.on(ecConfig.EVENT.CLICK, eConsole);   //网上经典方法

这样申明回调才可以使用，这是最常见的2种，二者性质一样，但是有一个缺点：都是需要点击折线图的亮点（其他图如柱状图，堆叠等不影响），所谓有亮点，就有隐藏点（亮点之间的点），因折线图大量数据时，上面两种方法就很无语了，因为获取不到隐藏点的数据；需要不断放大才能变成亮点来获取。而右键点击在3.0以下版本是没有的，我的版本2.2.7，所以我在在上面那么搞，当然我也有改过echarts源码，给其添加一个右键方法，效果和上面一样，不太好用。所以我才有下面方案去解决这个问题

ar fmtresult="",//随时接收format数据中x轴来源
      dataxtimeArr=[];//标线的data数组
  //formatter 回掉函数
  function Fmtresult(fmtres){
      fmtresult=fmtres;
  }
  //双击echart地图
  function  chartDbck(){
    var dataxtime=fmtresult;
        if(dataxtimeArr.length==0|(dataxtimeArr.length!=0 &&!checkformat(dataxtime))){
            dataxtimeArr.push([
          {name: "标线"+dataxtime+‘起点‘, xAxis: dataxtime,y: 35},
          {name: "标线"+dataxtime+‘终点‘,xAxis: dataxtime, y: 450}
          ]);
       }
    $.each(dataGoz,function(i,t){
         $.each(t.F_Y,function(m,n){
            n.markLine.data=dataxtimeArr;
         });
    })
    nstart(dataGoz);
  }
  //检测并删除已有标线
function checkformat(dataxtime){
  var  fls=false;
  for (var i = dataxtimeArr.length - 1; i >= 0; i--) {  //删除已有的标线
       if(dataxtimeArr[i][0].xAxis==dataxtime){
        dataxtimeArr.splice(i,1);
        fls=true;
          break;
        }
      }
  return  fls;
  }
  //echarts右击事件
  function chartcontextmenu(){
    checkformat(fmtresult);
   $.each(dataGoz,function(i,t){
        $.each(t.F_Y,function(m,n){
            n.markLine.data=dataxtimeArr;
         });
   })
    nstart(dataGoz);
  }

首先我们讲解双击方法：双击功能如下：双击任意一个图上任一点，在鼠标处绘制出一条平行Y轴的标线。再次双击则删除标线；
其中通过定义一个全局变量fmtresult接收tooltip 中formatter的回调函数Fmtresult（）的X轴值；这个formatter的回调函数中有我们想要的鼠标点击的数据。部分人看到这样，估计已然豁然开朗了。双击事件中需要说明的是：

这个作用是：1.当标线数据为空则双击添加，2.若不为空，且不重复，则添加；3.若重复则删除。若是有人问为什么这样格式去添加标线，其实添加多条标线方式不止种，网上有很多案例，常用定义起始点的2种是 ：1.xAxis和yAxis 数据定义范围；2:x,y位置定位；这里就不再多说了。右键点击功能就是删除标线；

我们通过双击几条数据画标线和单击所打印的数据展示效果图看看：

好，本期就讲解到这里，属作者原创，如有转载，请表明出处：http://www.cnblogs.com/mobeisanghai/p/8025448.html

时间： 2024-08-06 09:10:27

echarts 点击方法总结，点任意一点获取点击数据，举例说明:在多图联动中点击绘制标线的相关文章

关于delphi点击webbrowser中任意一点的问题

关于delphi点击webbrowser中任意一点的问题 有时候我们需要delphi载入webbrowser1打开网页的时候 需要点击某一个点的位置 可能是坐标 可能是按钮 可能是其他的控件应该如何来实现呢? 这里来简单说明一下点击坐标的过程点击过程很明显我们移动鼠标来点击或者发送消息来点击移动鼠标点击的比较常见 这里详细说明一下发送消息来点击的办法发送消息来点击的思路是sendmessage()发送消息来实现的导入句柄 点击的就可以了.但是这里的句柄(webbrowser的句柄)其实是不好找的

GridView中点击某行的任意位置就选中该行

GridView中点击某行的任意位置就选中该行 分类: 第一步:添加选择列 点击GridView右边小尖头,双击CommandField,选中＂选择＂,添加,将起设置为不可见: 第二步:处理＂ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证＂,在源文件中添加＂enableEventValidation="false"＂: 第三步:在GridView的RowDataBound事件中增加以下代码: protec

Opencv 截取图片中一部分的方法（包括任意区域）

对于图像的截取的方式很多都是对 IplImage* img 这种格式的进行操作的. 1.对cvMat操作其实非常的简单: Mat image= imreadimag): Rect rect(10, 20, 100, 50); Mat image_roi = image(rect); 另外:srcImage(rect).copyTo(roiImage)也可以达到同样的效果! 2.IplImage* img 从图里面截取矩形的操作一般是这个样子的: CvSize size= cvSize(40,50

[email&#160;protected]鼠标点击页面中的任意标签，alert该标签的名称

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>鼠标点击页面中的任意标签,alert该标签的名称</title> 6 <style> 7 div { 8 background-color: blue; 9 width: 150px; 10 height: 150px; 11

求树上任意一点所能到达的最远距离 - 树上dp

A school bought the first computer some time ago(so this computer's id is 1). During the recent years the school bought N-1 new computers. Each new computer was connected to one of settled earlier. Managers of school are anxious about slow functionin

echarts 图的点击重复触发的问题及其解决

要求:在echart图表中,点击每个项,需要跳转对应页面或者显示对应的数据详情列表. 如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById('chartBox')); myChart.setOption(option); 2.在myChart.setOption(option)后添加以下代码,即可触发图标中每个项的鼠标点击事件. myChart.on('click',

jQuery获取JSON格式数据方法

getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result_data){ $.each(result_data, function(index, name_value){ $("div").append(name_value + &qu

iOS中点击背景收键盘

这一次给大家带来的是ios中点击背景如何收键盘 直接上图: file:///Users/a504-18/Desktop/屏幕快照%202016-03-17%20下午7.35.07.png 先创建一个这样的页面,把两个文本框进行连线: file:///Users/a504-18/Desktop/屏幕快照%202016-03-17%20下午7.36.57.png 其实,很简单,视图控制器有一个view属性,是从UIViewController继承来的.这个view属性对应的nib文件中的View.使

C#获取网页中某个元素的位置，并模拟点击

我们在开发中,往往要得到网页中某个元素的位置,并且点击它.要模拟一次鼠标点击并不难,只要调用一个API就行了,关键就是怎么样得到这个元素的位置,还有判断是否要滚动滚动条,要滚动多少行能让元素显示出来.当然我们可以动态改变它的CSS,让它在特定的位置显示出来,但这个方法只对比较简单的网页有效. 那我们怎么才能得到网页的位置呢,首先我们来看一张图片 从这里我们可以看到五个offset的属性,这里我们主要利用offsetparent, offsetleft 和offsettop,我们用offsetpa