ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法
记录两个项目开发中遇到的问题，一个是ECharts外部调用保存为图片操作，一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题。
一、外部按钮调用ECharts图表的保存为图片操作
最近使用ECharts库绘制图表，依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致。然后上网找了一些方法，看了看也没遇到一个可以满意的。后来，突然想到了echart开放了源码，可以看看源码，找到下载的方法，然后调用不就可以了（可能是我技术忒次，看了看不只到如何直接调用方法，所以把源方法copy下来，改了改，只需要传递图表的容器id即可）
echart图表示例（工具栏中有下载图片按钮）
附上代码记录一下
//传递图表容器id
function 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移动速度过快导致不能正确的时机触发事件机制
上图说明一下
希望鼠标在曲线上移动时不仅可以高亮展示曲线，还要在鼠标位置增加剪刀图标，按下剪刀时可以删除曲线。之前就直接在曲线上使用的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由于鼠标移动速度过快导致问题解决办法的更多相关文章
- javacpp-opencv图像处理之1：实时视频添加文字水印并截取视频图像保存成图片，实现文字水印的字体、位置、大小、粗度、翻转、平滑等操作
欢迎大家积极开心的加入讨论群 群号:371249677 (点击这里进群) javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置. ...
- wordpress自动保存远程图片插件 DX-auto-save-images
wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...
- Android应用程序开发之图片操作（一）——Bitmap，surfaceview，imageview，Canvas
Android应用程序开发之图片操作(一)——Bitmap,surfaceview,imageview,Canvas 1,Bitmap对象的获取 首先说一下Bitmap,Bitmap是Androi ...
- bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...
- 三种方法，刷新 Android 的 MediaStore！让你保存的图片立即出现在相册里！
公众号原标题:测试:"系统相册里怎么看不到我刚保存的图片,是我操作不对吗?" 一.序 Hi,大家好,我是承香墨影! App 内,创建一个文件并保存文件到本地的需求,是很常见的 I/ ...
- C# 创建EXCEL图表并保存为图片
数据表格能够清晰的呈现数据信息,但是我们对于一些繁杂多变的数据想要很直观的看到数据变化走势或者数据的占比时,数据图表会更具代表性,并且在呈现数据信息上也更形象,也能获取更多纯数字信息所不能直接展现的信 ...
- 修改css的（屏蔽）overflow: hidden;实现浏览器能把网页全图保存成图片
摘要: 1.项目需要,需要对网页内容“下载”保存成全图片 2.QQ浏览器等主流浏览器都支持这种下载保存功能 3.项目需要场景:编写好的项目维护文档,放在服务器上.如果是txt不能带图片可视化,如果wo ...
- media静态文件统一管理 操作内存的流 - StringIO | BytesIO PIL：python图片操作库 前端解析二进制流图片（了解） Admin自动化数据管理界面
一.media ''' 1. 将用户上传的所有静态文件统一管理 -- settings.py -- MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 2. 服务 ...
- java图片操作--生成与原图对称的图片
java图片操作--生成与原图对称的图片 package com.pay.common.util; import java.awt.image.BufferedImage; import java.i ...
随机推荐
- eclipse build workspace太慢或者 js出错问题解决
1.js文件错误解决办法 右键项目->properties->Builders(注:JavaScript Validator也会引起 build workspace太慢) 2.Eclips ...
- 窥探Swift编程之强大的Switch
之前初识Swift中的Switch语句时,真的是让人眼前一亮,Swift中Switch语句有好多特有而且特好用的功能.说到Switch, 只要是写过程序的小伙伴对Switch并不陌生.其在程序中的出镜 ...
- DDD 领域驱动设计－看我如何应对业务需求变化，领域模型调整？
写在前面 上一篇:DDD 领域驱动设计-看我如何应对业务需求变化,愚蠢的应对? "愚蠢的应对",这个标题是我后来补充上的,博文中除了描述需求变化.愚蠢应对和一些思考,确实没有实质性 ...
- II7.0 发布 MVC 4.0 三个小问题记录
1,403.14-Forbidden Web 服务器被配置为不列出此目录的内容 根据提示更改:使用 IIS 管理器启用目录浏览. 打开 IIS 管理器. 在“功能”视图中,双击“目录浏览”. 在“目录 ...
- 怎样录制屏幕并将结果保存为Gif
怎样录制屏幕 并将结果保存为GIF 大前天写文章,需要把PPT的翻转页面截成动态图.我一开始就想到保存文件肯定是GIF.但是如何生成呢?素材又从哪里来?以前自己感兴趣做过把一组连拍的图片做成动态图,再 ...
- js 获取当前的时间
第一个小程序,用js获取当前的时间,,比较特殊的是 月是从0开始算的,显示的时候要加1,获取日用getDate(),获取周 getDay(), 直接上代码 <!DOCTYPE html> ...
- ng1和ng2的部分对比----angular2系列（四)
前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...
- 【NET MVC】View
通过阅读一些书籍,结合源代码,稍微深入的学习了Asp.Net MVC中的视图View 任何类型的响应都可以利用当前HttpResponse来响应,MVC可以通过Controller的Response属 ...
- Oracle丢失重做日志的几种场景恢复
实验环境:RHEL6.4 + Oracle 11.2.0.4 一.丢失重做日志组中成员 1.1 故障模拟 1.2 处理方法 1.3 实际处理过程 二.丢失重做日志组 2.1 丢失INACTIVE重做日 ...
- 1Z0-053 争议题目解析699
1Z0-053 争议题目解析699 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 699.Your database is using a default temporary ta ...