Registre los problemas encontrados en el desarrollo de dos proyectos. Una es la llamada externa de Echarts para guardar como operación de imagen, y la otra es la curva de conexión de flujo de trabajo de flujo de trabajo en el mouseenter y los eventos de ondumeleave activados debido al movimiento rápido del mouse.
1. Botón externo Llama a la tabla de gráfico Echarts como operación de imagen
Recientemente, utilicé la Biblioteca Echarts para dibujar gráficos. Según los requisitos, espero que la configuración del gráfico se pueda guardar como una operación de imagen se puede llamar fuera del gráfico, principalmente porque espero que pueda ser consistente con la interfaz de operación de imagen de descarga antes del proyecto. Luego busqué algunos métodos en línea, pero no conocí a nadie con quien pudiera estar satisfecho. Más tarde, de repente pensé que Echart abrió el código fuente, puede mirar el código fuente, encontrar el método de descarga y luego llamarlo (tal vez porque era muy técnicamente, y no solo miré cómo llamar al método directamente, por lo que copié el método fuente y lo cambié, y solo necesitaba pasar la identificación del contenedor del cuadro)
Ejemplo de representación del diagrama de Echart (hay un botón de descarga en la barra de herramientas)
Adjunte el código para grabarlo
// Pase el contenedor de gráfico IDFunction downlowippByChart (Chartid) {var myChart = echarts.getInstanceByDom (document.getElementById (Chartid)); var url = myChart.getConnectedDataurl ({Pixelratio: 5, // El rato de resolución de imagen exportada es 1 de fondo: '#ffff',//el Color de fondo: // Excudecomponents: [// El componente de la herramienta ignoró al guardar el gráfico, la barra de herramientas 'Toolbox' se ignora por defecto], escriba: 'png' // El tipo de imagen admite png y jpeg}); var $ a = document.createElement ('a'); var type = 'png'; $ a.download = mychart.getOption (). Title [0]. + type; $ a.target = '_blank'; $ a.href = url; // Chrome y Firefoxif (typeof MouseEvent ==== 'function') {var evt = new Mouseevent ('Click', {View: Window, Bubbles: True, Cancelable: False}); $ a.disPatchEvent (evt);}// IEELSE style = "margin: 0;"> ' +' <img src = "' + url +'" style = "max-width: 100%;" /> '+' </body> '; var tab = window.open (); tab.document.write (html);}};De esta manera, podemos usar su propia operación de descarga, y podemos personalizar botones e hipervínculos externamente, y llamar directamente al método anterior para realizar la llamada externa para guardar imágenes.
2. On MouseEner y OnMouseleave se mueven demasiado rápido, lo que hace que el mecanismo del evento active el tiempo correcto.
Vamos a explicarlo arriba
Espero que cuando el mouse se mueva en la curva, no solo pueda resaltar la curva, sino también agregar el icono de tijera a la posición del mouse, de modo que la curva se pueda eliminar cuando se presionan las tijeras. Los métodos de mouseener y mouseleave que se usaron directamente en la curva antes, y luego, cuando el mouse se mueve rápidamente en múltiples curvas, se producirán muchos problemas (las tijeras no desaparecerán cuando el cursor salga y se resaltarán múltiples curvas). Después de tratar de agregar algunos juicios lógicos y cambiar los métodos de mouseover y mouseut, no funcionarán. Más tarde, de repente pensé que podía usar el método MouseMove. Determine si el mouse está dentro del área de la tabla de tijeras. Si es así, resalte la curva. Si ya no es, todas las curvas volverán al estilo predeterminado. Luego tuvo éxito. El problema que había estado plagado de todo el día finalmente se resolvió. (Dado que MouseMove necesita escuchar y activar eventos constantemente al mover el mouse, es mejor tener un indicador de estado que indique que el método para resaltar las curvas y las tijeras de dibujo se llama en este estado. El tiempo de llamada en la figura es que cuando el mouse entra en la curva, establece una variable global en verdadero, y la operación posterior del mouse se determina según la variable))
Registre algunos códigos clave
El mouse entra en lo más destacado y dibuja la tabla de tijeras
$ (documento) .on ("mouseenter", "svg .curve", function (e) {// Cada vez que ingrese, se restaurará a su estado original $ ("svg .node"). Cada (function () {this.setAttribute ("opacidad", "1");}); $. cada uno (relación.links, function (l, link) {varacidad " 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] .SetTtribute ("opacidad", "1"); $ ("#"+out_node_id+link.output.pointName+in_node_id+link.inpoint.input.nam.napput.nam. e) .attr ("clase", "curva");}); // En el estado de edición, el icono operable debe mostrarse if (args.state == "editar") {del_curve.ref_curve = this; del_curve.has_del_curve = true; if ($ ("#del-curve-icon"). longitud> 0) {$ ("#del-curve-icon"). css ({posición: "absoluto: top: e.pagey-objset (). E.Pagex-OBJ.OffSet (). Left-10, Color: "#FF0000"}). Show ();} else {var del_icon = $ ("<i id = 'del-curve-icon' class = 'fa fa-scessors'> </i>"). CSS ({posición: "absoluto", top: e.pagey-oBJ.Offset (). E.Pagex-OBJ.OffSet (). Left-10, color: "#FF0000", FontSize: "20PX"}); obj.parent (). append (del_icon);} del_cur ve.xaxis = $ ("#del-curve-icon"). offset (). izquierda; del_curve.yaxis = $ ("#del-curve-icon"). offset (). top;} // Entonces resalte la curva actual if ($ (this) .attr ("inicio")! = Undefined && $ (this) .attr ("end")! = Undefined) {// Establezca transparencia $ ("svg .node"). Cada (function () {this.settribute ("opacidad", "0.1");}); $. cada uno (relación. 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 ribed ("opacidad", "0.1");}); obj.children ("g"). eq (0) .children ("g"). eq (0) .before ($ (this)); $ (this) .attr ("clase", "curva curve-hover "); var in_node = $ ("#"+$ (this) .attr (" inicio ")). Children (" g "). eq (0) .children (" círculo "). eq (1); in_node.attr (" class ", in_node.attr (" class ")+" nodo-hover "); $ ("#"+$ (this) .attr (" inicio ")) [0] .SetAttribute (" opacidad "," 1 "); var out_node = $ ("#"+$ (this) .attr ("end")). Children ("g"). eq (0) .children ("círculo"). eq (1); out_node.attr ("class", out_node.attr ("class")+" nodo-hover "); $ ("#"+$ (this) .attr (" end ")) [0] .SetAttribute (" Opacidad "," 1 ");}});Mueva el mouse para determinar la operación de activación
$ (documento) .on ("mouseMove", function (e) {if (del_curve.has_del_curve) {var del_icon_width = $ ("#del-curve-icon"). width (); var del_icon_height = $ ("#-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 = falso; .node "). Cada (function () {this.setTribute (" opacidad "," 1 ");}); $. Cada (relación.links, function (l, link) {var in_node_id = link.input.nodeid; var; var; out_node_id = link.output.nodeid; $ ("#"+out_node_id+link.output.pointName+in_node_id+link.input.pointname) [0] .setTribute ("opacidad", "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 ("inicio")). Children ("g"). eq (0) .children ("círculo"). eq (1); in_node.attr ("class", in_node.attr ("class"). reemplazar ("nodo-tover", "").););););); out_node = $ ("#"+$ (del_curve.ref_curve) .attr ("end")). Children ("g"). Eq (0) .children ("círculo"). eq (1); out_nod e.attr ("class", out_node.attr ("class"). reemplazar ("nodo-hover", ""). tril ()); $ ("#del-curve-icon"). Hide ();}}})Ok, de hecho, el problema del flujo de trabajo, si solo resalta la curva, los efectos del mouseenter y mouseleave son suficientes. Sin embargo, en el ejemplo, debe cubrir un icono de tijera en la curva, que entrará en conflicto con el mouseenter y el mouseave de la curva original. Porque el elemento de activación para eliminar la curva es el icono de tijeras.