En Visual Paradigm, estamos constantemente superando los límites de cómo los desarrolladores, analistas de datos y profesionales de la tecnología visualizan sistemas y conjuntos de datos complejos. Recientemente, presentamosVPasCode, una plataforma unificada de texto a diagrama diseñada para eliminar la fricción de pasar entre múltiples herramientas de dibujo. Al admitir opciones de sintaxis populares como Mermaid, PlantUML y Graphviz dentro de un único entorno de desarrollo integrado, VPasCode se ha convertido rápidamente en un ecosistema de elección para la generación rápida y precisa de diagramas.
Hoy estamos encantados de anunciar una importante mejora en nuestra herramienta:VPasCode ahora admite nativamente Apache ECharts. Esta incorporación transforma nuestro entorno de diagramación en un potente generador de gráficos altamente flexible y basado en códigocreador de gráficos. Ahora puede transformar sus configuraciones JSON o descripciones asistidas por IA en visualizaciones de datos ricas e interactivas en tiempo real.
Con nuestra interfaz lado a lado, los mecanismos permanecen simples e intuitivos: ingrese su objeto de configuración de ECharts en el panel izquierdo, y sus componentes de tablero interactivos se renderizarán sin problemas en el panel derecho.
¿Por qué elegir VPasCode como su generador de gráficos?
Mientras que el software estándar de generación de gráficos obliga a arrastrar, soltar y ajustar manualmente píxeles individuales, VPasCode depende completamente de código estructurado. La integración de ECharts desbloquea ventajas distintivas para los equipos técnicos modernos:
- Arquitectura unificada: Cambie sin esfuerzo entre plantillas de arquitectura de aplicaciones (mediante PlantUML/Mermaid) y tableros de análisis de datos (mediante ECharts) dentro de la misma pestaña.
- Flujos de trabajo impulsados por IA:Aproveche nuestra plataforma como un inteligentegenerador de gráficos con IA. Describa sus requisitos de datos de forma nativa (en nuestro chatbot de diagramación con IA) y observe visualizaciones precisas creadas automáticamente sin estilo manual.
- Estados altamente compartibles:Cada configuración de diagrama se comprime en una URL única y compartible, lo que hace extremadamente fácil colaborar en revisiones de código, documentación de wikis o presentaciones en vivo para clientes.
Explorando ejemplos en vivo de ECharts en VPasCode
Para demostrar el rendimiento de nuestrogenerador de gráficos, hemos preparado varias plantillas de visualización de datos de producción. Puede interactuar directamente con cada ejemplo visitando los enlaces de prueba adjuntos.
1. Gráfico de barras apiladas (Análisis de ventas por región)
Perfecto para ver totales absolutos entre grupos mientras se desglosan simultáneamente las distribuciones categóricas.
option = {
título: { texto: 'Ventas trimestrales por región' },
herramienta: { activador: 'eje', punteroEje: { tipo: 'sombra' } },
leyenda: { datos: ['Norte', 'Sur', 'Este', 'Oeste'] },
ejeX: { tipo: 'valor', nombre: 'Ingresos (en $1.000)' },
ejeY: { tipo: 'categoría', datos: ['Q1', 'Q2', 'Q3', 'Q4'] },
series: [
{ nombre: 'Norte', tipo: 'barra', apilado: 'Total', datos: [85, 120, 95, 150] },
{ nombre: 'Sur', tipo: 'barra', apilado: 'Total', datos: [65, 90, 110, 130] },
{ nombre: 'Este', tipo: 'barra', apilado: 'Total', datos: [45, 70, 85, 100] },
{ nombre: 'Oeste', tipo: 'barra', apilado: 'Total', datos: [30, 50, 60, 75] }
]
};2. Gráfico de líneas con área sombreada (crecimiento mensual del sitio web)
Diseñado para rastrear cambios cronológicos con interpolaciones suaves y alineaciones limpias de cuadrícula.
option = {
title: { text: 'Visitas mensuales', left: 'center' },
tooltip: { trigger: 'axis' },
grid: { left: 40, right: 20, top: 50, bottom: 30, containLabel: true },
xAxis: { type: 'category', data: ['Ene','Feb','Mar','Abr','May','Jun'] },
yAxis: { type: 'value' },
series: [{
name: 'Visitas',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
areaStyle: { opacity: 0.3 }
}]
};3. Gráfico de área personalizado (resaltados brillantes)
Una excelente demostración de la flexibilidad en el diseño, donde los colores de línea, las configuraciones de borde y la opacidad de relleno se pueden manipular instantáneamente.
option = {
title: { text: 'Visitas mensuales al sitio web (2026)' },
xAxis: { type: 'category', boundaryGap: false, data: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul'] },
yAxis: { type: 'value' },
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
areaStyle: { color: '#ff6b6b' },
lineStyle: { color: '#e03131' },
itemStyle: { color: '#e03131' }
}]
};4. Gráfico de pastel interactivo (mezcla de tráfico de referencias)
Un diseño clásico para calcular la cuota de mercado relativa o las fuentes de tráfico, completo con un contenedor limpio de leyenda en la parte inferior.
option = {
title: { text: 'Referente de un sitio web', left: 'center' },
tooltip: { trigger: 'item' },
legend: { bottom: 10 },
series: [
{
name: 'Acceso desde',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Motor de búsqueda' },
{ value: 735, name: 'Directo' },
{ value: 580, name: 'Correo electrónico' },
{ value: 484, name: 'Anuncios Unión' },
{ value: 300, name: 'Anuncios de video' }
]
}
]
};5. Gráfico de radar (comparación de arquitectura de service mesh)
Una estructura gráfica multivariable utilizada comúnmente para evaluar capacidades técnicas, benchmarks de software o criterios de arquitectura compleja lado a lado.
option = {
title: { text: 'Evaluación de capacidades de service mesh' },
tooltip: {},
radar: {
indicator: [
{ name: 'Rendimiento (RPS)', max: 100 },
{ name: 'Resiliencia', max: 100 },
{ name: 'Eficiencia de memoria', max: 100 },
{ name: 'Observabilidad', max: 100 },
{ name: 'Seguridad/TLS', max: 100 }
]
},
series: [{
name: 'Perfiles de servicio',
type: 'radar',
data: [
{ value: [85, 90, 55, 95, 80], name: 'Nodo proxy Go', areaStyle: { opacity: 0.3 } },
{ value: [40, 75, 90, 60, 90], name: 'Pasarela Java heredada', areaStyle: { opacity: 0.1 } }
]
}]
};6. Gráfico de dispersión (perfil de métrica de latencia de inferencia)
Ideal para identificar picos atípicos, umbrales de tamaño de carga útil y cuellos de botella de aplicaciones en infraestructuras distribuidas.
option = {
title: { text: 'Latencia de inferencia frente al tamaño de carga útil', left: 'center' },
tooltip: { trigger: 'item', formatter: function (p) { return 'Tamaño: ' + p.value[0] + ' KB<br />Latencia: ' + p.value[1] + ' ms'; } },
xAxis: { name: 'Tamaño de carga útil (KB)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
yAxis: { name: 'Latencia (ms)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
series: [{
type: 'scatter',
symbolSize: 12,
data: [
[120, 450], [240, 580], [50, 210], [512, 1100], [320, 720],
[180, 390], [450, 950], [90, 310], [600, 1340], [150, 410]
],
itemStyle: { color: '#aa00ff' }
}]
};7. Gráfico de explosión solar (licenciamiento de código de múltiples niveles)
Visualice relaciones jerárquicas con anillos concéntricos. Nuestra plataforma actúa como un creador orgánicocreador de gráficos para simplificar configuraciones de datos anidados complejas como esta.
option = {
title: { text: 'Composición de licencias de código', left: 'center' },
series: [{
type: 'sunburst',
radius: [0, '90%'],
data: [{
name: 'Código abierto',
children: [
{ name: 'Permisivo', children: [{ name: 'MIT', value: 55 }, { name: 'Apache 2.0', value: 30 }] },
{ name: 'Copyleft', children: [{ name: 'GPLv3', value: 12 }] }
]
}, {
name: 'Propietario',
children: [{ name: 'Proveedor comercial', value: 18 }]
}]
}]
};8. Diagrama de Sankey (analizador de flujo de costos de infraestructura)
Rastree el mapeo de recursos operativos o variables financieras a través de pasos computacionales con enlaces de peso de nodos fluidos.
option = {
title: { text: 'Analizador de flujo de costos de infraestructura' },
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
series: [{
type: 'sankey',
data: [
{ name: 'Presupuesto total' }, { name: 'AWS Cloud' }, { name: 'Herramientas SaaS' },
{ name: 'Computación EC2' }, { name: 'Almacenamiento RDS' }, { name: 'Monitoreo' }
],
links: [
{ source: 'Presupuesto total', target: 'AWS Cloud', value: 8000 },
{ source: 'Presupuesto total', target: 'Herramientas SaaS', value: 2000 },
{ source: 'AWS Cloud', target: 'Computación EC2', value: 5500 },
{ source: 'AWS Cloud', target: 'Almacenamiento RDS', value: 2500 },
{ source: 'Herramientas SaaS', target: 'Monitoreo', value: 2000 }
],
lineStyle: { color: 'source', curveness: 0.5 }
}]
};9. Mapa de calor (cuadrícula de velocidad de despliegue por hora)
Monitoree densidades sistémicas, volúmenes de despliegue o cambios continuos en el tráfico a través de matrices de tiempo personalizadas con facilidad.
option = {
title: { text: 'Velocidad de despliegue por hora', left: 'center' },
tooltip: { position: 'top' },
grid: { height: '50%', top: '15%' },
xAxis: { type: 'category', data: ['12am', '4am', '8am', '12pm', '4pm', '8pm'], splitArea: { show: true } },
yAxis: { type: 'category', data: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'], splitArea: { show: true } },
visualMap: { min: 0, max: 30, type: 'continuous', orient: 'horizontal', left: 'center', bottom: '15%' },
series: [{
name: 'Despliegues',
type: 'heatmap',
data: [[0,0,5],[0,1,1],[0,2,0],[0,3,12],[0,4,18],[0,5,8],[1,3,15],[2,4,22],[3,3,30],[4,4,25],[5,0,2],[6,0,1]],
label: { show: true },
emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
}]
};Desbloquea el poder de la automatización de texto a diagrama hoy
Ya sea que necesites uncreador de gráficospara traducir métricas comerciales crudas o una superficie centralizada para mapas de ingeniería estructural, VPasCode simplifica tus flujos de trabajo diarios. Dile adiós a las aplicaciones fragmentadas y a las bibliotecas de visualización frágiles.
¿Listo para transformar tus estructuras de datos en paneles visuales interactivos?
Explora la superficie completa, prueba estas plantillas y prueba el rendimiento de renderizado de forma gratuita.
Inicia ahora el editor en vivo de VPasCode →