Запишите проблемы, с которыми сталкиваются при разработке двух проектов. Одним из них является внешний вызов Echarts для сохранения в качестве работы изображения, а другой - кривая подключения рабочего процесса рабочего процесса OnmouseEnter и OnmouseLeave Events, запускаемые из -за быстрого движения мыши.
1. Внешние вызовы кнопок Echarts сохранение диаграммы при работе с изображением
Недавно я использовал библиотеку Echarts, чтобы нарисовать диаграммы. Согласно требованиям, я надеюсь, что настройки диаграммы могут быть сохранены, поскольку операция изображения может быть вызвана за пределами диаграммы, главным образом потому, что я надеюсь, что она может соответствовать интерфейсу загрузки изображения перед проектом. Затем я искал некоторые методы в Интернете, но я не встречал никого, с кем мог бы быть удовлетворен. Позже я вдруг подумал, что Echart открыл исходный код, вы можете посмотреть на исходный код, найти метод загрузки, а затем назвать его (возможно, потому что я был очень технически, и я просто не смотрел, как напрямую вызвать метод, поэтому я скопировал метод источника и изменил его, и мне просто нужно было пройти идентификатор контейнера в чарте)
Пример представления диаграммы Echart (на панели инструментов есть кнопка для загрузки изображения)
Прикрепите код, чтобы записать его
// Передайте карту контейнера идфункция загрузки impbyChart (chartid) {var mychart = echarts.getinstancebydom (document.getelementbyid (chartid)); var url = mychart.getConnectedDataurl ({pixelratio: 5, // Экспортируемый коэффициент изображения - 1 фон. excludeComponents: [// Компонент инструмента игнорируется при сохранении диаграммы, панель инструментов «инструмент инструментов» игнорируется по умолчанию], тип: «png» // Тип изображения поддерживает png и jpeg}); var $ a = document.createlement ('a'); var type = 'Png'; $ a.download = myCart.gretoption ('a'); + type; $ a.target = '_blank'; $ a.href = url; // chrome и firefoxif (typeof mouseevent === 'function') {var evt = new mouseevif ('click', {vive: window, bubbles: true, отмену: false}); $ a.dispate style = "margin: 0;"> ' +' <img src = "' + url +'" style = "max-width: 100%;" /> '+' </body> '; var tab = window.open (); tab.document.write (html);}};Таким образом, мы можем использовать его собственную операцию загрузки и можем настраивать кнопки и гиперссылки снаружи и напрямую вызовут приведенный выше метод, чтобы реализовать внешний вызов для сохранения изображений.
2. Onmouseenter и OnmouseLeave перемещаются слишком быстро, в результате чего механизм событий вызывает правильное время.
Давайте объясним это выше
Я надеюсь, что когда мышь движется по кривой, она может не только выделить кривую, но и добавить значок ножницы в положение мыши, чтобы кривая была удалена при нажатию ножниц. Методы Mouseener и Mousealeave, которые использовались непосредственно на кривой раньше, а затем, когда мышь быстро перемещается по нескольким кривым, возникнут много проблем (ножницы не исчезнут, когда курсор уходит, и несколько кривых станут подчеркнутыми). Пытаясь добавить несколько логических суждений и изменить методы мыши и мышью, они не будут работать. Позже я вдруг подумал, что могу использовать метод MouseMove. Определите, находится ли мышь в пределах зоны диаграммы ножниц. Если это так, выделите кривую. Если это больше не так, все кривые вернутся в стиль по умолчанию. Тогда это действительно преуспело. Проблема, которая страдала от всего дня, была окончательно решена. (Поскольку MouseMove необходимо постоянно слушать и запускать события при перемещении мыши, лучше всего иметь флаг состояния, указывающий, что метод выделения кривых и ножниц рисования в этом состоянии называется. Время вызовов на рисунке заключается в том, что когда мышь входит в кривую, устанавливает глобальную переменную на True, а последующая операция Mousemove определяется на переменной)
Запишите некоторые коды ключей
Мышь входит в основной момент и рисует диаграмму ножниц
$ (документ) .on ("mouseenter", "svg .curve", function (e) {// Каждый раз, когда вы входите, он будет восстановлен в своем исходном состоянии $ ("svg .node"). Каждый (function () {this.setattribute ("непрозрачность", "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 ("Непрозрачность", "1"); $ ("#"+out_node_id+link.output.pointname+in_node_id -incoint. 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"). css ({position: "Absolute", top: e.page-offe-offe-offe-offe-offe-offe-offe-offe-offe- e.pagex-obj.offset (). Left-10, Color: "#ff0000"}). Show ();} else {var del_icon = $ ("<id = 'del-curve-icon' class = 'fa fa-smessors'> </i>"). CSS ({позиция: "Absolute", top: e.pagey-obseplet ({{position: ", top: e.pagey-obset (). e.pagex-obj.offset (). Left-10, Color: "#ff0000", fontsize: "20px"}); obj.parent (). Append (del_icon);} del_cur ve.xaxis = $ ("#del-curve-icon"). offset (). слева; del_curve.yaxis = $ ("#del-curve-iCon"). offset (). top;} // затем Выделите текущую кривую if ($ (this) .attr ("start")! = undefined && $ (this) .attr ("end")! = не определено) {// set Transparency $ ("svg .node"). Каждый (function () {this.setattribut 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 ("непрозрачность", "0,1");}); obj.children ("g"). EQ (0). Children ("G"). EQ (0). До ($ (this)); $ (this) .Attr ("class", "curve Кривая Hover "); var in_node = $ ("#"+$ (this) .attr (" start ")). Дети (" g "). EQ (0) .Children (" Circle "). EQ (1); in_node.attr (" class ", in_node.attr (" class ")+" Узел-Hover "); $ ("#"+$ (this) .Attr (" start ")) [0] .SetAttribute (" opacty "," 1 "); var out_node = $ ("#"+$ (this) .attr ("end")). Дети ("g"). EQ (0) .Children ("Circle"). EQ (1); out_node.attr ("class", out_node.attr ("class")+" Узел-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"). Width (); var del_icon_hewight = $ ("#del-curve-icon"). 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 = $ gaxgue = $ waxcurve = .node "). Каждый (function () {this.setAttribute (" opacity "," 1 ");}); $. Каждый (comentle.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 ("opcytance", "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")). Children ("g"). EQ (0) .Children ("Circle"). EQ (1); in_node.attr ("class", in_node.attr ("class"). Заменить ("Node-hover", ") out_node = $ ("#"+$ (del_curve.ref_curve) .attr ("end")). Дети ("g"). EQ (0) .Children ("Circle"). EQ (1); Out_nod e.attr ("class", out_node.attr ("class"). replication ("node-hover", ""). trim ()); $ ("#del-curve-iCon"). Hide ();}}})ОК, на самом деле, проблема рабочего процесса, если вы просто выделяете кривую, достаточно последствий мыши и мышца достаточно. Однако, в примере, вам необходимо покрыть ножницы на кривой, которая будет противоречить мышью и мыши и мыши исходной кривой. Потому что триггерный элемент для удаления кривой является значок ножниц.