vue+echarts做数据可视化,echarts拖拽生成
本文主要介绍了基于Echars实现vue的拖放数据可视化功能的相关信息。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
目录
背景
早期知识点
1.偏移(偏移)
2.鼠标事件
拖曳功能
拖曳功能
缩放功能
结束语
参考
背景
我们的产品提出了一个需求，做一个基于Echars的数据可视化，可以拖拽和缩放，为百度上线。结果就是两种结局，一种是花钱买成熟的产品(公司不出钱)，一种是自己写代码没有成熟的代码。故事即将开始，敬请期待。不，我们先放一张效果图，你看看。
前期知识点
1. offset（偏移量）
定义：当前元素在屏幕上所占的空间，如下图所示：
其中包括：
OffsetHeight:此元素在垂直方向上占据的空间，以px为单位，不包括边距。
OffsetWidth:此元素在水平方向上所占的空间，以px为单位，不包括边距。
OffsetLeft:此元素距左侧的距离，是已定位的父元素的内边框(相对绝对)。注意：如果没有定位任何父元素，则是到body元素的距离。
OffsetTop:元素与已定位的父元素的顶部和内边框之间的距离(相对绝对)。注意：如果没有定位任何父元素，则是到body元素的距离。
2. 鼠标事件
2.1 当前鼠标的坐标点
ClientX:返回鼠标接触相对于浏览器可视区域的x坐标，单位为px。该属性值可以根据用户在可视区域上的缩放行为而改变。
ClientY:返回鼠标接触相对于浏览器可视区域的Y坐标，单位为px。该属性值可以根据用户在可视区域上的缩放行为而改变。
2.2 相关的鼠标事件
Ondragstart:指定拖动元素时会发生什么。该属性调用函数drag(event ),该函数指定要拖动的数据。可以通过dataTransfer.setData()方法设置拖动数据的数据类型和值：
功能阻力(ev)
{
ev.dataTransfer.setData(Text ，ev . target . id)；
}
Ondragover:指定放置拖动数据的位置。默认情况下，数据/元素不能放在其他元素中。如果需要设置允许的放置，我们必须防止元素的默认处理。这是通过调用ondragover事件的event.preventDefault()方法来完成的：
事件. preventDefault()
Ondrop:当拖动的数据被放置时，将发生drop事件。Ondrop属性调用函数drop(event):
功能下降
{
//避免浏览器对数据的默认处理(drop事件的默认行为是作为链接打开)
ev . prevent default()；
//获取拖动的数据。该方法将任何数据集返回到setData()方法中的相同类型。
var data=ev . data transfer . get data( Text )；
//将拖动的元素追加到拖放的元素(目标元素)
ev . target . appendchild(document . getelementbyid(data))；
}
OnMouseDown:当鼠标按钮被按下时触发的事件。
OnMouseMove:鼠标移动时触发的事件。
Onmouseup:按下并释放鼠标时触发的事件。
拖拽功能
本函数以Echarts图表中的直方图为例进行说明：
首先定义可拖动的元素。
差异
El-button class= drag-button type= success draggable= true
@ dragStart . native= dragStart($ event， histogram )
条形图
/el-button
/div
注意：默认情况下不能拖动元素，所以需要将draggable属性设置为 true ，即draggable=true
dragStart(事件，类型){
event . data transfer . setdata( Text ，type)；
},
定义放置区域
div class= grid-content BG-purple-light drag-resize-area
@ drop . prevent= drop($ event) @ dragover . prevent=
div style= height:300 px；宽度：400像素 id= 直方图/格
/div
放下事件如下所示：
丢弃(事件){
const data=event . data transfer . get data( Text )；
if(data===直方图){
var myhart=echart。init(文档。getelement byid(“直方图”)；//指定图表的配置项和数据
定义变量选项=>
标题：{ text: echart入门示例 },
工具提示：{},图例：{数据：[。]销量] },
xAxis: {日期：[.]希婉-是啊羊毛衫-是啊雪纺衫-是啊中-是啊绿筠小姐-是啊-什么] },
yAxis: {}，系列：[{名称：]销量，类型：酒吧，日期：[5,20,36,10,10,20] }]
}:
//使用刚指定的配置项和数据显示图表。
myChart.setOption选项：
}
}
基于自己封装的组件的源码请看github:github哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟
效果图如下：
拖动功能
此功能用到了上面提到的offsetleft、offsettop、clientx "客户端，客户端。实现思路如下：
(1)当鼠标刚按下去时，记录当前元素距离带定位的父元素的偏左、偏上距离；以及当前鼠标在浏览器可视区的坐标clientX客户的距离。
(2)分别计算两者的差值作为偏移常量，如下：
letdisx=e . client x-El。向左偏移；
letdisy=e . client-El。offsettop
(3)监听鼠标的移动事件，获取当前鼠标距离浏览器可是区域的坐标客户x，客户(客户):然后减去偏移常量，即为当前元素的坐标
lettX=e.clientX-disX:
莱蒂=e。客户-disy；
埃尔。风格。left=tx px
埃尔。风格。top=ty px
说明：在为当前图表对象
由于本人封装了通用视图(视图)组件，详细拖拽方法代码如下：
//初始化可拖拽方法
initDrag()
letel=this .一美元；
我。onou down=(e)=>
e。预防故障();
e。目标。风格。光标=移动
//鼠标按下，计算鼠标触点距离元素左侧和顶部的距离
letdisx=e . client x-El。向左偏移；
letdisy=e . client-El。offsettop
//console.log(22222 ，文件);
文档。onou move=function(e)>
//计算需要移动的距离
lettX=e.clientX-disX:
莱蒂=e。客户-disy；
//移动当前元素
if(tx=0 tx=窗口。内宽-El。偏移宽度)>
埃尔。风格。left=tx px
}
if(ty=0 ty=window。内部高度-El。偏移高度)>
埃尔。风格。top=ty px
}
}:
//鼠标松开时，注销鼠标事件，停止元素拖拽。
document.onmouseup=function(e)>
文档。onmousemove=null:
document.onmouseup=null:
e。目标。风格。cursor= default
}:
}
},
如果想看封装的组件，请查看吉卜赛人哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟：github哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟
拖动效果如下图：
缩放功能
此功能用到了上面提到的偏距、偏高、偏左、偏顶、客户.实现思路如下：
(1)先设置可缩放的四个拖拽方框
大宀女子显示=是调整大小标志 ref= resize div tag id= resize div tag
spanclass=br/span
spanclass=bl/span
spanclass=tr/span
spanclass=tl/span
/div
其中伊兹调整大小-什么大小标志(重定大小旗标)表示是否可缩放以及是否可拖拽
(2)为每个可可缩放方框设置缩放函数，请看注释
//初始化可缩放
initResize()
letel=this .一美元；//获取当前元素
字母夹紧码=这个.$参考文献。resizedivtag。子节点参照、重定大小标签、子项节点：
for(leti=0)；伊斯帕尼奥斯。长度(I)>
这个。resizeelementfun(夹紧代码[i]，El)；//分别为四个缩放方框设置监听事件
}
},
resizeelementfun(元素，El)>
元素。onmousedown=function(ev)>
console.log(我是按下的元素)
letoev=ev 事件；
oEv。停止传播();
letoldwidth=el。offsetwidth//当前元素的宽度
letoldheight=el。偏高//当前元素的高度
控制台。log("旧宽度"-旧高度):
letoldx=oev。clientx//当前鼠标对于浏览器可视区域的x个坐标
letoldY=oEv。客户；//当前鼠标对于浏览器可视区域的然后呢坐标
letoldleft=el。offsetleft//当前元素对于父级定位元素的宽度
letoldtop=el。offsettop//当前元素对于父级定位元素的高度
console.log("左-左"-高-上):
文档。onou move=function(ev)>
//oev。停止传播()；
letoev=ev 事件；
letdisy=(老顶(oev。客户端-旧dy))；//当前缩放的元素距离定位父元素的高度
//letdisx=(老左(oev。客户端x-老左))；
letdisx=(老左(oev。客户端x-旧x))；//当前缩放的元素距离定位父元素的宽度
if(disXoldLeft oldWidth)>
disX=oldLeft旧宽度
}
if(disYoldTop oldHeight)
disY=旧顶部旧高度
}
If(element.className==tl){ //放大左上角时
El . style . width=old width-(oev . clientx-oldX) px ；
//元素宽度=缩放前的宽度-鼠标当前坐标与原始坐标之差
El . style . height=old height-(oev . clienty-oldY)“px”；
//元素宽度=缩放前的高度-鼠标当前坐标与原始坐标之差
El . style . left=disX px ；
//元素到父元素的距离=
El . style . top=disY px ；
} else if(element . class name== bl ){//左下角
El . style . width=old width-(oev . clientx-oldX) px ；
El . style . height=old height(oev . clienty-oldY) px ；
El . style . left=disX px ；
//El . style . bottom=old top(oev . clienty oldY) px ；
} else if(element . class name== tr ){//右上
El . style . width=old width(oev . clientx-oldX)“px”；
El . style . height=old height-(oev . clienty-oldY)“px”；
El . style . right=old left-(oev . clientx-oldX) px ；
El . style . top=disY px ；
} else if(element . class name== br ){//右下角
El . style . width=old width(oev . clientx-oldX)“px”；
El . style . height=old height(oev . clienty-oldY) px ；
El . style . right=old left-(oev . clientx-oldX) px ；
//El . style . bottom=old top(oev . clienty oldY) px ；
}
}
document.onmouseup=function(){
document.onmousemove=null
};
返回false；
}
},
如果你想看到封装的组件，请检查github地址：github地址。
缩放效果如下：
电子海图缩放中的问题
在vue中使用echarts图表自适应的几种基本解决方案在此不做描述。详情请参考以下链接：echarts海图适配。
结束语
本文只是粗略记录了实现数据可视化简单演示的思路。如果觉得有帮助，请下载源代码github地址。
给你喜欢的朋友一颗星，谢谢。
参考文献
https://www.jb51.net/article/201371.htm
https://www.jb51.net/article/201349.htm
本文关于vue基于Echarts的拖拽式数据可视化功能的实现就说到这里。有关vue基于Echarts的拖放式数据可视化的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。