背景
我司產品提出了一個需求，做一個數據基于Echars的可拖拽縮放的數據可視化，上網百度了一番，結果出現了兩種結局，一種花錢買成熟產品（公司不出錢），一種沒有成熟代碼，只能自己寫了，故事即將開始，敬請期待......。 不，還是先上一張效果圖吧，請看......
前期知識點
1. offset（偏移量）
定義：當前元素在屏幕上占用的空間，如下圖：
其中：
offsetHeight: 該元素在垂直方向上的占用的空間，單位為px，不包括margin。
offsetWidth：該元素在水平方向上的占用空間，單位為px，不包括margin。
offsetLeft: 該元素距離左側并且是定位過（relative || absolute）的父元素內邊框的距離。注意：如果父元素中沒有一個是定位的，則是距離body元素的距離。
offsetTop：該元素距離頂部并且是定位過（relative || absolute）的父元素內邊框的距離。注意：如果父元素中沒有一個是定位的，則是距離body元素的距離。
2. 鼠標事件
2.1 當前鼠標的坐標點
clientX：返回鼠標觸點相對于瀏覽器可視區域的X坐標，單位為px，這個屬性值可以根據用戶對可視區的縮放行為發生變化。
clientY：返回鼠標觸點相對于瀏覽器可視區域的Y坐標，單位為px，這個屬性值可以根據用戶對可視區的縮放行為發生變化。
2.2 相關的鼠標事件
ondragstart： 規定當元素被拖動時，發生什么，該屬性調用一個函數，drag（event），它規定了被拖動的數據。可通過dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
ondragover： 規定在何處放置被拖動的數據，默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。這要通過調用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
ondrop：當放置被拖數據時，會發生 drop 事件。ondrop 屬性調用了一個函數，drop(event)：
function drop(ev)
{
// 避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
ev.preventDefault();
// 獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
var data=ev.dataTransfer.getData("Text");
// 把被拖元素追加到放置元素（目標元素）中
ev.target.appendChild(document.getElementById(data));
}
onMouseDown: 鼠標上的按鈕被按下時觸發的事件
onMouseMove：鼠標移動時觸發的事件
onmouseup：鼠標按下后，松開時激發的事件
拖拽功能
本功能以Echarts圖表中柱狀圖為例，進行講解：
先定義可拖拽元素
<div> <el-button class="drag-button" type="success" draggable="true" @dragstart.native="dragStart($event,"histogram")"> 柱狀圖 </el-button> </div>
注意：元素默認是不能進行拖拽的，需要將draggable屬性設置為"true",即draggable="true"
dragStart(event,type){
event.dataTransfer.setData("Text",type);
},
定義放置區域
<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")); // 指定圖表的配置項和數據
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);
}
}
基于自己封裝的組件的源碼請看github：github地址
效果圖如下：
拖動功能
此功能用到了上面提到的offsetLeft、offsetTop、clientX，clientY。實現思路如下：
（1）當鼠標剛按下去時，記錄當前元素距離帶定位的父元素的offsetLeft、offsetTop距離；以及當前鼠標在瀏覽器可視區的坐標clientX、clientY的距離。
（2）分別計算兩者的差值作為偏移常量，如下：
let disX = e.clientX - el.offsetLeft; let disY = e.clientY - el.offsetTop;
（3）監聽鼠標的移動事件，獲取當前鼠標距離瀏覽器可是區域的坐標clientX，clientY；然后減去偏移常量，即為當前元素的坐標
let tX = e.clientX - disX; let tY = e.clientY - disY; el.style.left = tX + "px"; el.style.top = tY + "px"；
說明：el為當前圖表對象
由于本人封裝了通用vue組件，詳細拖拽方法代碼如下：
// 初始化可拖拽方法
initDrag(){
let el = this.$el;
el.onmousedown = (e)=>{
e.preventDefault();
e.target.style.cursor = "move";
//鼠標按下，計算鼠標觸點距離元素左側和頂部的距離
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;
//移動當前元素
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";
}
};
//鼠標松開時，注銷鼠標事件，停止元素拖拽。
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
e.target.style.cursor = "default";
};
}
},
如果想看封裝的組件，請查看github地址：github地址
拖動效果如下圖：
縮放功能
此功能用到了上面提到的 offsetWidth、offsetHeight、offsetLeft、offsetTop、clientX，clientY。實現思路如下：
（1）先設置可縮放的四個拖拽方框
<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）為每個可可縮放方框設置縮放函數，請看注釋
// 初始化可縮放
initResize(){
let el = this.$el; //獲取當前元素
let spanNodes = this.$refs.resizeDivTag.childNodes;
for(let i=0;i<spanNodes.length;i++){
this.resizeElementFun(spanNodes[i],el); // 分別為四個縮放方框設置監聽事件
}
},
resizeElementFun(element,el){
element.onmousedown = function(ev){
console.log("我是按下的元素")
let oEv = ev || event;
oEv.stopPropagation();
let oldWidth = el.offsetWidth; // 當前元素的寬度
let oldHeight = el.offsetHeight; // 當前元素的高度
console.log("-----"+ oldWidth+"----"+oldHeight);
let oldX = oEv.clientX; // 當前鼠標對于瀏覽器可視區域的X坐標
let oldY = oEv.clientY; // 當前鼠標對于瀏覽器可視區域的Y坐標
let oldLeft = el.offsetLeft; // 當前元素對于父級定位元素的寬度
let oldTop = el.offsetTop; // 當前元素對于父級定位元素的高度
console.log("--zuo---"+ oldLeft+"--gao--"+oldTop);
document.onmousemove = function(ev){
// oEv.stopPropagation();
let oEv = ev || event;
let disY = (oldTop + (oEv.clientY - oldY)); // 當前縮放的元素距離定位父元素的高度
// let disX = (oldLeft + (oEv.clientX - oldLeft));
let disX = (oldLeft + (oEv.clientX - oldX)); // 當前縮放的元素距離定位父元素的寬度
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";
// 元素寬度= 縮放前寬度-鼠標當前坐標與原始坐標差值
el.style.height = oldHeight - (oEv.clientY - oldY) + "px";
// 元素寬度= 縮放前高度-鼠標當前坐標與原始坐標差值
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地址
縮放效果如下圖：
Echarts縮放中存在的問題
vue中使用echarts圖表自適應的幾種基本解決方案，此處不再進行贅述，詳情請參考如下鏈接：echarts圖表自適應
結束語
本文只是粗略的記錄了數據可視化簡單demo的實現思路，如果您覺得對您有幫助，請下載源碼 github地址
喜歡的小伙伴給個star,謝謝
參考文獻
http://www.ythuaji.com.cn/article/209675.html
到此這篇vue基于Echarts的拖拽數據可視化功能實現的文章就介紹到這了,更多相關vue基于Echarts拖拽數據可視化內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6901793967281537038
