个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
28
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章vue基于Echarts的拖拽数据可视化功能实现由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，故事即将开始，敬请期待......。 不，还是先上一张效果图吧，请看...... 。
定义：当前元素在屏幕上占用的空间，如下图:
其中:
offsetHeight: 该元素在垂直方向上的占用的空间，单位为px，不包括margin.
offsetWidth：该元素在水平方向上的占用空间，单位为px，不包括margin.
offsetLeft: 该元素距离左侧并且是定位过（relative || absolute）的父元素内边框的距离。注意：如果父元素中没有一个是定位的，则是距离body元素的距离.
offsetTop：该元素距离顶部并且是定位过（relative || absolute）的父元素内边框的距离。注意：如果父元素中没有一个是定位的，则是距离body元素的距离.
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.zzvips.com/article/209675.html 。
到此这篇vue基于Echarts的拖拽数据可视化功能实现的文章就介绍到这了,更多相关vue基于Echarts拖拽数据可视化内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://juejin.cn/post/6901793967281537038 。
最后此篇关于vue基于Echarts的拖拽数据可视化功能实现的文章就讲到这里了,如果你想了解更多关于vue基于Echarts的拖拽数据可视化功能实现的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
28
4
0
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代，并在对当前
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗？ struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？ 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。
我是一名优秀的程序员,十分优秀！