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(){
    $("#come").click(function(){  //點擊數據進入
        $("#come").hide();
        nstart(dataGoz);  //開始入口
        });   
}  

上面是給數據“數據進入"元素一個點擊事件，用於后面繪圖;下面展示繪圖方法：

//核心繪圖方法  
function  nstart(dataGoz){
    var  mainheight=0,
    bodyheight=document.body.clientHeight,  //獲取總高度
    mainheight=(bodyheight-40),      //分配高度
    startmiandiv=$('#startmian');
    startmiandiv.empty();
　　 mdataeahars=[];
    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