vue基于Echarts的拖拽數(shù)據(jù)可視化功能實現(xiàn)

更新時間：2020年12月04日 10:42:29 作者：奔跑的五花肉888

這篇文章主要給大家介紹了關(guān)于vue基于Echars的拖拽數(shù)據(jù)可視化功能實現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

背景

我司產(chǎn)品提出了一個需求，做一個數(shù)據(jù)基于Echars的可拖拽縮放的數(shù)據(jù)可視化，上網(wǎng)百度了一番，結(jié)果出現(xiàn)了兩種結(jié)局，一種花錢買成熟產(chǎn)品（公司不出錢），一種沒有成熟代碼，只能自己寫了，故事即將開始，敬請期待......。不，還是先上一張效果圖吧，請看......

前期知識點

1. offset（偏移量）

定義：當(dāng)前元素在屏幕上占用的空間，如下圖：

其中：

offsetHeight: 該元素在垂直方向上的占用的空間，單位為px，不包括margin。

offsetWidth：該元素在水平方向上的占用空間，單位為px，不包括margin。

offsetLeft: 該元素距離左側(cè)并且是定位過（relative || absolute）的父元素內(nèi)邊框的距離。注意：如果父元素中沒有一個是定位的，則是距離body元素的距離。

offsetTop：該元素距離頂部并且是定位過（relative || absolute）的父元素內(nèi)邊框的距離。注意：如果父元素中沒有一個是定位的，則是距離body元素的距離。

2. 鼠標(biāo)事件

2.1 當(dāng)前鼠標(biāo)的坐標(biāo)點

clientX：返回鼠標(biāo)觸點相對于瀏覽器可視區(qū)域的X坐標(biāo)，單位為px，這個屬性值可以根據(jù)用戶對可視區(qū)的縮放行為發(fā)生變化。

clientY：返回鼠標(biāo)觸點相對于瀏覽器可視區(qū)域的Y坐標(biāo)，單位為px，這個屬性值可以根據(jù)用戶對可視區(qū)的縮放行為發(fā)生變化。

2.2 相關(guān)的鼠標(biāo)事件

ondragstart：規(guī)定當(dāng)元素被拖動時，發(fā)生什么，該屬性調(diào)用一個函數(shù)，drag（event），它規(guī)定了被拖動的數(shù)據(jù)?？赏ㄟ^dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：

function drag(ev)
{
 ev.dataTransfer.setData("Text",ev.target.id);
}

ondragover：規(guī)定在何處放置被拖動的數(shù)據(jù)，默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式。這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

ondrop：當(dāng)放置被拖數(shù)據(jù)時，會發(fā)生 drop 事件。ondrop 屬性調(diào)用了一個函數(shù)，drop(event)：

function drop(ev)
{ 
 // 避免瀏覽器對數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
 ev.preventDefault();
 // 獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
 var data=ev.dataTransfer.getData("Text");
 // 把被拖元素追加到放置元素（目標(biāo)元素）中
 ev.target.appendChild(document.getElementById(data));
}

onMouseDown: 鼠標(biāo)上的按鈕被按下時觸發(fā)的事件

onMouseMove：鼠標(biāo)移動時觸發(fā)的事件

onmouseup：鼠標(biāo)按下后，松開時激發(fā)的事件

拖拽功能

本功能以Echarts圖表中柱狀圖為例，進(jìn)行講解：

先定義可拖拽元素

<div>
    <el-button class="drag-button" type="success" draggable="true" 
 @dragstart.native="dragStart($event,'histogram')">
 柱狀圖
 </el-button>
 </div>

注意：元素默認(rèn)是不能進(jìn)行拖拽的，需要將draggable屬性設(shè)置為"true",即draggable="true"

 dragStart(event,type){
       event.dataTransfer.setData("Text",type);
    },

定義放置區(qū)域

<div class="grid-content bg-purple-light drag-resize-area"
 @drop.prevent="drop($event)" @dragover.prevent="">
 <div style="height:300px;width:400px" id="'histogram'></div>
</div>

其中drop事件如下：

drop(event){
      const data=event.dataTransfer.getData("Text");
      if(data === 'histogram'){ 
 var myChart = echarts.init(document.getElementById('histogram')); // 指定圖表的配置項和數(shù)據(jù)
 var option = { 
 title: { text: 'ECharts 入門示例' }, 
 tooltip: {}, legend: { data:['銷量'] },
 xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] },
 yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] 
 }; 
 // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 
 myChart.setOption(option);
 }
}

基于自己封裝的組件的源碼請看github：github地址

效果圖如下：

拖動功能

此功能用到了上面提到的offsetLeft、offsetTop、clientX，clientY。實現(xiàn)思路如下：

（1）當(dāng)鼠標(biāo)剛按下去時，記錄當(dāng)前元素距離帶定位的父元素的offsetLeft、offsetTop距離；以及當(dāng)前鼠標(biāo)在瀏覽器可視區(qū)的坐標(biāo)clientX、clientY的距離。

（2）分別計算兩者的差值作為偏移常量，如下：

 let disX = e.clientX - el.offsetLeft;
        let disY = e.clientY - el.offsetTop;

