Na Visual Paradigm, estamos constantemente expandindo os limites de como desenvolvedores, analistas de dados e profissionais de tecnologia visualizam sistemas complexos e conjuntos de dados. Recentemente, introduzimosVPasCode, uma plataforma unificada de texto para diagramas projetada para eliminar a dificuldade de alternar entre várias ferramentas de desenho. Ao suportar opções de sintaxe populares como Mermaid, PlantUML e Graphviz em um único ambiente integrado para desenvolvedores, o VPasCode tornou-se rapidamente um ecossistema preferido para renderização rápida e precisa de diagramas.
Hoje, estamos entusiasmados em anunciar uma melhoria significativa em nossa ferramenta:O VPasCode agora suporta nativamente o Apache ECharts. Essa adição transforma nosso ambiente de diagramação em um criador de gráficos altamente flexível e baseado em códigocriador de gráficos. Agora você pode transformar suas configurações JSON ou descrições auxiliadas por IA em visualizações de dados ricas e interativas em tempo real.
Com nossa interface lado a lado, os mecanismos permanecem simples e intuitivos: insira seu objeto de configuração do ECharts no painel esquerdo e seus componentes de painel interativo serão renderizados de forma fluida no painel direito.
Por que escolher o VPasCode como seu gerador de gráficos?
Enquanto software padrão de gráficos estáticos obriga você a arrastar, soltar e ajustar manualmente pixels individuais, o VPasCode depende completamente de código estruturado. A integração do ECharts desbloqueia vantagens distintas para equipes técnicas modernas:
- Arquitetura Unificada: Mude facilmente entre plantas de arquitetura de aplicativos (via PlantUML/Mermaid) e painéis de análise de dados (via ECharts) na mesma aba.
- Fluxos de Trabalho Impulsionados por IA: Aproveite nossa plataforma como umgerador de gráficos com IA. Descreva seus requisitos de dados nativamente (em nosso Chatbot de Diagramação com IA) e veja visualizações precisas criadas automaticamente, sem estilização manual.
- Estados Altamente Compartilháveis: Cada configuração de diagrama é comprimida em uma URL única e compartilhável, tornando extremamente fácil colaborar em revisões de código, documentação wiki ou apresentações ao vivo para clientes.
Explorando Exemplos ao Vivo de ECharts no VPasCode
Para demonstrar o desempenho do nossogerador de gráficos, preparamos vários modelos de visualização de dados de produção. Você pode interagir com cada exemplo diretamente visitando os links do playground correspondentes.
1. Gráfico de Barras Empilhadas (Análise de Vendas Regionais)
Perfeito para analisar totais absolutos entre grupos ao mesmo tempo em que se analisam distribuições categóricas simultaneamente.
option = {
title: { text: 'Vendas Trimestrais por Região' },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['Norte', 'Sul', 'Leste', 'Oeste'] },
xAxis: { type: 'value', name: 'Receita (em $1.000)' },
yAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
series: [
{ name: 'Norte', type: 'bar', stack: 'Total', data: [85, 120, 95, 150] },
{ name: 'Sul', type: 'bar', stack: 'Total', data: [65, 90, 110, 130] },
{ name: 'Leste', type: 'bar', stack: 'Total', data: [45, 70, 85, 100] },
{ name: 'Oeste', type: 'bar', stack: 'Total', data: [30, 50, 60, 75] }
]
};2. Gráfico de Linha com Área Sombreada (Crescimento Mensal do Site)
Projetado para rastrear mudanças cronológicas com interpolações suaves e alinhamentos limpos da grade.
option = {
title: { text: 'Visitas Mensais', left: 'center' },
tooltip: { trigger: 'axis' },
grid: { left: 40, right: 20, top: 50, bottom: 30, containLabel: true },
xAxis: { type: 'category', data: ['Jan','Fev','Mar','Abr','Mai','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 (Destaque Brilhante)
Uma excelente demonstração das flexibilidades de estilização, onde cores da linha, configurações de borda e opacidade de preenchimento podem ser manipuladas instantaneamente.
option = {
title: { text: 'Visitas Mensais ao Site (2026)' },
xAxis: { type: 'category', boundaryGap: false, data: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', '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 Pizza Interativo (Mistura de Tráfego de Referência)
Um layout clássico para calcular a participação relativa no mercado ou fontes de tráfego, completo com um container limpo para a legenda na parte inferior.
option = {
title: { text: 'Referência de um Site', left: 'center' },
tooltip: { trigger: 'item' },
legend: { bottom: 10 },
series: [
{
name: 'Acesso de',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Motor de Busca' },
{ value: 735, name: 'Direto' },
{ value: 580, name: 'E-mail' },
{ value: 484, name: 'Anúncios Union' },
{ value: 300, name: 'Anúncios de Vídeo' }
]
}
]
};5. Gráfico de Radar (Comparação de Arquitetura de Service Mesh)
Uma estrutura gráfica multivariada frequentemente usada para avaliar capacidades técnicas, benchmarks de software ou critérios complexos de arquitetura lado a lado.
option = {
title: { text: 'Avaliação de Capacidades de Service Mesh' },
tooltip: {},
radar: {
indicator: [
{ name: 'Throughput (RPS)', max: 100 },
{ name: 'Tolerância a Falhas', max: 100 },
{ name: 'Eficiência de Memória', max: 100 },
{ name: 'Observabilidade', max: 100 },
{ name: 'Segurança/TLS', max: 100 }
]
},
series: [{
name: 'Perfis de Serviço',
type: 'radar',
data: [
{ value: [85, 90, 55, 95, 80], name: 'Nó Proxy Go', areaStyle: { opacity: 0.3 } },
{ value: [40, 75, 90, 60, 90], name: 'Gateway Java Legado', areaStyle: { opacity: 0.1 } }
]
}]
};6. Gráfico de Dispersão (Perfil de Métrica de Latência de Inferência)
Excelente para identificar picos de valores atípicos, limites de tamanho de carga útil e gargalos de aplicação em infraestruturas distribuídas.
option = {
title: { text: 'Latência de Inferência vs Tamanho da Carga Útil', left: 'center' },
tooltip: { trigger: 'item', formatter: function (p) { return 'Tamanho: ' + p.value[0] + ' KB<br />Latência: ' + p.value[1] + ' ms'; } },
xAxis: { name: 'Tamanho da Carga Útil (KB)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
yAxis: { name: 'Latência (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 Explosão (Licenciamento de Código em Níveis Múltiplos)
Visualize relações hierárquicas com anéis concêntricos. Nossa plataforma atua como um criador de gráficos para simplificar configurações de dados complexas e aninhadas, como esta.
option = {
title: { text: 'Composição da Licença do Código', left: 'center' },
series: [{
type: 'sunburst',
radius: [0, '90%'],
data: [{
name: 'Código Aberto',
children: [
{ name: 'Permissivo', children: [{ name: 'MIT', value: 55 }, { name: 'Apache 2.0', value: 30 }] },
{ name: 'Copyleft', children: [{ name: 'GPLv3', value: 12 }] }
]
}, {
name: 'Proprietário',
children: [{ name: 'Fornecedor Comercial', value: 18 }]
}]
}]
};8. Diagrama de Sankey (Analizador de Fluxo de Custos de Infraestrutura)
Rastreie o mapeamento de recursos operacionais ou variáveis financeiras em etapas computacionais com links de peso de nós fluídos.
option = {
title: { text: 'Analizador de Fluxo de Custos de Infraestrutura' },
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
series: [{
type: 'sankey',
data: [
{ name: 'Orçamento Total' }, { name: 'AWS Cloud' }, { name: 'Ferramentas SaaS' },
{ name: 'Computação EC2' }, { name: 'Armazenamento RDS' }, { name: 'Monitoramento' }
],
links: [
{ source: 'Orçamento Total', target: 'AWS Cloud', value: 8000 },
{ source: 'Orçamento Total', target: 'Ferramentas SaaS', value: 2000 },
{ source: 'AWS Cloud', target: 'Computação EC2', value: 5500 },
{ source: 'AWS Cloud', target: 'Armazenamento RDS', value: 2500 },
{ source: 'Ferramentas SaaS', target: 'Monitoramento', value: 2000 }
],
lineStyle: { color: 'source', curveness: 0.5 }
}]
};9. Mapa de Calor (Grade de Velocidade de Implantação por Hora)
Monitore densidades sistêmicas, volumes de implantação ou mudanças contínuas de tráfego em matrizes de tempo personalizadas com facilidade.
option = {
title: { text: 'Velocidade de Implantação por Hora', left: 'center' },
tooltip: { position: 'top' },
grid: { height: '50%', top: '15%' },
xAxis: { type: 'category', data: ['12h', '4h', '8h', '12h', '4h', '8h'], splitArea: { show: true } },
yAxis: { type: 'category', data: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'], splitArea: { show: true } },
visualMap: { min: 0, max: 30, type: 'continuous', orient: 'horizontal', left: 'center', bottom: '15%' },
series: [{
name: 'Implantações',
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)' } }
}]
};Desbloqueie o Poder da Automação de Texto para Diagrama Hoje
Seja você precisando de um criador de gráficos para traduzir métricas brutas de negócios ou uma tela centralizada para mapas de engenharia estrutural, o VPasCode simplifica suas rotinas diárias. Diga adeus a aplicativos fragmentados e bibliotecas de visualização frágeis.
Pronto para transformar suas estruturas de dados em painéis visuais interativos?
Explore a tela completa, experimente esses modelos e teste o desempenho de renderização sem custo.
Inicie o Editor ao Vivo do VPasCode Agora →