vue基于Echarts的拖拽數(shù)據(jù)可視化功能實現(xiàn)
背景
我司產品提出了一個需求，做一個數(shù)據(jù)基于Echars的可拖拽縮放的數(shù)據(jù)可視化，上網百度了一番，結果出現(xiàn)了兩種結局，一種花錢買成熟產品（公司不出錢），一種沒有成熟代碼，只能自己寫了，故事即將開始，敬請期待......。 不，還是先上一張效果圖吧，請看......
前期知識點
1. offset（偏移量）
定義：當前元素在屏幕上占用的空間，如下圖：
其中：
offsetHeight: 該元素在垂直方向上的占用的空間，單位為px，不包括margin。
offsetWidth：該元素在水平方向上的占用空間，單位為px，不包括margin。
offsetLeft: 該元素距離左側并且是定位過（relative || absolute）的父元素內邊框的距離。注意：如果父元素中沒有一個是定位的，則是距離body元素的距離。
offsetTop：該元素距離頂部并且是定位過（relative || absolute）的父元素內邊框的距離。注意：如果父元素中沒有一個是定位的，則是距離body元素的距離。
2. 鼠標事件
2.1 當前鼠標的坐標點
clientX：返回鼠標觸點相對于瀏覽器可視區(qū)域的X坐標，單位為px，這個屬性值可以根據(jù)用戶對可視區(qū)的縮放行為發(fā)生變化。
clientY：返回鼠標觸點相對于瀏覽器可視區(qū)域的Y坐標，單位為px，這個屬性值可以根據(jù)用戶對可視區(qū)的縮放行為發(fā)生變化。
2.2 相關的鼠標事件
ondragstart： 規(guī)定當元素被拖動時，發(fā)生什么，該屬性調用一個函數(shù)，drag（event），它規(guī)定了被拖動的數(shù)據(jù)?？赏ㄟ^dataTransfer.setData() 方法設置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
ondragover： 規(guī)定在何處放置被拖動的數(shù)據(jù)，默認地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。這要通過調用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
ondrop：當放置被拖數(shù)據(jù)時，會發(fā)生 drop 事件。ondrop 屬性調用了一個函數(shù)，drop(event)：
function drop(ev)
{
// 避免瀏覽器對數(shù)據(jù)的默認處理（drop 事件的默認行為是以鏈接形式打開）
ev.preventDefault();
// 獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設置為相同類型的任何數(shù)據(jù)。
var data=ev.dataTransfer.getData("Text");
// 把被拖元素追加到放置元素（目標元素）中
ev.target.appendChild(document.getElementById(data));
}
onMouseDown: 鼠標上的按鈕被按下時觸發(fā)的事件
onMouseMove：鼠標移動時觸發(fā)的事件
onmouseup：鼠標按下后，松開時激發(fā)的事件
拖拽功能
本功能以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);
},
定義放置區(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）當鼠標剛按下去時，記錄當前元素距離帶定位的父元素的offsetLeft、offsetTop距離；以及當前鼠標在瀏覽器可視區(qū)的坐標clientX、clientY的距離。
（2）分別計算兩者的差值作為偏移常量，如下：
let disX = e.clientX - el.offsetLeft; let disY = e.clientY - el.offsetTop;
（3）監(jiān)聽鼠標的移動事件，獲取當前鼠標距離瀏覽器可是區(qū)域的坐標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。實現(xiàn)思路如下：
（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）為每個可可縮放方框設置縮放函數(shù)，請看注釋
// 初始化可縮放
initResize(){
let el = this.$el; //獲取當前元素
let spanNodes = this.$refs.resizeDivTag.childNodes;
for(let i=0;i<spanNodes.length;i++){
this.resizeElementFun(spanNodes[i],el); // 分別為四個縮放方框設置監(jiān)聽事件
}
},
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; // 當前鼠標對于瀏覽器可視區(qū)域的X坐標
let oldY = oEv.clientY; // 當前鼠標對于瀏覽器可視區(qū)域的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圖表自適應
結束語
本文只是粗略的記錄了數(shù)據(jù)可視化簡單demo的實現(xiàn)思路，如果您覺得對您有幫助，請下載源碼 github地址
喜歡的小伙伴給個star,謝謝
參考文獻
http://m.fzitv.net/article/201371.htm
http://m.fzitv.net/article/201349.htm
到此這篇vue基于Echarts的拖拽數(shù)據(jù)可視化功能實現(xiàn)的文章就介紹到這了,更多相關vue基于Echarts拖拽數(shù)據(jù)可視化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue中el-form-item展開項居中的實現(xiàn)方式
這篇文章主要介紹了vue中el-form-item展開項居中的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了vue之頁面緩存問題(基于2.0)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下2017-09-09
vue腳手架創(chuàng)建項目時報catch錯誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項目時報catch錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue-cli在 history模式下的配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了vue實現(xiàn)隨機驗證碼功能的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
不斷把公共的、可以獨立拆分出來的抽出來作為一個獨立可復用的組件來向上提供調用,這樣讓我們的代碼更加方便組織和管理,并且擴展性也更強,下面這篇文章主要給大家介紹了關于vue3組件化開發(fā)之可復用性應用的相關資料,需要的朋友可以參考下2022-06-06
本文主要介紹了vue中el-message的封裝使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Vue3?中的?readonly?特性及函數(shù)使用詳解
readonly是Vue3中提供的一個新特性，用于將一個響應式對象變成只讀對象，這篇文章主要介紹了Vue3?中的?readonly?特性詳解,需要的朋友可以參考下2023-04-04
keep-alive是vue中的內置組件,能在組件切換過程中將狀態(tài)保留在內存中,防止重復渲染DOM,本文給大家介紹vue中的keep-alive詳解與應用場景,感興趣的朋友一起看看吧2023-11-11