Home > Developer > JavaScript
How to quickly move the mouse to trigger the problem and solve the problem (ECharts external call is saved as image operations and workflow wiring: mouseenter and mouseleave), echartsmouseenter
Record problems encountered during the development of two projects. One is that the external call of ECharts is saved as an image operation, and the other is that the workflow connection curves onmouseenter and onmouseleave events are triggered due to excessive mouse movement.
1. Save the ECharts chart as an image by calling the external button
Recently, I used the ECharts library to draw charts. I want to save the chart settings as images based on my needs and call them outside the chart. I mainly want to make them consistent with the image download operation interface before the project. Then I found some methods on the internet, and I was not satisfied with it. Later, I suddenly thought of the open source code of echart. I can look at the source code, find the download method, and then call it. (maybe it's my technology. I also looked at how to call the method directly, so copy the source method and modify it. You only need to pass the container id of the chart)
Echart chart example (the download image button is available in the toolbar)
Record the code
// Transfer the chart container idfunction downloadImpByChart (chartId) {var myChart = echarts. getInstanceByDom (document. getElementById (chartId); var url = myChart. getConnectedDataURL ({pixelRatio: 5, // The exported image resolution ratio. The default value is 1 backgroundColor: '# fff'. // The Chart background color excludeComponents: [// tool components ignored when saving the chart. the 'toolbox' toolbar is ignored by default.], type: 'png '// The image type supports png and jpeg }); var $ a = document. createElement ('A'); var type = 'png '; $. download = myChart. getOption (). title [0]. text + '. '+ typeappsa.tar get =' _ blank '; $. href = url; // Chrome and Firefoxif (typeof MouseEvent === 'function') {var evt = new MouseEvent ('click', {view: window, bubbles: true, cancelable: false}); $. dispatchEvent (evt);} // IEelse {var html = ''+ '<body style =" margin: 0; "> '+' ' + '</body>'; var tab = publish open(publish publish tab.doc ument. write (html );}};
In this way, we can choose not to use its own download operation. We can use external custom buttons and hyperlinks to directly call the above method to implement the image saving function.
Ii. How to trigger the event mechanism when onmouseenter and onmouseleave are moving too fast
Description
If you want to move the mouse over the curve, you can not only highlight the curve, but also add a scissors icon at the mouse position. You can delete the curve when you press the scissors. Previously, the mouseener and mouseleave methods were used directly on the curve. When you move the mouse over multiple curves, there will be many problems (scissors will not disappear when the cursor leaves, multiple curves are highlighted ). The mouseover and mouseout methods are not used. Later, I suddenly thought that the mousemove method could be used. Determines whether the mouse is in the area of the scissors chart. If the mouse is in the area, the curve is highlighted and no longer displayed. All curves are restored to the default style. Then it succeeded. The problem that plagued the whole day was finally solved. (Because mousemove needs to constantly listen to and trigger events when moving the mouse, it is best to have a status icon indicating that the method of highlighting the curve and drawing scissors is then called in this status. The call time shown in the figure is that when the mouse enters the curve, a global variable is set to true, and then the mousemove operation is determined based on the variable)
Record some key code
Click to highlight and draw a scissors chart
$ (Document ). on ("mouseenter", "svg. curve ", function (e) {// after each entry, it is restored to the 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 + lin K. input. pointName ). attr ("class", "curve") ;}); // The operational 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" placement .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) {// sets the 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-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 ");}});
Trigger by moving the mouse
$ (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 () // determines the current cursor position. if it is not in the scissors chart area, 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 is actually a workflow problem. If you just highlight the curve, the effects of mouseenter and mouseleave are enough. In this example, a scissors icon needs to be overwritten on the curve, which will conflict with the mouseenter and mouseleave of the original curve. Because the trigger element for deleting a 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
