Cómo operar en echarts-ejemplo de introducción
2. Simplemente cree una página jsp
Nota: 1) El rojo es el marco, no necesita cambiarlo para diferentes estilos
2) Las opciones pueden cambiar el estilo, como histogramas, etc. Para códigos específicos, consulte el sitio web oficial de Baidu
3) El valor x en el ejemplo controla la distancia entre el texto izquierdo y el lado izquierdo en el imagen de arriba
4) Es necesario darle un recipiente en el cuerpo.
lt;div id="main" style="height: 600px;"gt;lt;/divgt;< / p>
lt;@ página contentType="text/ html; charset=UTF-8" gt;
lt;@ include file="/WEB-INF/views/include/taglib. jsp "gt;
lt;@ page language="java" import="" java.util.*,java.lang.*" pageEncoding="UTF-8"gt;
lt;htmlgt;
lt;headgt;
lt;titlegt;Logginglt;/titlegt;
lt;titlegt;Gestión de registroslt;/titlegt ;
lt; meta nombre="decorador" contenido="default"/gt;
lt; meta charset="utf-8"gt;
lt; introducción de un solo archivo--gt;
lt;! -- lt;script src="/build/dist/echarts.js"gt;lt;/scriptgt; p> lt;script src="${ctxStatic}/js/echarts.js"gt;lt;/script gt
lt;script type="text/javascript"gt;
p>// configuración de ruta
require.config({
rutas: {
// echarts: '/build/dist'
echarts: '${ctxStatic }/js/build/dist'
}
});
// Usar
require(
[
'echarts',
'echarts/chart/ pie' // Si usa un gráfico de barras, cargue la barra bajo demanda módulo de gráfico
],
función (ec) {
// Inicializa el gráfico echarts de acuerdo con el dom preparado
var myChart = ec.init(document. getElementById('main'));
opción = {
información sobre herramientas: {
disparador: 'elemento',
formateador: "{a} lt; br/gt; {b}: {c} ({d})"
},
leyenda: {
orient: 'vertical',
x: '40px',
data: ['Comunicado de instrucciones', 'Discusión del caso', 'Advertencia diaria' ' , 'Aviso semanal', 'Disfrute de la información ***', 'Ayuda mutua diaria', 'Anuncio de identificación', 'Personal clave', 'Personas de alto riesgo'
'sospechoso delictivo', 'pariente fugitivo', 'persona fugitiva', 'análisis de ADN', 'UnionPay Justice', 'comparación de fraude en telecomunicaciones', 'comparación de vídeos', gestión colaborativa de casos', 'investigación de casos' ', 'caso objetivo investigación', 'Investigación del caso objetivo (análisis de teléfonos móviles)', 'Investigación del caso objetivo (análisis por ordenador)', 'Investigación del caso objetivo (análisis de objetos valiosos)', 'Investigación del caso objetivo (análisis de vehículos))']
},
Serie:
{
Nombre: "Fuente",
Tipo: "Forma circular",
Modo seleccionado: "Único",
Radio: [0, '25'], Etiqueta: {
normal: {
posición: 'interior'
}
},
labelLine: {
normal: {
mostrar : falso
}
}
}
datos: [
//{valor :${ xtdl}, nombre: 'Inicio de sesión del sistema', seleccionado: verdadero},
{valor: ${zl tl mr mz}, nombre: 'Sintetizar combate'},
{valor : ${xx khtb rchz}, nombre: Columna de ayuda mutua'},
{valor: ${qkzd gwry xxry ztxd ztry dnabz}, nombre: 'Análisis de personal'},
{valor: ${jass dxzp vod xtba}, nombre: 'Análisis de colusión'},
{valor: ${jass dxzp vod xtba}, nombre: 'Análisis de colusión'}
{valor: ${yacw sjfx dnfx gzwp clfx}, nombre: 'análisis de elementos'}
]
},
{
p>nombre: 'fuente',
tipo: 'pastel',
radio: ['30', '55'],
datos: [
{valor: ${zl}, nombre: 'Directiva emitida'},
{valor: ${tl}, nombre: 'Discusiones de casos'},
{valor: ${mr}, nombre: Fugitivo'},
// {valor: ${xtdl}, nombre: 'Inicio de sesión del sistema'},
{valor: ${dnabz}, nombre: 'Análisis de la proporción de ADN' },
{valor: ${dnabz}, nombre: Análisis de la proporción de ADN'},
{ valor: ${dnabz}, nombre: 'Análisis de la proporción de ADN'},
{valor: ${dnabz}, nombre: 'Análisis de la proporción de ADN'},
{valor: ${jass}, nombre: UnionPay Justice'},
{valor: ${dxzp}, nombre:
'Concatenación de fraude en telecomunicaciones'},
{valor: ${vod}, nombre: 'Concatenación de vídeo'},
{valor: ${xtba}
{valor: ${yacw}, nombre: 'Gestión colaborativa de casos'},
{valor: ${yacw}, nombre: 'Caso por caso'},
{ valor: ${sjfx}, nombre: 'Caso por caso (Análisis de teléfono celular)'},
{valor: ${dnfx}, nombre: 'Caso por caso (Análisis por computadora)'},
{valor: ${dnfx}, nombre: 'Caso por caso (Análisis por ordenador)'},