Catat masalah yang dihadapi dalam pengembangan dua proyek. Salah satunya adalah panggilan eksternal Echarts untuk disimpan sebagai operasi gambar, dan yang lainnya adalah kurva koneksi alur kerja Kurva Onmouseenter dan peristiwa Onmouseleave yang dipicu karena gerakan mouse cepat.
1. Tombol Eksternal Panggilan echarts chart hemat sebagai operasi gambar
Baru -baru ini, saya menggunakan perpustakaan Echarts untuk menggambar grafik. Menurut persyaratan, saya berharap bahwa pengaturan bagan dapat disimpan sebagai operasi gambar dapat dipanggil di luar bagan, terutama karena saya berharap itu dapat konsisten dengan antarmuka operasi gambar unduhan sebelum proyek. Lalu saya mencari beberapa metode secara online, tetapi saya tidak bertemu siapa pun yang bisa saya puas. Kemudian, tiba -tiba saya berpikir bahwa Echart membuka kode sumber, Anda dapat melihat kode sumber, menemukan metode pengunduhan, dan kemudian menyebutnya (mungkin karena saya sangat teknis, dan saya tidak hanya melihat bagaimana menyebut metode tersebut secara langsung, jadi saya menyalin metode sumber dan mengubahnya, dan saya hanya perlu melewati ID wadah dari bagan)
Contoh representasi diagram echart (ada tombol gambar unduhan di toolbar)
Lampirkan kode untuk merekamnya
// Lewati chart container IDFunction downloadImnChart (chartID) {var mychart = echarts.getInstanceBydom (document.geteLementById (chartId)); var url = mychart.getConnectedDataurl ({pixelratio: 5, // rasio resolusi gambar#//////latar belakang yang diekspor adalah rasio resolusi 1 adalah 1 latar belakang. // Komponen alat diabaikan saat menyimpan grafik, toolbar 'Toolbox' diabaikan secara default], ketik: 'png' // Jenis gambar mendukung png dan jpeg}); var $ a = document.createelement ('a'); var type = 'png'; $ a.download = mychart.getopteon (). + type; $ a.target = '_blank'; $ A.Href = url; // chrome dan firefoxif (typeof mouseEvent === 'function') {var evt = mouseEvent baru ('klik', {evt: Bubbles: true, contance: false}); $ a.dispatcatcatcevent ('' body, bubbles: true, false: false}); $ a.dispatcatcatcevent ('evt); style = "margin: 0;"> ' +' <img src = "' + url +'" style = "max-width: 100%;" /> '+' </body> '; var tab = window.open (); tab.document.write (html);}};Dengan cara ini, kita dapat menggunakan operasi unduhannya sendiri, dan dapat menyesuaikan tombol dan hyperlink secara eksternal, dan secara langsung memanggil metode di atas untuk mewujudkan panggilan eksternal untuk menyimpan gambar.
2. Onmouseenter dan Onmouseleave bergerak terlalu cepat, menyebabkan mekanisme peristiwa memicu waktu yang tepat.
Mari kita jelaskan di atas
Saya berharap bahwa ketika mouse bergerak pada kurva, ia tidak hanya dapat menyoroti kurva, tetapi juga menambahkan ikon gunting ke posisi mouse, sehingga kurva dapat dihapus ketika gunting ditekan. Metode mouseener dan mouseleave yang digunakan langsung pada kurva sebelumnya, dan kemudian ketika mouse bergerak cepat pada beberapa kurva, banyak masalah akan terjadi (gunting tidak akan hilang ketika kursor pergi, dan beberapa kurva akan menjadi disorot). Setelah mencoba menambahkan beberapa penilaian logis dan mengubah metode mouseover dan mouseout, mereka tidak akan berhasil. Kemudian saya tiba -tiba berpikir bahwa saya bisa menggunakan metode mousemove. Tentukan apakah mouse berada di dalam area bagan gunting. Jika ya, sorot kurva. Jika tidak lagi, semua kurva akan kembali ke gaya default. Maka itu benar -benar berhasil. Masalah yang telah diganggu sepanjang hari akhirnya diselesaikan. (Karena mousemove perlu terus -menerus mendengarkan dan memicu peristiwa saat menggerakkan mouse, yang terbaik adalah memiliki bendera status yang menunjukkan bahwa metode menyoroti kurva dan menggambar gunting dipanggil dalam keadaan ini. Waktu panggilan pada gambar adalah bahwa ketika mouse memasuki kurva, menetapkan variabel global ke true, dan operasi mouseMove berikutnya ditentukan berdasarkan variabel).
Rekam beberapa kode utama
Mouse memasuki highlight dan menggambar grafik gunting
$ (dokumen) .on ("mouseEnter", "svg .curve", function (e) {// Setiap kali Anda masuk, itu akan dikembalikan ke status aslinya $ ("svg .node"). masing -masing (fungsi () {this.setAttribute ("opacity", "1");}); masing -masing (masing -masing (relika. 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.poxput e) .attr ("kelas", "kurva");}); // Dalam keadaan edit, ikon yang dapat dioperasikan perlu ditampilkan if (args.state == "edit") {del_curve.ref_curve = this; del_curve.has_del_curve = true; if ($ ("#del-curve-icon"). Panjang> 0) {$ ("#del-curve-icon"). CSS ({Posisi: "," TOP-1, "TOP-1," TOP-1, "TOP-1," e.pagex-obj.offset (). Left-10, Color: "#ff0000"}). show ();} else {var del_icon = $ ("<i id = 'del-curve-icon' class = 'fa-scissors'> </i>"). CSS ({posisi: "absolute", top: e. 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;} // Lalu Sorot kurva saat ini if ($ (this) .attr ("start")! = Undefined && $ (this) .attr ("end")! = tidak terdefinisi) {// atur transparansi $ ("svg .node"). masing -masing (function () {this.setattribute ("opacity", "0.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] .setatt ribute ("opacity", "0.1");}); obj.children ("g"). eq (0) .children ("g"). Eq (0). Sebelum ($ (ini)); $ (ini) .attr ("kelas", "kurva curve-hover "); var in_node = $ ("#"+$ (this) .attr (" start ")). anak-anak (" g "). eq (0) .children (" lingkaran "). EQ (1); in_node.attr (" kelas ", in_node.attr (" class ")+" node-hover "); $ ("#"+$ (ini) .attr (" start ")) [0] .setAttribute (" opacity "," 1 "); var out_node = $ ("#"+$ (this) .attr ("end")). anak -anak ("g"). eq (0) .children ("Circle"). EQ (1); out_node.attr ("class", out_node.attr ("class")+" node-hover "); $ ("#"+$ (ini) .attr (" end ")) [0] .setAttribute (" opacity "," 1 ");}});Pindahkan mouse untuk menentukan operasi pemicu
$ (dokumen) .on ("mouseMove", function (e) {if (del_curve.has_del_curve) {var del_icon_width = $ ("#del-curve-icon"). width (); var del_icon_height = $ ("#del-curve-ore"). loncatan (). 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.yaxis+del_icon_Height)) {del_curve.HeVE.HEVE / DEL_ICON_HEIGH .node "). masing -masing (fungsi () {this.setAttribute (" opacity "," 1 ");}); $. masing -masing (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")). anak-anak ("g"). EQ (0) .Children ("Circle"). EQ (1); in_node.attr ("class", in_node.attr ("class"). Ganti ("node") out_node = $ ("#"+$ (del_curve.ref_curve) .attr ("end")). anak -anak ("g"). eq (0) .children ("Circle"). EQ (1); out_nod e.attr ("class", out_node.attr ("class"). ganti ("node-hover", ""). trim ()); $ ("#del-curve-icon"). hide ();}}})OK, pada kenyataannya, masalah alur kerja, jika Anda hanya menyoroti kurva, efek mouseenter dan mouseleave sudah cukup. Namun, dalam contoh, Anda perlu menutupi ikon gunting pada kurva, yang akan bertentangan dengan mouseenter dan mouseleave dari kurva asli. Karena elemen pemicu untuk menghapus kurva adalah ikon gunting.