2つのプロジェクトの開発で発生した問題を記録します。 1つは、画像操作として保存するEchartsの外部呼び出しであり、もう1つはマウスエンテルのワークフローワークフロー接続曲線で、マウスの動きが高速でトリガーされるイベントとオンマスリーブイベントです。
1.外部ボタンは、画像操作としてエチャートチャートの保存を呼び出します
最近、Echartsライブラリを使用してチャートを描画しました。要件に応じて、イメージ操作としてチャートの設定を保存できることを願っています。これは、主にプロジェクトの前にダウンロード画像操作インターフェイスと一致することを願っています。それから私はオンラインでいくつかの方法を探しましたが、私は満足できる人には会わなかった。後で、Echartがソースコードを開いて、ソースコードを見てダウンロード方法を見つけてから呼び出すことができると突然考えました（たぶん、私は非常に技術的であり、メソッドを直接呼び出す方法を見ただけでなく、ソースメソッドをコピーして変更しました。
ECHARTダイアグラム表現の例（ツールバーにダウンロード画像ボタンがあります）
コードを添付して記録します
//チャートコンテナidfunction downloadimpbychart（chartid）{var mychart = echarts.getinstancebydom（document.getElementbyId（chartid））; var url = mychart.getConnectedDataurl（{pixelratio：5、//エクスポートされた画像解像度は1バックグラウンドラットです。除外概要：[//ツールコンポーネントはチャートを保存するときに無視されます、ツールバー「ツールボックス」はデフォルトで無視されます]、タイプ： 'png' //画像タイプはpngとjpeg}）; var $ a = documenteelement（ 'a'）; var type = 'png'; + type; $ a.target = '_blank'; $ a.href = url; // chrome and firefoxif（typeof mouseevent ==== 'function'）{var evt = new MouseEvent（ 'click'、{view：window、bubbles：true、cancelable：false}）; '<body style = "margin：0;">' + '<img src = "' + url + '" style = "max-width：100％;" /> '+' </body> '; var tab = window.open（）; tab.document.write（html）;}}};このようにして、独自のダウンロード操作を使用し、ボタンとハイパーリンクを外部からカスタマイズし、上記の方法を直接呼び出して外部呼び出しを実現して写真を保存できます。
2。マウスエンテルとオンマウスリーブが速すぎて移動しすぎて、イベントメカニズムが正しいタイミングをトリガーします。
上記で説明しましょう
マウスが曲線上を移動すると、曲線を強調するだけでなく、ハサミの位置にシザーのアイコンを追加して、ハサミが押されたときに曲線を削除できるようにすることを願っています。以前に曲線に直接使用されたマウスエナーとムーセリーブ方法、そしてマウスが複数の曲線で迅速に移動すると、多くの問題が発生します（カーソルが去り、複数の曲線が強調表示されるとはさみは消えません）。いくつかの論理的判断を追加し、マウスオーバーとマウスアウトの変更を変更しようとした後、それらは機能しません。後で、突然、Mousemoveメソッドを使用できると思いました。マウスがハサミチャートの領域内にあるかどうかを判断します。もしそうなら、曲線を強調表示します。もはやない場合、すべての曲線がデフォルトスタイルに戻ります。その後、実際に成功しました。終日悩まされていた問題はついに解決されました。 （Mousemoveは、マウスを移動するときにイベントを絶えず聞いてトリガーする必要があるため、この状態で曲線と描画ハサミを強調表示して描画する方法が呼び出されることを示すステータスフラグを持つことが最善です。図の呼び出し時間は、マウスがTrueにグローバル変数を設定し、後続のMousemove操作に基づいて決定されることです。
いくつかのキーコードを記録します
マウスがハイライトに入り、ハサミのチャートを描きます
$（document）.on（ "mouseenter"、 "svg .curve"、function（e）{//入力するたびに、元の状態$（ "svg .node"）。 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（ "ofacity"、 "1"）; $（ "＃"+out_node_id+link.outtupt.point.points.points.pointname+in_id+point e）.attr（ "class"、 "curve"）;}）; //編集状態では、操作可能なアイコンを表示する必要がありますif（args.state == "edit"）{del_curve.ref_curve = this; del_curve.has_del_curve = true; if（$（ "＃del-curve-icon"）。長さ> 0）{$（ "＃del-curve-icon"）。 e.pagex-obj.offset（）。left-10、color： "＃ff0000"}） e.pagex-obj.offset（）。left-10、color： "＃ff0000"、fontsize： "20px"}）; obj.parent（）。append（del_icon）;} del_cur ve.xaxis = $（ "＃del-curve-icon"）。offset（）。left; del_curve.yaxis = $（ "＃del-curve-icon"）。offset（）。top;} // then現在の曲線を強調表示する場合は、（$（this）.attr（ "start"）！= undefined && $（this）.attr（ "end"）！= undefined）{// transparency $（ "svg .node"）。 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 Ribute（ "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 "））。 node-hover "）; $（"＃ "+$（this）.attr（" start "））[0] .setattribute（" Opacity "、" 1 "）; var out_node = $（ "＃"+$（this）.attr（ "end"））。子供（ "g"）。eq（0）。 node-hover "）; $（"＃ "+$（this）.attr（" end "））[0] .setattribute（" Opacity "、" 1 "）;}}）;マウスを動かして、トリガー操作を決定します
$（document）。 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））） .node "）。各（function（）{this.setattribute（" Opacity "、" 1 "）;}）; $ 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"）） out_node = $（ "＃"+$（del_curve.ref_curve）.attr（ "end"）） e.attr（ "class"、out_node.attr（ "class"）。置換（ "node-hover"、 ""）。trim（））; $（ "＃del-curve-icon"）実際、ワークフローの問題は、曲線を強調するだけで、マウスエンテルとムーセリーブの効果で十分です。ただし、この例では、曲線上のシザーアイコンをカバーする必要があります。これは、元の曲線のマウスエンテルとムーセリーブと競合するものです。曲線を削除するためのトリガー要素は、ハサミのアイコンだからです。