首页 >> js开发 >> jsvue基于Echarts的拖拽数据可视化功能实现js大全
jsvue基于Echarts的拖拽数据可视化功能实现js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
背景
我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，故事即将开始，敬请期待......。
不，还是先上一张效果图吧，请看......前期知识点
1. offset（偏移量）
定义：当前元素在屏幕上占用的空间，如下图：其中：offsetHeight: 该元素在垂直方向上的占用的空间，单位为px，不包括margin。offsetWidth：该元素在水平方向上的占用空间，单位为px，不包括margin。offsetLeft: 该元素距离左侧并且是定位过（relative || absolute）的父元素内边框的距离。注意：如果父元素中没有一个是定位的，则是距离body元素的距离。offsetTop：该元素距离顶部并且是定位过（relative || absolute）的父元素内边框的距离。注意：如果父元素中没有一个是定位的，则是距离body元素的距离。2. 鼠标事件
2.1 当前鼠标的坐标点
2.1 当前鼠标的坐标点
clientX：返回鼠标触点相对于浏览器可视区域的X坐标，单位为px，这个属性值可以根据用户对可视区的缩放行为发生变化。clientY：返回鼠标触点相对于浏览器可视区域的Y坐标，单位为px，这个属性值可以根据用户对可视区的缩放行为发生变化。2.2 相关的鼠标事件2.2 相关的鼠标事件ondragstart： 规定当元素被拖动时，发生什么，该属性调用一个函数，drag（event），它规定了被拖动的数据。可通过dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
ondragover： 规定在何处放置被拖动的数据，默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：
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));
}
function drop(ev)
{
// 避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
// 获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
var data=ev.dataTransfer.getData("Text");
// 把被拖元素追加到放置元素（目标元素）中
ev.target.appendChild(document.getElementById(data));
}
onMouseDown: 鼠标上的按钮被按下时触发的事件onMouseMove：鼠标移动时触发的事件onmouseup：鼠标按下后，松开时激发的事件拖拽功能
本功能以Echarts图表中柱状图为例，进行讲解：先定义可拖拽元素
@dragstart.native="dragStart($event,'histogram')">
柱状图
@dragstart.native="dragStart($event,'histogram')">
柱状图
注意：元素默认是不能进行拖拽的，需要将draggable属性设置为"true",即draggable="true"
dragStart(event,type){
event.dataTransfer.setData("Text",type);
},
dragStart(event,type){
event.dataTransfer.setData("Text",type);
},
定义放置区域定义放置区域
@drop.prevent="drop($event)" @dragover.prevent="">
其中isResize 与 resizeFlag表示是否可缩放以及是否可拖拽（2）为每个可可缩放方框设置缩放函数，请看注释
// 初始化可缩放
initResize(){
let el = this.$el; //获取当前元素
let spanNodes = this.$refs.resizeDivTag.childNodes;
for(let i=0;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;
}
},
// 初始化可缩放
initResize(){
let el = this.$el; //获取当前元素
let spanNodes = this.$refs.resizeDivTag.childNodes;
for(let i=0;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地址github地址缩放效果如下图：Echarts缩放中存在的问题vue中使用echarts图表自适应的几种基本解决方案，此处不再进行赘述，详情请参考如下链接：echarts图表自适应echarts图表自适应结束语
本文只是粗略的记录了数据可视化简单demo的实现思路，如果您觉得对您有帮助，请下载源码
github地址github地址喜欢的小伙伴给个star,谢谢参考文献https:///article/202171.htm
https:///article/202171.htmhttps:///article/202149.htmhttps:///article/202149.htm到此这篇vue基于Echarts的拖拽数据可视化功能实现的文章就介绍到这了,相关vue基于Echarts拖拽数据可视化内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，故事即将开始，敬请期待......。
不，还是先上一张效果图吧，请看......前期知识点
1. offset（偏移量）
定义：当前元素在屏幕上占用的空间，如下图：其中：offsetHeight: 该元素在垂直方向上的占用的空间，单位为px，不包括margin。offsetWidth：该元素在水平方向上的占用空间，单位为px，不包括margin。offsetLeft: 该元素距离左侧并且是定位过（relative || absolute）的父元素内边框的距离。注意：如果父元素中没有一个是定位的，则是距离body元素的距离。offsetTop：该元素距离顶部并且是定位过（relative || absolute）的父元素内边框的距离。注意：如果父元素中没有一个是定位的，则是距离body元素的距离。2. 鼠标事件
2.1 当前鼠标的坐标点
2.1 当前鼠标的坐标点
clientX：返回鼠标触点相对于浏览器可视区域的X坐标，单位为px，这个属性值可以根据用户对可视区的缩放行为发生变化。clientY：返回鼠标触点相对于浏览器可视区域的Y坐标，单位为px，这个属性值可以根据用户对可视区的缩放行为发生变化。2.2 相关的鼠标事件2.2 相关的鼠标事件ondragstart： 规定当元素被拖动时，发生什么，该属性调用一个函数，drag（event），它规定了被拖动的数据。可通过dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
ondragover： 规定在何处放置被拖动的数据，默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：
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));
}
function drop(ev)
{
// 避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
// 获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
var data=ev.dataTransfer.getData("Text");
// 把被拖元素追加到放置元素（目标元素）中
ev.target.appendChild(document.getElementById(data));
}
onMouseDown: 鼠标上的按钮被按下时触发的事件onMouseMove：鼠标移动时触发的事件onmouseup：鼠标按下后，松开时激发的事件拖拽功能
本功能以Echarts图表中柱状图为例，进行讲解：先定义可拖拽元素
柱状图
柱状图
注意：元素默认是不能进行拖拽的，需要将draggable属性设置为"true",即draggable="true"
dragStart(event,type){
event.dataTransfer.setData("Text",type);
},
dragStart(event,type){
event.dataTransfer.setData("Text",type);
},
定义放置区域定义放置区域
@drop.prevent="drop($event)" @dragover.prevent="">
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);
}
}
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地址github地址效果图如下：拖动功能
此功能用到了上面提到的offsetLeft、offsetTop、clientX，clientY。实现思路如下：（1）当鼠标刚按下去时，记录当前元素距离带定位的父元素的offsetLeft、offsetTop距离；以及当前鼠标在浏览器可视区的坐标clientX、clientY的距离。（2）分别计算两者的差值作为偏移常量，如下：
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
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'；
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';
};
}
},
// 初始化可拖拽方法
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地址github地址拖动效果如下图：缩放功能
此功能用到了上面提到的 offsetWidth、offsetHeight、offsetLeft、offsetTop、clientX，clientY。实现思路如下：（1）先设置可缩放的四个拖拽方框
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);
}
}
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地址github地址效果图如下：拖动功能
此功能用到了上面提到的offsetLeft、offsetTop、clientX，clientY。实现思路如下：（1）当鼠标刚按下去时，记录当前元素距离带定位的父元素的offsetLeft、offsetTop距离；以及当前鼠标在浏览器可视区的坐标clientX、clientY的距离。（2）分别计算两者的差值作为偏移常量，如下：
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
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'；
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';
};
}
},
// 初始化可拖拽方法
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地址github地址拖动效果如下图：缩放功能
此功能用到了上面提到的 offsetWidth、offsetHeight、offsetLeft、offsetTop、clientX，clientY。实现思路如下：（1）先设置可缩放的四个拖拽方框
其中isResize 与 resizeFlag表示是否可缩放以及是否可拖拽（2）为每个可可缩放方框设置缩放函数，请看注释
// 初始化可缩放
initResize(){
let el = this.$el; //获取当前元素
let spanNodes = this.$refs.resizeDivTag.childNodes;
for(let i=0;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;
}
},
// 初始化可缩放
initResize(){
let el = this.$el; //获取当前元素
let spanNodes = this.$refs.resizeDivTag.childNodes;
for(let i=0;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地址github地址缩放效果如下图：Echarts缩放中存在的问题vue中使用echarts图表自适应的几种基本解决方案，此处不再进行赘述，详情请参考如下链接：echarts图表自适应echarts图表自适应结束语
本文只是粗略的记录了数据可视化简单demo的实现思路，如果您觉得对您有帮助，请下载源码
github地址github地址喜欢的小伙伴给个star,谢谢参考文献https:///article/202171.htm
https:///article/202171.htmhttps:///article/202149.htmhttps:///article/202149.htm到此这篇vue基于Echarts的拖拽数据可视化功能实现的文章就介绍到这了,相关vue基于Echarts拖拽数据可视化内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
相关文章:
- jsVue如何实现验证码输入交互js大全
- jsVue+element-ui添加自定义右键菜单的方法示例js大全
- jsvuex Module将 store 分割成模块的操作js大全
- jsvue使用echarts图表自适应的几种解决方案js大全
- js代码JavaScript中的几种继承方法示例
- jselement中Steps步骤条和Tabs标签页关联的解决js大全
- jsecharts浮动显示单位的实现方法示例js大全
- JavaScript可拖拽组件slider.js使用方法详解
- js简单谈谈offsetleft、offsetTop和offsetParentjs大全
- jsJS操作JSON常用方法(10w阅读)js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
