Zeichnen Sie die Probleme auf, die bei der Entwicklung von zwei Projekten auftreten. Einer ist der externe Ruf von Echarts, um als Bildbetrieb zu speichern, und der andere ist die Workflow -Workflow -Verbindungskurve Onmouseenter und OnmousEleave -Ereignisse, die aufgrund der schnellen Mausbewegung ausgelöst werden.
1. Externe Taste Anrufe Echarts -Diagrammsparen als Bildvorgänge
Vor kurzem habe ich die Echarts -Bibliothek verwendet, um Diagramme zu zeichnen. Nach den Anforderungen hoffe ich, dass die Diagrammeinstellungen als Bildoperation gespeichert werden können, die außerhalb des Diagramms aufgerufen werden können, vor allem, weil ich hoffe, dass sie mit der Download -Bildoperation vor dem Projekt übereinstimmen kann. Dann habe ich online nach Methoden gesucht, aber ich habe niemanden getroffen, mit dem ich zufrieden sein konnte. Später dachte ich plötzlich, dass Echart den Quellcode geöffnet habe.
Beispiel für Echart -Diagramm -Darstellung (In der Symbolleiste befindet sich eine Bilde des Download -Bildes)
Fügen Sie den Code an, um ihn aufzuzeichnen
// Die Diagramm Container idfunction downloadImpbychart (chartid) {var mychart = echarts.getInstanceBydom (Dokument.GetElementById (ChartId)); var url = myChart.getConnectedDataurl ({Pixelratio: 5, // Das exportierte Bildauflösungsverhältnis [##FFFF ', Das Chart -Auflösungsverhältnis [#FFFF', Das Charts -Bilde -Ausfall) [#FFFF ', Das Chart -Bilde -Ausschluss:'##FFF ', Das. // Die Werkzeugkomponente ignoriert beim Speichern des Diagramms wird die Symbolleiste 'Toolbox' standardmäßig ignoriert], Typ: 'png' // Der Bildtyp unterstützt PNG und JPEG}); var $ a = document.createelement ('a'); var type = 'png'; + Typ; $ a.target = '_blank'; style = "margin: 0;"> ' +' <img src = "' + url +'" style = "max-Width: 100%;" /> '+' </body> '; var tab = window.open (); tab.document.write (html);}};Auf diese Weise können wir einen eigenen Download -Betrieb verwenden und Schaltflächen und Hyperlinks extern anpassen und die oben genannte Methode direkt aufrufen, um den externen Anruf zum Speichern von Bildern zu realisieren.
2. Onmouseger und OnmousEleave bewegen sich zu schnell, wodurch der Ereignismechanismus das richtige Timing auslöst.
Lassen Sie es uns oben erklären
Ich hoffe, dass, wenn sich die Maus auf der Kurve bewegt, nicht nur die Kurve hervorheben, sondern auch das Scherensymbol in die Mausposition hinzufügt, damit die Kurve gelöscht werden kann, wenn die Schere gedrückt wird. Die Mousener- und Mouseleave -Methoden, die zuvor direkt auf der Kurve verwendet wurden, und dann treten bei mehreren Kurven die Maus schnell auf, viele Probleme (Scheren verschwinden nicht, wenn der Cursor verlässt, und mehrere Kurven werden hervorgehoben). Nachdem sie versucht haben, einige logische Urteile hinzuzufügen und Mausover- und Mausout -Methoden zu ändern, funktionieren sie nicht. Später dachte ich plötzlich, dass ich die Mousemove -Methode verwenden könnte. Bestimmen Sie, ob sich die Maus im Bereich des Scherendiagramms befindet. Wenn ja, markieren Sie die Kurve. Wenn es nicht mehr ist, kehren alle Kurven zum Standardstil zurück. Dann gelang es tatsächlich. Das Problem, das den ganzen Tag geplagt worden war, wurde endlich gelöst. (Da MousEmove beim Bewegen der Maus ständig zuhören und Ereignisse auslösen muss, ist es am besten, ein Statusflag zu haben, das angibt, dass die Methode zum Hervorheben von Kurven und Zeichnen von Scheren in diesem Zustand aufgerufen wird. Die Anrufzeit in der Abbildung ist, dass die Maus, wenn die Maus in die Kurve eingeht, eine globale Variable auf True einstellen und die nachfolgende Mousemove -Operation basierend auf der Variablen ermittelt wird)
Notieren Sie einige Schlüsselcodes
Die Maus tritt in das Highlight ein und zeichnet die Scherenkarte
$ (document) .on ("mouseenter", "svg .curve", function (e) {// Jedes Mal, wenn Sie eingeben, wird es in seinen ursprünglichen Zustand $ ("svg .node"). Jede (Funktion () {this.setattribute ("Opazität", "1");}); $. 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 ("Opazität", "1"); e) .Attr ("Klasse", "Kurve");}); // Im Bearbeitungsstatus muss das operative Symbol angezeigt werden if (args.state == "bearbeiten") {del_curve.ref_curve = this; del_curve.has_del_curve = true; if ($ ("#del-curve-icon"). Länge> 0) {$ ("#del-curve-icon"). E.Pagex-Obj.Offset (). Links-10, Farbe: "#ff0000"}). show ();} else {var del_icon = $ ("<i id = 'del-curve-icon' class = 'fa fa fa-scissors'> </i>"). CSS ({). E.Pagex-Obj.offset (). Links-10, Farbe: "#ff0000", fontsize: "20px"}); obj.parent (). append (del_icon);} del_cur ve.xaxis = $ ("#del-curve-icon"). offset () Markieren Sie die aktuelle Kurve if ($ (this) .attr ("start")! = undefined && $ (this) .attr ("end")! 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] .setatt Rippen ("Opazität", "0,1");}); Obj.Children ("G"). EQ (0) .Children ("G"). EQ (0) .before ($ ($ (this)); $ (this) .attr ("Klasse", "Kurve curve-hover "); var in_node = $ ("#"+$ (this) .attr (" start ")). Kinder (" g "). EQ (0) .Children (" Kreis "). EQ (1); in_node.attr (" Klasse ", in_node.attr (" Klasse ")+" Node-Hover "); $ ("#"+$ (this) .attr (" starten ") [0] .SetatTribute (" Opazität "," 1 "); var out_node = $ ("#"+$ (this) .attr ("Ende")). Kinder ("G"). EQ (0) .Children ("Circle"). EQ (1); out_node.attr ("Klasse", out_node.attr ("Klasse")+" Node-Hover "); $ ("#"+$ (this) .Attr (" End ") [0] .SetAttribute (" Opazität "," 1 ");}});Bewegen Sie die Maus, um den Abzugsvorgang zu bestimmen
$ (Dokument) .on ("Mousemove", Funktion (e) {if (del_curve.has_del_curve) {var del_icon_width = $ ("#del curve-icon"). width (); 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.has.has.has_curve = svg.has_delve_curve = sw_curve.has_del_curve = | .node "). Jeweils (Funktion () {this.setAttribute (" Opazität "," 1 ");}); $. Jede (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 ("Opazität", "1"); $ ("#"+ out_node_id+link.output.pointname+in_node_id+link.output.Pointname) .attr ("Klasse", "curve");}); $ (del_curve.ref_curve) .attr ("Klasse", "Curve"); var in_node = $ ("#"+$ (del_curve.ref_curve) .attr ("start")). Kinder ("g"). EQ (0) .Children ("Kreis"). EQ (1); in_Node.attr ("Klasse", in_node.attr ("Klasse") out_node = $ ("#"+$ (del_curve.ref_curve) .Attr ("End")). Kinder ("G"). EQ (0) .Children ("Circle"). EQ (1); Out_nod E.Attr ("Klasse", out_node.attr ("Klasse"). Ersetzen ("Node-Hover", ""). Trim ()); $ ("#del-curve-icon"). hide ();}}})OK, in der Tat, das Workflow -Problem, wenn Sie nur die Kurve hervorheben, reichen die Auswirkungen von Mouseenter und Mouselave aus. In dem Beispiel müssen Sie jedoch ein Scherensymbol auf der Kurve abdecken, das mit dem Mauszug und Mouselave der ursprünglichen Kurve in Konflikt steht. Da das Triggerelement zum Löschen der Kurve das Scherensymbol ist.