首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

Posted in Javascript onAugust 29, 2016

记录两个项目开发中遇到的问题，一个是ECharts外部调用保存为图片操作，一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题。

一、外部按钮调用ECharts图表的保存为图片操作

最近使用ECharts库绘制图表，依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致。然后上网找了一些方法，看了看也没遇到一个可以满意的。后来，突然想到了echart开放了源码，可以看看源码，找到下载的方法，然后调用不就可以了（可能是我技术忒次，看了看不只到如何直接调用方法，所以把源方法copy下来，改了改，只需要传递图表的容器id即可）

echart图表示例（工具栏中有下载图片按钮）

快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

附上代码记录一下

//传递图表容器idfunction downloadImpByChart(chartId){
var myChart = echarts.getInstanceByDom(document.getElementById(chartId));
var url = myChart.getConnectedDataURL({
pixelRatio: 5,//导出的图片分辨率比率,默认是1
backgroundColor: '#fff',
//图表背景色
excludeComponents:[
//保存图表时忽略的工具组件,默认忽略工具栏
'toolbox'
],
type:'png'
//图片类型支持png和jpeg
});
var $a = document.createElement('a');
var type = 'png';
$a.download = myChart.getOption().title[0].text + '.' + type;
$a.target = '_blank';
$a.href = url;
// Chrome and Firefox
if (typeof MouseEvent === 'function') {
var evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: false
});
$a.dispatchEvent(evt);
}
// IE
else {
var html = ''
+ '<body style="margin:0;">'
+ '<img src="' + url + '" style="max-width:100%;" title="' + myChart.getOption().title[0].text + '" />'
+ '</body>';
var tab = window.open();
tab.document.write(html);
}
};

这样，我们就可以不使用它自带的下载操作了，就可以在外部自定义按钮、超链接，直接调用上面的方法就可以实现外部调用保存图片功能了。

二、onmouseenter和onmouseleave移动速度过快导致不能正确的时机触发事件机制

上图说明一下

快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

希望鼠标在曲线上移动时不仅可以高亮展示曲线，还要在鼠标位置增加剪刀图标，按下剪刀时可以删除曲线。之前就直接在曲线上使用的mouseener和mouseleave方法，然后鼠标在多条曲线上快速移动时，就会出现诸多问题（剪刀不会在光标离开时消失，多条曲线都变为高亮效果）。试了多加上一些逻辑判定和换用mouseover和mouseout方法均不管用。后来突然想到，可以使用mousemove方法。判定鼠标是否在剪刀图表的区域范围内，若在则高亮该条曲线，不再，则所有曲线恢复默认样式。然后居然成功了。困扰了一整天的问题终于解决了。（由于mousemove在鼠标移动时需要不断的去监听和触发事件，所以最好可以有一个状态标识表明在该状态在再去调用高亮曲线和绘制剪刀的方法。图上的调用时机是，当鼠标进入曲线时，设定一个全局变量为true，此后的mousemove操作根据该变量判定）

记录一下部分关键代码

鼠标就进入高亮及绘制剪刀图表