（3）監(jiān)聽鼠標(biāo)的移動事件，獲取當(dāng)前鼠標(biāo)距離瀏覽器可是區(qū)域的坐標(biāo)clientX，clientY；然后減去偏移常量，即為當(dāng)前元素的坐標(biāo)

 let tX = e.clientX - disX;
 let tY = e.clientY - disY; 
 el.style.left = tX + 'px'; 
 el.style.top = tY + 'px'；

說明：el為當(dāng)前圖表對象

由于本人封裝了通用vue組件，詳細(xì)拖拽方法代碼如下：

      // 初始化可拖拽方法
      initDrag(){
       let el = this.$el;
       el.onmousedown = (e)=>{
            e.preventDefault();
            e.target.style.cursor = 'move'; 
            //鼠標(biāo)按下，計算鼠標(biāo)觸點距離元素左側(cè)和頂部的距離
            let disX = e.clientX - el.offsetLeft;
            let disY = e.clientY - el.offsetTop;
            // console.log('22222',document);
            document.onmousemove = function (e) {
              //計算需要移動的距離
              let tX = e.clientX - disX;
              let tY = e.clientY - disY;
              //移動當(dāng)前元素
              if (tX >= 0 && tX <= window.innerWidth - el.offsetWidth) {
                el.style.left = tX + 'px';
              } 
              if (tY >= 0 && tY <= window.innerHeight - el.offsetHeight) {
                el.style.top = tY + 'px';
              } 
            };
            //鼠標(biāo)松開時，注銷鼠標(biāo)事件，停止元素拖拽。
            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
                e.target.style.cursor = 'default';
            };
       }
     },

如果想看封裝的組件，請查看github地址：github地址

拖動效果如下圖：

縮放功能

此功能用到了上面提到的 offsetWidth、offsetHeight、offsetLeft、offsetTop、clientX，clientY。實現(xiàn)思路如下：

（1）先設(shè)置可縮放的四個拖拽方框

<div v-show="isResize && resizeFlag" ref="resizeDivTag" id="resizeDivTag">
        <span class="br"></span>
        <span class="bl"></span>
        <span class="tr"></span>
        <span class="tl"></span> 
    </div>

其中isResize 與 resizeFlag表示是否可縮放以及是否可拖拽

（2）為每個可可縮放方框設(shè)置縮放函數(shù)，請看注釋

// 初始化可縮放
      initResize(){
        let el = this.$el; //獲取當(dāng)前元素
        let spanNodes = this.$refs.resizeDivTag.childNodes;
        for(let i=0;i<spanNodes.length;i++){
          this.resizeElementFun(spanNodes[i],el); // 分別為四個縮放方框設(shè)置監(jiān)聽事件
        }
      },
      resizeElementFun(element,el){
        element.onmousedown = function(ev){
          console.log('我是按下的元素')
          let oEv = ev || event;
          oEv.stopPropagation();
          let oldWidth = el.offsetWidth; // 當(dāng)前元素的寬度
          let oldHeight  = el.offsetHeight; // 當(dāng)前元素的高度
          console.log('-----'+ oldWidth+'----'+oldHeight);
          let oldX = oEv.clientX; // 當(dāng)前鼠標(biāo)對于瀏覽器可視區(qū)域的X坐標(biāo)
          let oldY = oEv.clientY; // 當(dāng)前鼠標(biāo)對于瀏覽器可視區(qū)域的Y坐標(biāo)
          let oldLeft = el.offsetLeft; // 當(dāng)前元素對于父級定位元素的寬度
          let oldTop = el.offsetTop; // 當(dāng)前元素對于父級定位元素的高度
          console.log('--zuo---'+ oldLeft+'--gao--'+oldTop);
          document.onmousemove = function(ev){
            // oEv.stopPropagation();
            let oEv = ev || event;
            let disY = (oldTop + (oEv.clientY - oldY)); // 當(dāng)前縮放的元素距離定位父元素的高度
            // let disX = (oldLeft + (oEv.clientX - oldLeft));
            let disX = (oldLeft + (oEv.clientX - oldX)); // 當(dāng)前縮放的元素距離定位父元素的寬度
            if(disX>oldLeft+oldWidth){
                disX=oldLeft+oldWidth
            }
            if(disY>oldTop+oldHeight){
                disY=oldTop+oldHeight
            }
            if(element.className == 'tl'){ // 左上縮放時
              el.style.width = oldWidth - (oEv.clientX - oldX) + 'px'; 
 // 元素寬度= 縮放前寬度-鼠標(biāo)當(dāng)前坐標(biāo)與原始坐標(biāo)差值
              el.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
 // 元素寬度= 縮放前高度-鼠標(biāo)當(dāng)前坐標(biāo)與原始坐標(biāo)差值
              el.style.left = disX + 'px';
 // 元素距離父元素的距離 = 
              el.style.top = disY + 'px';
            } else if (element.className == 'bl'){ // 左下
              el.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
              el.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
              el.style.left = disX + 'px';
              // el.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
            } else if (element.className == 'tr'){ //右上
              el.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
              el.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
              el.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
              el.style.top = disY + 'px';
            } else if (element.className == 'br'){ //右下
              el.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
              el.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
              el.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
              // el.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
            }
          }
          document.onmouseup = function(){
            document.onmousemove = null;
          };
          return false;
        }
      },

如果想看封裝的組件，請查看github地址：github地址

縮放效果如下圖：