快速移動鼠標(biāo)觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave)
記錄兩個項目開發(fā)中遇到的問題,一個是ECharts外部調(diào)用保存為圖片操作,一個是workflow工作流連接曲線onmouseenter和onmouseleave事件由于鼠標(biāo)移動過快觸發(fā)問題。
一、外部按鈕調(diào)用ECharts圖表的保存為圖片操作
最近使用ECharts庫繪制圖表,依據(jù)需求希望可以把圖表設(shè)置的保存為圖片操作可以在圖表外部調(diào)用,主要是希望可以和項目之前的下載圖片操作界面保持一致。然后上網(wǎng)找了一些方法,看了看也沒遇到一個可以滿意的。后來,突然想到了echart開放了源碼,可以看看源碼,找到下載的方法,然后調(diào)用不就可以了(可能是我技術(shù)忒次,看了看不只到如何直接調(diào)用方法,所以把源方法copy下來,改了改,只需要傳遞圖表的容器id即可)
echart圖表示例(工具欄中有下載圖片按鈕)

附上代碼記錄一下
//傳遞圖表容器idfunction downloadImpByChart(chartId){
var myChart = echarts.getInstanceByDom(document.getElementById(chartId));
var url = myChart.getConnectedDataURL({
pixelRatio: 5, //導(dǎo)出的圖片分辨率比率,默認(rèn)是1
backgroundColor: '#fff', //圖表背景色
excludeComponents:[ //保存圖表時忽略的工具組件,默認(rèn)忽略工具欄
'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);
}
};
這樣,我們就可以不使用它自帶的下載操作了,就可以在外部自定義按鈕、超鏈接,直接調(diào)用上面的方法就可以實現(xiàn)外部調(diào)用保存圖片功能了。
二、onmouseenter和onmouseleave移動速度過快導(dǎo)致不能正確的時機觸發(fā)事件機制
上圖說明一下

希望鼠標(biāo)在曲線上移動時不僅可以高亮展示曲線,還要在鼠標(biāo)位置增加剪刀圖標(biāo),按下剪刀時可以刪除曲線。之前就直接在曲線上使用的mouseener和mouseleave方法,然后鼠標(biāo)在多條曲線上快速移動時,就會出現(xiàn)諸多問題(剪刀不會在光標(biāo)離開時消失,多條曲線都變?yōu)楦吡列Ч?。試了多加上一些邏輯判定和換用mouseover和mouseout方法均不管用。后來突然想到,可以使用mousemove方法。判定鼠標(biāo)是否在剪刀圖表的區(qū)域范圍內(nèi),若在則高亮該條曲線,不再,則所有曲線恢復(fù)默認(rèn)樣式。然后居然成功了。困擾了一整天的問題終于解決了。(由于mousemove在鼠標(biāo)移動時需要不斷的去監(jiān)聽和觸發(fā)事件,所以最好可以有一個狀態(tài)標(biāo)識表明在該狀態(tài)在再去調(diào)用高亮曲線和繪制剪刀的方法。圖上的調(diào)用時機是,當(dāng)鼠標(biāo)進(jìn)入曲線時,設(shè)定一個全局變量為true,此后的mousemove操作根據(jù)該變量判定)
記錄一下部分關(guān)鍵代碼
鼠標(biāo)就進(jìn)入高亮及繪制剪刀圖表
$(document).on("mouseenter","svg .curve",function(e){
//每次進(jìn)入后都將恢復(fù)成原始狀態(tài)
$("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");
});
//編輯狀態(tài)下需要顯示可操作圖標(biāo)
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;
}
//然后高亮當(dāng)前曲線
if($(this).attr("start")!=undefined && $(this).attr("end")!=undefined){
//設(shè)置透明度
$("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");
}
});
移動鼠標(biāo)判定觸發(fā)操作
$(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() //判定當(dāng)前光標(biāo)位置,若不在剪刀圖表區(qū)域內(nèi)則恢復(fù)默認(rèn)樣式
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的效果就足夠了。不過示例中,需要在曲線上覆蓋一個剪刀圖標(biāo),這就會跟原來曲線的mouseenter和mouseleave有沖突。因為刪除曲線的觸發(fā)元素是剪刀圖標(biāo)。
- 淺談JQ中mouseover和mouseenter的區(qū)別
- 關(guān)于事件mouseover ,mouseout ,mouseenter,mouseleave的區(qū)別
- Jquery利用mouseenter和mouseleave實現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點擊
- 為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼
- 跨瀏覽器的 mouseenter mouseleave 以及 compareDocumentPosition的使用說明
- javascript 兼容FF的onmouseenter和onmouseleave的代碼
- javascript中mouseenter與mouseover的異同
相關(guān)文章
鋒利的jQuery 要點歸納(三) jQuery中的事件和動畫(上:事件篇)
鋒利的jQuery 要點歸納 jQuery中的事件和動畫(上:事件篇)2010-03-03
通過XMLHttpRequest和jQuery實現(xiàn)ajax的幾種方式
AJAX大家已經(jīng)都知道了,是為了實現(xiàn)異步通訊,提高用戶體驗度,而將很多舊知識(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一個新的知識框架。而,XMLHttpRequest對象則是其中的重重之中,本篇文章主要給大家介紹通過XMLHttpRequest和jQuery實現(xiàn)ajax的幾種方式2015-08-08
jquery實現(xiàn)聯(lián)想詞搜索框和搜索結(jié)果分頁的示例
今天小編就為大家分享一篇jquery實現(xiàn)聯(lián)想詞搜索框和搜索結(jié)果分頁的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
MultiSelect左右選擇控件的設(shè)計與實現(xiàn)介紹
由于項目中用到左右選擇的控件,網(wǎng)上找了一些相關(guān)的實現(xiàn),基本上有兩個:1、基于JQuery UI的控件2、某個兄弟手寫的一個控件,具體實現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06

