سجل المشكلات التي واجهتها في تطوير مشروعين. إحداها هي الدعوة الخارجية لـ Echarts إلى حفظها كعملية للصور ، والآخر هو منحنى اتصال سير العمل على سير العمل OnMouseenter و OnMouseLeave الناتجة عن حركة الماوس السريعة.
1. الزر الخارجي يدعو المخطط Echarts المحفوظ كعملية للصور
في الآونة الأخيرة ، استخدمت مكتبة Echarts لرسم المخططات. وفقًا للمتطلبات ، آمل أن يتم حفظ إعدادات الرسم البياني كعملية للصور خارج المخطط ، ويرجع ذلك أساسًا إلى أنه يمكن أن يكون متسقًا مع واجهة تشغيل صور التنزيل قبل المشروع. ثم بحثت عن بعض الطرق عبر الإنترنت ، لكنني لم أقابل أي شخص يمكن أن أكون راضيا عنه. في وقت لاحق ، اعتقدت فجأة أن Echart فتح رمز المصدر ، يمكنك النظر إلى الكود المصدري ، والعثور على طريقة التنزيل ، ثم أسميها (ربما لأنني كنت تقنيًا للغاية ، ولم أنظر فقط في كيفية استدعاء الطريقة مباشرة ، لذلك قمت بنسخ طريقة المصدر وتغييرها ، وكنت بحاجة فقط لتمرير معرف الحاوية من الرسم البياني)
مثال تمثيل مخطط Echart (يوجد زر صورة تنزيل في شريط الأدوات)
قم بإرفاق الرمز لتسجيله
// تمرير حاوية المخطط idfunction downloadImpbyChart (chartid) {var mychart = echarts.getInstanceBydom (document.getElementById (chartid)) ؛ var url = mychart.getConnectedDataurl ({pixelratio: 5 ، // ratio resolution is chart chart chart: ExcludeComponents: [// مكون الأداة يتم تجاهله عند حفظ المخطط ، يتم تجاهل شريط الأدوات "صندوق الأدوات" بشكل افتراضي] ، النوع: 'png' // يدعم نوع الصورة png و jpeg}) ؛ var $ a = document.createElement ('a') ؛ var type = 'png' + type ؛ $ a.target = '_blank' ؛ $ a.href = url ؛ // chrome و firefoxif (typeof mouseevent === 'function') {var evt = new mouseevent ('click' ، {view: window ، bubbles: true ، cancelable: false}) style = "margin: 0 ؛"> ' +' <img src = "'' + url + '" style = "max-width: 100 ٪ ؛" /> '+' </body> '؛ var tab = window.open () ؛ tab.document.write (html) ؛}} ؛وبهذه الطريقة ، يمكننا استخدام عملية التنزيل الخاصة بها ، ويمكننا تخصيص الأزرار والارتباطات التشعبية من الخارج ، واتصل مباشرة بالطريقة أعلاه لتحقيق المكالمة الخارجية لحفظ الصور.
2. يتحرك OnMouseenter و OnMouseLeave بسرعة كبيرة ، مما تسبب في قيام آلية الحدث بتوجيه التوقيت الصحيح.
دعونا نشرح ذلك أعلاه
آمل أنه عندما يتحرك الماوس على المنحنى ، لا يمكنه تسليط الضوء على المنحنى فحسب ، بل أيضًا إضافة أيقونة مقص إلى موضع الماوس ، بحيث يمكن حذف المنحنى عند الضغط على المقص. أساليب Mouseener و MouseLeave التي تم استخدامها مباشرة على المنحنى من قبل ، وبعد ذلك عندما يتحرك الماوس بسرعة على منحنيات متعددة ، ستحدث العديد من المشكلات (لن تختفي المقص عندما يتم تسليط الضوء على أوراق المؤشر ، وسيتم تسليط الضوء على منحنيات متعددة). بعد محاولة إضافة بعض الأحكام المنطقية وتغيير أساليب Mouseover و Mouseout ، لن تعمل. في وقت لاحق اعتقدت فجأة أنه يمكنني استخدام طريقة mousemove. حدد ما إذا كان الماوس يقع داخل منطقة مخطط المقص. إذا كان ذلك ، قم بتمييز المنحنى. إذا لم يعد الأمر كذلك ، فسيعود جميع المنحنيات إلى النمط الافتراضي. ثم نجحت بالفعل. تم حل المشكلة التي ابتليت بها طوال اليوم. (نظرًا لأن MouseMove يحتاج إلى الاستماع باستمرار وتشغيل الأحداث عند تحريك الماوس ، فمن الأفضل أن يكون لديك علامة حالة تشير إلى أن طريقة تسليط الضوء على المنحنيات ورسم مقصها يتم استدعاؤها في هذه الحالة. يتم تحديد وقت الاتصال على الرقم هو أنه عندما يدخل الماوس المنحنى ، يتم تعيين متغير عالمي إلى صواب ، والعملية الفادحة التالية تم تحديدها استنادًا إلى المتغير)
سجل بعض الرموز الرئيسية
يدخل الماوس تسليط الضوء ويسحب مخطط المقص
$ (document) .on ("MouseEnter" ، "Svg .Curve" ، الوظيفة (e) {// في كل مرة تدخل فيها ، سيتم استعادتها إلى حالتها الأصلية $ ("svg .node"). كل (وظيفة () {this.setAttribute ("opacity" ، "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] ه) .ATTR ("فئة" ، "منحنى") ؛}) ؛ // في حالة التحرير ، يجب عرض الرمز القابل للتشغيل if (args.state == "edit") {del_curve.ref_curve = this ؛ del_curve.has_del_curve = true ؛ if ($ ("#del-curve-icon"). e.pagex-obj.offset (). Left-10 ، اللون: "#ff0000"}). show () ؛} آخر {var del_icon = $ ("<i id = 'del-curve-icon' class = 'fa fa-scissors'> </i>). e.pagex-obj.offset (). Left-10 ، اللون: "#ff0000" ، fontsize: "20px"}) ؛ obj.parent (). append (del_icon) ؛} del_cur ve.xaxis = $ ("#del-curve-icon"). الإزاحة (). اليسار ؛ del_curve.yaxis = $ ("#del-curve-icon"). Offset () TOP ؛} // ثم قم بتمييز المنحنى الحالي إذا ($ (this) .ATTR ("start")! = undefined && $ (this) .Attr ("end")! = undefined) {// set tranparency $ ("svg .node"). eary (complict () {this.setTribute ( 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 تحريك ("عتامة" ، "0.1") ؛}) ؛ obj.children ("g"). Eq (0) Curve-Hover ") ؛ var in_node = $ ("#"+$ (this) .Attr (" start ")). الأطفال (" g "). eq (0). Node-Hover ") ؛ $ ("#"+$ (this) .Attr (" start ")) [0] .SetAttribute (" opacity "،" 1 ") ؛ var out_node = $ ("#"+$ (this) .attr ("end")). الأطفال ("g"). Eq (0). العقدة-hover ") ؛ $ ("#"+$ (this) .attr (" end ")) [0] .SetAttribute (" opacity "،" 1 ") ؛}}) ؛حرك الماوس لتحديد عملية الزناد
$ (document) .on ("mousemove" ، function (e) {if (del_curve.has_del_curve) {var del_icon_width = $ ("#del-curve-icon"). if (e.pagex <del_curve.xaxis || .node "). كل (function () {this.setAttribute (" opitated "،" 1 ") ؛}) ؛ $. كل (aling.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] 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")). الأطفال ("g"). Eq (0) out_node = $ ("#"+$ (del_curve.ref_curve) .attr ("end")). الأطفال ("G"). Eq (0) e.attr ("class" ، out_node.attr ("class"). استبدال ("Node-hover" ، ""). trim ()) ؛ $ (حسنًا ، في الواقع ، مشكلة سير العمل ، إذا قمت فقط بتسليط الضوء على المنحنى ، فإن تأثيرات Mouseenter و MouseLeave كافية. ومع ذلك ، في المثال ، تحتاج إلى تغطية أيقونة مقص على المنحنى ، والتي سوف تتعارض مع Mouseenter و MouseLeave من المنحنى الأصلي. لأن عنصر الزناد لحذف المنحنى هو رمز المقص.