Registre os problemas encontrados no desenvolvimento de dois projetos. Um é a chamada externa dos ECHATS para salvar como operação de imagem, e a outra é a curva de conexão do fluxo de trabalho de fluxo de trabalho OnMouseEnter e os eventos OnMouseleave desencadeados devido ao movimento rápido do mouse.
1. Botão externo chama Echarts Gráfico Salvando como operação de imagem
Recentemente, usei a biblioteca Echarts para desenhar gráficos. De acordo com os requisitos, espero que as configurações do gráfico possam ser salvas como uma operação de imagem pode ser chamada fora do gráfico, principalmente porque espero que possa ser consistente com a interface de operação de imagem de download antes do projeto. Depois procurei alguns métodos on -line, mas não conheci ninguém com quem eu possa estar satisfeito. Mais tarde, de repente, pensei que a Echart abriu o código -fonte, você pode olhar para o código -fonte, encontrar o método de download e depois chamá -lo (talvez porque eu estivesse muito tecnicamente, e não apenas analisei como chamar o método diretamente, então copiei o método de origem e o mudei, e só precisava passar pelo ID do contêiner do gráfico)
Exemplo de representação do diagrama de eChart (há um botão de foto download na barra de ferramentas)
Anexe o código para registrá -lo
// Passe o contêiner de gráficos Idfunction DownloadImpbyChart (ChartId) {var MyChart = Echarts.getInstanceBydom (document.getElementById (ChartId)); var url = myChart.getconnected Dataurl ({pixelratio: 5, //. O componente da ferramenta ignorou ao salvar o gráfico, a barra de ferramentas 'Caixa de ferramentas' é ignorada por padrão], digite: 'png' // O tipo de imagem suporta PNG e JPEG}); var $ a = document.createElement ('a'); var tipo = 'png'; $ A.Townload = MyChart.getOption ('. [0]. + tipo; $ a.target = '_blank'; $ a.href = url; // chrome e firefoxif (typeof mouseevent === 'function') {var evt = new mouseevent ('clique', {view: window, bubbles: true, cancelable: false}; style = "margem: 0;"> ' +' <img src = "' + url +'" style = "max-lar: 100%;" /> '+' </body> '; var tab = window.open (); tab.document.write (html);}};Dessa forma, podemos usar sua própria operação de download e personalizar botões e hiperlinks externamente e chamar diretamente o método acima para realizar a chamada externa para salvar imagens.
2. OnMouseEnter e OnMouseleave se movem muito rápido, fazendo com que o mecanismo de eventos acionasse o tempo correto.
Vamos explicar acima
Espero que, quando o mouse se mova na curva, ele possa não apenas destacar a curva, mas também adicione o ícone da tesoura à posição do mouse, para que a curva possa ser excluída quando a tesoura for pressionada. Os métodos de mouseener e mouseleable que foram usados diretamente na curva antes e, em seguida, quando o mouse se move rapidamente em várias curvas, muitos problemas ocorrerão (a tesoura não desaparecerá quando o cursor folhas e várias curvas serão destacadas). Depois de tentar adicionar alguns julgamentos lógicos e mudar os métodos de MouseOver e MouseOut, eles não funcionarão. Mais tarde, de repente, pensei que poderia usar o método do mousemove. Determine se o mouse está dentro da área do gráfico de tesouras. Se for, destaque a curva. Se não for mais, todas as curvas retornarão ao estilo padrão. Então conseguiu. O problema que havia sido atormentado o dia todo foi finalmente resolvido. (Como o mousemove precisa ouvir e acionar constantemente eventos ao mover o mouse, é melhor ter um sinalizador de status indicando que o método de destacar curvas e desenhar uma tesoura é chamado nesse estado. O tempo de chamada na figura é que, quando o mouse entra na curva, defina uma variável global para verdadeira e a operação subsequente do Mousiove é determinado com base na variável)
Registre alguns códigos -chave
O mouse entra no destaque e desenha o gráfico de tesouras
$ (documento) .on ("mouseEnter", "svg .curve", function (e) {// Toda vez que você entrar, ele será restaurado ao seu estado original $ ("svg .node"). cada (function () {this.setAttribute ("opacidade", "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 ("opacity", "1"); $ ("#"+out_node_id_id+link.output.pointname "1"); e) .Attr ("classe", "curva");}); // No estado de edição, o ícone operável precisa ser exibido if (args.state == "edit") {del_curve.ref_curve = this; del_curve.has_del_curve = true; if ($ ("#del-curve-icon"). e.pagex-obj.offset (). esquerda-10, cor: "#ff0000"}). show ();} else {var del_icon = $ ("<i id = 'del-curve-icon' class = 'fa fA-scissors'> </i>"). e.pagex-obj.offset (). esquerda-10, cor: "#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;} // então Destaque a curva atual se ($ (this) .attr ("start")! = indefinido && $ (this) .attr ("end")! = indefinido) {// Defina transparência $ ("svg .node"). cada (function () {this.setttrribute ("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 ("opacidade", "0.1");}); obj.children ("g"). Eq (0) .CHILDREN ("g"). Eq (0). antes ($ (this)); $ (this) .attr ("classe", "curva curva-calos "); var in_node = $ ("#"+$ (this) .attr (" start ")). crianças (" g "). Eq (0) .Children (" círculo "). Eq (1); in_node.attr (" classe ", in_node.attr (" classe ")+" Nó o zero "); $ ("#"+$ (this) .attr (" start ")) [0] .setAttribute (" opacidade "," 1 "); var out_node = $ ("#"+$ (this) .attr ("end")). crianças ("g"). Eq (0) .Children ("círculo"). Eq (1); out_node.attr ("classe", out_node.attr ("classe")+" Node Aunchas "); $ ("#"+$ (this) .attr (" end ")) [0] .SetAttribute (" opacidade "," 1 ");}});Mova o mouse para determinar a operação do gatilho
$ (document) .on ("mousemove", function (e) {if (del_curve.has_del_curve) {var del_icon_width = $ ("#del-curve-icon"). width (); var del_icon_height = "#del-curve-icon"). if (e.pagex <del_curve.xaxis || e.pagex> (del_curve.Xaxis+del_icon_width) || e.pagey <del_curve.yaxis || e.spagey> (dell_curve.yaxis+del_icon_height) {Del_curve.has.has.has.has.has_curve.yaxis+del_icon_Height) {Del_Curve.has.has.has.has.has_curve.has_curve.yaxis+del_icon_Height) {Del_Curve.Has.Has.Has.Has_Curve.yaxis+del_icon_Height) {Del_Curve.Has.Has.Has.has_curve.has_curve.yaxis+del_icon_Height)) {Del_Curve.has.has. .Node "). Cada (function () {this.setAttribute (" Opacity "," 1 ");}); $. cada (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 ("classe", "curve");}); $ (del_curve.ref_curve) .attr ("classe", "curva"); var in_node = $ ("#"+$ (del_curve.ref_curve) .attr ("start")). Children ("g"). Eq (0) .children ("círculo"). Eq (1); in_node.attr ("classe", in_node.attr ("class") out_node = $ ("#"+$ (del_curve.ref_curve) .attr ("end")). Children ("g"). Eq (0) .children ("círculo"). Eq (1); out_nod e.attr ("classe", out_node.attr ("classe"). Substitua ("node-hover", "").OK, de fato, o problema do fluxo de trabalho, se você apenas destacar a curva, os efeitos do MouseEnter e Mouseleave são suficientes. No entanto, no exemplo, você precisa cobrir um ícone de tesoura na curva, que entrará em conflito com o MouseEnter e a mouseleable da curva original. Porque o elemento de gatilho para excluir a curva é o ícone da tesoura.