JQuery實現Echarts散點圖的點擊獲取座標事件

內容有點多，慢慢看~~

個人需求是：經過點擊座標軸的任意位置，獲取當前位置的座標，並賦值給x,y

關鍵js代碼：

 var height = document.getElementById('hight'); var weight = document.getElementById('weight'); myChart.setOption(option); //關鍵 var ecConfig = echarts.config; //關鍵中的關鍵 function eConsole(param){ if(param.value.length > 1) { height.innerText = param.value[0]+'cm'; weight.innerText = param.value[1]+'cm'; } else { height.innerText = param.name+'cm'; weight.innerText = param.value+'cm'; } } //在這裏作一個點擊事件的監聽，綁定的是eConsole方法 myChart.on(ecConfig.EVENT.CLICK, eConsole); //max關鍵 

  此外param參數包含的內容有：

       param.seriesIndex：系列序號（series中當前圖形是第幾個圖形第幾個，從0開始計數）

       param.dataIndex：數值序列（X軸上當前點是第幾個點，從0開始計數）

       param.seriesName：legend名稱

       param.name：X軸值

       param.data：Y軸值

       param.value：Y軸值

       param.type：點擊事件均爲click

   實現的效果圖：

我想要實現的效果是點擊任意地方能獲取這個地方的座標，可是並無實現這個最終效果。

在網上幾經搜查無果，後來仔細研究一一下Echart，發現本身走進了一個誤區，咱們獲取的數據都是經過param，當咱們點擊任意地方時只有這個地方在data中是存在的，才能經過param獲取。因此要實現點擊任意點獲取其座標，只能在座標中平鋪N多個點，也是在data中添加數以萬計的數據才行。unbelievable！amazing！

最後我也是經過這個的方法解決問題的。。。好蠢的方法。。。。網友有更好的方法歡迎評論~

附加幾個小知識點：

　　1. 改變點的顏色是這個地方改變，color： 'transparent'; //點變成透明色

            

　　2. Echart實現雙擊事件

　　　　Echart插件自己是沒有雙擊事件的，可是咱們能夠本身模擬一個雙擊事件，如下圖片是另一個項目的圖片

在網上查找的時候看到有網友經過js的計時器經過時間差來觸發雙擊事件，能夠是能夠，可是有個問題，這裏的時間差必須固定才行，而咱們並不知道用戶何時才發生第二次點擊動做。因此我沒有采用這種方法，而是經過動態改變類名的形式來判斷單擊和雙擊事件

 <p class="first_point mark_point"> <!--有mark_point,第一次點擊賦值給它的子元素--> <span class="img_x01"></span >  , <span class="img_y01"></span >
</p> <p class="scon_point"> <span class="img_x02"></span >  , <span class="img_y02"></span >
</p> 

關鍵js代碼：

 

這裏點擊任意地方獲取座標也是用了上面的蠢方法，簡單粗暴啊！

 效果圖

經過反覆點擊測試這種方式來判斷單擊和雙擊事件是可行的，固然視狀況而定。

歡迎網友指正提出更好的意見~~

 

 

 

做者：Aylson.Fu
出處：https://www.cnblogs.com/formybestlife/
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接。很是感謝~