$(document).on("mouseenter","svg .curve",function(e){
//每次进入后都将恢复成原始状态
$("svg .node").each(function(){
this.setAttribute("opacity","1");
});
$.each(relation.links,function(l,link){
var in_node_id=link.input.nodeId;
var out_node_id=link.output.nodeId;
$("#"+out_node_id+link.output.pointName+in_node_id+link.input.pointName)[0].setAttribute("opacity","1");
$("#"+out_node_id+link.output.pointName+in_node_id+link.input.pointName).attr("class","curve");
});
//编辑状态下需要显示可操作图标
if(args.state=="edit"){
del_Curve.ref_Curve=this;
del_Curve.has_del_curve=true;
if($("#del-curve-icon").length>0){
$("#del-curve-icon").css({
position:"absolute",
top: e.pageY-obj.offset().top-10,
left: e.pageX-obj.offset().left-10,
color:"#ff0000"
}).show();
}else{
var del_icon=$("<i id='del-curve-icon' class='fa fa-scissors'></i>").css({
position:"absolute",
top: e.pageY-obj.offset().top-10,
left: e.pageX-obj.offset().left-10,
color:"#ff0000",
fontSize:"20px"
});
obj.parent().append(del_icon);
}
del_Curve.xAxis=$("#del-curve-icon").offset().left;
del_Curve.yAxis=$("#del-curve-icon").offset().top;
}
//然后高亮当前曲线
if($(this).attr("start")!=undefined && $(this).attr("end")!=undefined){
//设置透明度
$("svg .node").each(function(){
this.setAttribute("opacity","0.1");
});
$.each(relation.links,function(l,link){
var in_node_id=link.input.nodeId;
var out_node_id=link.output.nodeId;
$("#"+out_node_id+link.output.pointName+in_node_id+link.input.pointName)[0].setAttribute("opacity","0.1");
});
obj.children("g").eq(0).children("g").eq(0).before($(this));
$(this).attr("class","curve curve-hover");
var in_node=$("#"+$(this).attr("start")).children("g").eq(0).children("circle").eq(1);
in_node.attr("class",in_node.attr("class")+" node-hover");
$("#"+$(this).attr("start"))[0].setAttribute("opacity","1");
var out_node=$("#"+$(this).attr("end")).children("g").eq(0).children("circle").eq(1);
out_node.attr("class",out_node.attr("class")+" node-hover");
$("#"+$(this).attr("end"))[0].setAttribute("opacity","1");
}
});

移动鼠标判定触发操作

$(document).on("mousemove",function(e){if(del_Curve.has_del_curve){
var del_icon_width=$("#del-curve-icon").width();
var del_icon_height=$("#del-curve-icon").height()



//判定当前光标位置,若不在剪刀图表区域内则恢复默认样式
if(e.pageX<del_Curve.xAxis || e.pageX>(del_Curve.xAxis+del_icon_width) || e.pageY<del_Curve.yAxis || e.pageY>(del_Curve.yAxis+del_icon_height)){
del_Curve.has_del_curve=false;
$("svg .node").each(function(){
this.setAttribute("opacity","1");
});
$.each(relation.links,function(l,link){
var in_node_id=link.input.nodeId;
var out_node_id=link.output.nodeId;
$("#"+out_node_id+link.output.pointName+in_node_id+link.input.pointName)[0].setAttribute("opacity","1");
$("#"+out_node_id+link.output.pointName+in_node_id+link.input.pointName).attr("class","curve");
});
$(del_Curve.ref_Curve).attr("class","curve");
var in_node=$("#"+$(del_Curve.ref_Curve).attr("start")).children("g").eq(0).children("circle").eq(1);
in_node.attr("class",in_node.attr("class").replace("node-hover","").trim());
var out_node=$("#"+$(del_Curve.ref_Curve).attr("end")).children("g").eq(0).children("circle").eq(1);
out_node.attr("class",out_node.attr("class").replace("node-hover","").trim());
$("#del-curve-icon").hide();
}
}
})

okay,其实工作流的问题，如果单单只是高亮曲线，mouseenter和mouseleave的效果就足够了。不过示例中，需要在曲线上覆盖一个剪刀图标，这就会跟原来曲线的mouseenter和mouseleave有冲突。因为删除曲线的触发元素是剪刀图标。

快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

- Author -

Jeremy阳仔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery学习3：操作元素属性和特性
Feb 07 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
轮播图组件js代码
Aug 08 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 #Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 #Javascript
对js中回调函数的一些看法
Aug 29 #Javascript
Web打印解决方案之普通报表打印功能
Aug 29 #Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 #Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 #Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 #Javascript
HarmonyOS(1) RustDesk(1) Debian(1) 蓝牙耳机(1) 蓝牙(1) 虚拟键盘(1) 华为(1) 鸿蒙3.0(1) 鸿蒙(2) xhunter1.sys(1)
You might like
php过滤危险html代码
2008/08/18 PHP
php动态生成JavaScript代码
2009/03/09 PHP
php 将excel导入mysql
2009/11/09 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
ECMAScript 5严格模式（Strict Mode）介绍
2015/03/02 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
wxPython实现文本框基础组件
2019/11/18 Python
python 初始化一个定长的数组实例
2019/12/02 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
在校生党员自我评价
2013/09/25 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
环保专项行动方案
2014/05/12 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
审美与表现自我评价
2015/03/09 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
入党心得体会
2019/06/20 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript