Record the problems encountered in the development of two projects. One is the external call of ECharts to save as image operation, and the other is the workflow workflow connection curve onmouseenter and onmouseleave events triggered due to the fast mouse movement.
1. External button calls ECharts chart saving as picture operation
Recently, I used the ECharts library to draw charts. According to the requirements, I hope that the chart settings can be saved as an image operation can be called outside the chart, mainly because I hope that it can be consistent with the download image operation interface before the project. Then I looked for some methods online, but I didn’t meet anyone I could be satisfied with. Later, I suddenly thought that echart opened the source code, you can look at the source code, find the download method, and then call it (maybe because I was very technically, and I didn’t just look at how to call the method directly, so I copied the source method and changed it, and I just needed to pass the container id of the chart)
Echart diagram representation example (there is a download picture button in the toolbar)
Attach the code to record it
//Pass the chart container idfunction downloadImpByChart(chartId){var myChart = echarts.getInstanceByDom(document.getElementById(chartId));var url = myChart.getConnectedDataURL({pixelRatio: 5, //The exported image resolution ratio is 1 backgroundColor: '#fff', //The chart background color excludeComponents:[ //The tool component ignored when saving the chart, the toolbar 'toolbox' is ignored by default], type:'png' //The picture type supports png and 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 Firefoxif (typeof MouseEvent === 'function') {var evt = new MouseEvent('click', {view: window,bubbles: true,cancelable: false});$a.dispatchEvent(evt);}// IEelse {var html = ''+ '<body style="margin:0;">'+ '<img src="' + url + '" style="max-width:100%;" />'+ '</body>';var tab = window.open();tab.document.write(html);}};In this way, we can use its own download operation, and can customize buttons and hyperlinks externally, and directly call the above method to realize the external call to save pictures.
2. Onmouseenter and onmouseleave move too fast, causing the event mechanism to trigger the correct timing.
Let's explain it above
I hope that when the mouse moves on the curve, it can not only highlight the curve, but also add the scissor icon to the mouse position, so that the curve can be deleted when the scissors are pressed. The mouseener and mouseleave methods that were used directly on the curve before, and then when the mouse moves quickly on multiple curves, many problems will occur (scissors will not disappear when the cursor leaves, and multiple curves will become highlighted). After trying to add some logical judgments and changing mouseover and mouseout methods, they will not work. Later I suddenly thought that I could use the mousemove method. Determine whether the mouse is within the area of the scissors chart. If it is, highlight the curve. If it is no longer, all curves will return to the default style. Then it succeeded. The problem that had been plagued by all day was finally solved. (Since mousemove needs to constantly listen and trigger events when moving the mouse, it is best to have a status flag indicating that the method of highlighting curves and drawing scissors is called in this state. The call time on the figure is that when the mouse enters the curve, set a global variable to true, and the subsequent mousemove operation is determined based on the variable)
Record some key codes
The mouse enters the highlight and draws the scissors chart
$(document).on("mouseenter","svg .curve",function(e){//Every time you enter, it will be restored to its original state $("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.pointNam e).attr("class","curve");});//In the edit state, the operable icon needs to be displayed 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;}//Then highlight the current curve if($(this).attr("start")!=undefined && $(this).attr("end")!=undefined){//Set transparency $("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");}});Move the mouse to determine the trigger operation
$(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() //Determine the current cursor position, and restore the default style 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.output.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();}}})OK, in fact, the workflow problem, if you just highlight the curve, the effects of mouseenter and mouseleave are enough. However, in the example, you need to cover a scissor icon on the curve, which will conflict with the mouseenter and mouseleave of the original curve. Because the trigger element for deleting the curve is the scissors icon.