relación detallada de mapeo

Dado que el proyecto requiere el uso del diagrama, son generalmente página web oficial con su propio archivo JSON y diagramas generalmente contienen una gran cantidad de datos, muy fácil de modificar, por lo que desde el Internet para encontrar un diagrama detallado de un blog detallado, por lo que este cuota

código:

<% @ Page Language = " java " contentType = " text / html; charset = UTF-8 " 
    pageEncoding = " UTF-8 " %> 
<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd" > 
< html > 
< cabeza > 
< meta http-equiv = "Content-Type" contenido = "text / html; charset = UTF-8" > 
< título > Insertar el título <
> 
< Cuerpo > 
 < div ID = "contenedor" estilo = "altura: 500%" > </ div > 
  < secuencia de comandos de tipo = "text / javascript" src = "js / echarts.js" > </ escritura > 
    < secuencia de comandos de tipo = "/ javascript texto" src = "JS / dataTools.js" > </ escritura > 
    < secuencia de comandos de tipo = "text / javascript" src = "JS / jquery-3.3.1.js" > </ escritura > 
     <guión tipo = "text / javascript" >
var DOM = document.getElementById ( " Container " );
 var MYCHART = echarts.init (DOM);
 var App = {}; 
Opción =  nulo ; 
myChart.showLoading (); 
var webkitDep = {
 " tipo " : " Fuerza " ,
 " las categorías " : [ // categoría de redes, puede escribir varios conjuntos 
    {
         " nombre " : " relación de carácter " ,// Relación de nombre de red 
        " palabra clave " : {},
         " Base " : " la relación entre los caracteres " 
    } 
], 
" nodos " : [ // nodo espectáculo 
    {
         " nombre " : " Liu Ye " , // nodo nombre de 
        " valor " : 3 ,
         " categoría " : 0 // y la creación de redes categorías correspondientes al índice, en el que sólo una red de modo de escritura 0 aquí 
    }, 
    { 
        " nombre ":" 霓娜" ,
         " valor " : 1 ,
         " categoría " : 0 
    }, 
    { 
        " nombre " : " 诺一" ,
         " valor " : 1 ,
         " categoría " : 0 
    } 
], 
" enlaces " : [ // 节点之间连接
    {
         " fuente " : 0 ,//nodo de inicio, un nodo 0 representa el 
        " objetivo " : 1  // nodo de destino, el índice representa un nodo de conexión 1 
    }, 
    { 
        " Fuente " : 0 ,
         " objetivo " : 2 
    } 
] 
}; 
MYCHART. hideLoading (); 

Opción = { 
    Leyenda: { 
        datos: [ ' relaciones de los personajes ' ] // redes de datos aquí debe corresponder al nombre de categoría 
    }, 
    de la serie: [{ 
        tipo: ' Graph ' , 
        maquetación: ' Fuerza' 
        Animación: falso , 
        etiqueta: { 
            normal: { 
                show: verdadero , 
                posición: ' derecha ' 
            } 
        }, 
        que pueden arrastrarse: verdaderos , 
        datos: webkitDep.nodes.map ( función (nodo, idx) { 
            node.id = idx;
             regreso nodo; 
        }), 
        categorías: webkitDep.categories, 
        vigor: { 
            edgeLength: 101 , // 连线的长度
            Repulsión: 100   // intervalo entre nodos secundarios 
        }, 
        Edges: webkitDep.links 
    }] 
}; 
myChart.setOption (Opción); 

    </ script > 
</ cuerpo > 
</ HTML >

 

 

 

 

 

 

dirección de referencia: https :? //Blog.csdn.net/qq_29384639/article/details/53322142 depth_1-utm_source = distribute.pc_relevant.none tareas & utm_source = distribute.pc_relevant.none tareas