Record the problems encountered in the development of two projects, one is echarts external call Save as picture operation, one is workflow workflow connection curve Onmouseenter and OnMouseLeave event triggered problem because of mouse move too fast.
One, the external button calls the Echarts chart's Save as the picture operation
Recently, using the Echarts library to draw a chart, depending on the requirements that you want to save the chart settings as a picture operation can be called outside the diagram, mainly in the hope that you can and the project before the download picture operation interface to maintain consistency. Then the Internet to find some methods, looked at did not meet a satisfactory. Later, suddenly thought of Echart opened the source code, can look at the source code, find the way to download, and then call not on it (may be my technology, see not only to how to directly call the method, so the source method copy down, changed, only need to pass the chart container ID can be)
Example of a Echart diagram (there is a download Picture button in the toolbar)
Please attach the code to record
//Pass Chart container idfunction Downloadimpbychart (chartid) {var myChart = Echarts.getinstancebydom (
document.getElementById (Chartid)); var url = mychart.getconnecteddataurl ({pixelratio:5,//exported picture resolution ratio, default is 1 backgroundcolor: ' #fff ',//Chart background color Excludecompone
nts:[//Save the tool component ignored in the chart, default ignore toolbar ' toolbox ', type: ' PNG '//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 Firefox if (typeof mouseevent = = = ' function ') {var evt = new MouseEvent (' click ', {view:window, bubbles:t
Rue, cancelable:false});
$a. dispatchevent (EVT); }//IE else {var html = ' + ' <body style= ' margin:0; > ' + ' ' + '
;/body> ';
var tab = window.open ();
Tab.document.write (HTML);
}
};
In this way, we can not use its own download operation, you can customize the external button, hyperlink, directly call the above method can be implemented to save the image function of the external call.
Second, Onmouseenter and OnMouseLeave moving too fast leads to incorrect timing triggering event mechanisms
The diagram above illustrates
Want the mouse to move on the curve can not only highlight the curve, but also in the mouse position to add scissors icon, press the scissors can be deleted curve. The Mouseener and MouseLeave methods used directly on the curve, and then the mouse moves quickly on multiple curves, there are many problems (scissors do not disappear when the cursor is away, and many curves become highlighted). Try to add a little more logic to determine and replace the mouseover and Mouseout methods are not useful. It suddenly occurred to me that the MouseMove method could be used. Determines whether the mouse is within the range of the scissors chart, and if the curve is highlighted, no longer, all curves revert to the default style. And then it worked. The problem that has plagued me for a whole day has finally been solved. ( since MouseMove needs to be constantly listening and triggering events while the mouse is moving, it is best to have a status indicator indicating the way in which the highlight curve and the drawing of the scissors are called again.) The timing of the call is to set a global variable to true when the mouse enters the curve, and thereafter the MouseMove operation is determined according to the variable.
Log some key code
The mouse goes into the highlight and draws the scissors chart
$ (document). On ("MouseEnter", "svg. Curve", function (e) {//will revert to original state $ ("SVG. Node") after each entry. 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");
}); The edit state needs to display an operable icon 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 mouse to determine trigger action
$ (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 if not in the Scissors chart area, 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.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, in fact, the problem of workflow, if only the highlight curve, MouseEnter and MouseLeave effect is enough. In the example, however, you would have to overwrite a scissors icon on the curve, which would conflict with the MouseEnter and MouseLeave of the original curve. Because the trigger element of the delete curve is the scissors icon.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
