Chez Visual Paradigm, nous poussons constamment les limites de la manière dont les développeurs, les analystes de données et les professionnels de la technologie visualisent des systèmes complexes et des jeux de données. Récemment, nous avons introduitVPasCode, une plateforme unifiée de conversion texte en diagramme conçue pour éliminer les frictions liées au passage entre plusieurs outils de dessin. En prenant en charge des syntaxes populaires telles que Mermaid, PlantUML et Graphviz au sein d’un seul environnement de développement intégré, VPasCode est rapidement devenu un écosystème de choix pour le rendu rapide et précis des diagrammes.
Aujourd’hui, nous sommes ravis d’annoncer une amélioration majeure de notre outil :VPasCode prend désormais en charge nativement Apache ECharts. Cette fonctionnalité transforme notre environnement de création de diagrammes en un puissant outil de création de graphiques entièrement basé sur le code, très souple etcréateur de graphiques. Vous pouvez désormais transformer vos configurations JSON ou vos descriptions assistées par IA en visualisations de données riches et interactives en temps réel.
Grâce à notre interface en double fenêtre, les mécanismes restent simples et intuitifs : saisissez votre objet de configuration ECharts dans le panneau de gauche, et vos composants de tableau de bord interactifs s’affichent sans heurt dans le panneau de droite.
Pourquoi choisir VPasCode comme générateur de graphiques ?
Alors que les logiciels standards de création de graphiques vous obligent à glisser, déposer et ajuster manuellement chaque pixel, VPasCode repose entièrement sur un code structuré. L’intégration d’ECharts ouvre des avantages distincts pour les équipes techniques modernes :
- Architecture unifiée : Basculez facilement entre les maquettes d’architecture d’applications (via PlantUML/Mermaid) et les tableaux de bord d’analyse de données (via ECharts) dans la même onglet.
- Flux de travail pilotés par l’IA : Utilisez notre plateforme comme un puissantgénérateur de graphiques par IA. Décrivez vos besoins de données de manière native (via notre chatbot de diagrammation par IA), et observez des visualisations précises créées automatiquement sans style manuel.
- États fortement partageables : Chaque configuration de diagramme est compressée en une URL unique et partageable, ce qui rend extrêmement facile la collaboration lors de revues de code, de documentation wiki ou de présentations client en direct.
Découvrez des exemples en direct d’ECharts dans VPasCode
Pour démontrer les performances de notregénérateur de graphiques mis à jour, nous avons préparé plusieurs modèles de visualisation de données de production. Vous pouvez interagir directement avec chaque exemple en visitant les liens des environnements de test associés.
1. Graphique en barres empilées (analyse des ventes par région)
Parfait pour examiner les totaux absolus entre les groupes tout en analysant simultanément les distributions catégorielles.
option = {
title: { text: 'Ventes trimestrielles par région' },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['Nord', 'Sud', 'Est', 'Ouest'] },
xAxis: { type: 'value', name: 'Chiffre d'affaires (en $1 000)' },
yAxis: { type: 'category', data: ['T1', 'T2', 'T3', 'T4'] },
series: [
{ name: 'Nord', type: 'bar', stack: 'Total', data: [85, 120, 95, 150] },
{ name: 'Sud', type: 'bar', stack: 'Total', data: [65, 90, 110, 130] },
{ name: 'Est', type: 'bar', stack: 'Total', data: [45, 70, 85, 100] },
{ name: 'Ouest', type: 'bar', stack: 'Total', data: [30, 50, 60, 75] }
]
};2. Graphique en courbes avec zone ombrée (Croissance mensuelle du site web)
Conçu pour suivre les évolutions chronologiques avec des interpolations fluides et des alignements de grille propres.
option = {
titre: { texte: 'Visites mensuelles', gauche: 'centre' },
infobulle: { déclencheur: 'axe' },
grille: { gauche: 40, droite: 20, haut: 50, bas: 30, contientÉtiquette: true },
axeX: { type: 'catégorie', données: ['Jan','Fév','Mar','Avr','Mai','Jun'] },
axeY: { type: 'valeur' },
série: [{
nom: 'Visites',
type: 'ligne',
lissage: true,
données: [820, 932, 901, 934, 1290, 1330],
styleZone: { opacité: 0.3 }
}]
};3. Graphique de zone personnalisé (Soulignements vifs)
Une excellente démonstration des flexibilités de mise en forme où les couleurs des lignes, les configurations des limites et l’opacité du remplissage peuvent être ajustées instantanément.
option = {
titre: { texte: 'Visites mensuelles du site web (2026)' },
axeX: { type: 'catégorie', écartBords: false, données: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul'] },
axeY: { type: 'valeur' },
série: [{
données: [120, 200, 150, 80, 70, 110, 130],
type: 'ligne',
styleZone: { couleur: '#ff6b6b' },
styleLigne: { couleur: '#e03131' },
styleÉlément: { couleur: '#e03131' }
}]
};4. Graphique circulaire interactif (Répartition du trafic d’origine)
Un agencement classique pour calculer la part de marché relative ou les sources de trafic, complété par un conteneur de légende propre en bas.
option = {
titre: { texte: 'Référent d’un site web', gauche: 'centre' },
infobulle: { déclencheur: 'élément' },
légende: { bas: 10 },
série: [
{
nom: 'Accès depuis',
type: 'camembert',
rayon: '50%',
données: [
{ valeur: 1048, nom: 'Moteur de recherche' },
{ valeur: 735, nom: 'Direct' },
{ valeur: 580, nom: 'Email' },
{ valeur: 484, nom: 'Publicités Union' },
{ valeur: 300, nom: 'Publicités vidéo' }
]
}
]
};5. Graphique en radar (Comparaison des architectures de service mesh)
Une structure de graphique multivariée souvent utilisée pour évaluer les capacités techniques, les benchmarks logiciels ou les critères complexes d’architecture en parallèle.
option = {
titre: { texte: 'Évaluation des capacités du service mesh' },
infobulle: {},
radar: {
indicateur: [
{ nom: 'Débit (RPS)', max: 100 },
{ nom: 'Résilience aux pannes', max: 100 },
{ nom: 'Efficacité mémoire', max: 100 },
{ nom: 'Observabilité', max: 100 },
{ nom: 'Sécurité/TLS', max: 100 }
]
},
série: [{
nom: 'Profils de service',
type: 'radar',
données: [
{ valeur: [85, 90, 55, 95, 80], nom: 'Nœud proxy Go', styleZone: { opacité: 0.3 } },
{ valeur: [40, 75, 90, 60, 90], nom: 'Passerelle Java héritée', styleZone: { opacité: 0.1 } }
]
}]
};6. Graphique de dispersion (Profil de métrique de latence d’inférence)
Idéal pour identifier les pics d’écarts, les seuils de taille des charges utiles et les goulets d’étranglement des applications dans des infrastructures distribuées.
option = {
titre: { texte: 'Latence d'inférence vs Taille du payload', gauche: 'centre' },
infobulle: { déclencheur: 'élément', formatteur: function (p) { return 'Taille: ' + p.valeur[0] + ' Ko<br />Latence: ' + p.valeur[1] + ' ms'; } },
axeX: { nom: 'Taille du payload (Ko)', type: 'valeur', ligneDivision: { styleLigne: { type: 'pointillée' } } },
axeY: { nom: 'Latence (ms)', type: 'valeur', ligneDivision: { styleLigne: { type: 'pointillée' } } },
série: [{
type: 'dispersion',
tailleSymbole: 12,
données: [
[120, 450], [240, 580], [50, 210], [512, 1100], [320, 720],
[180, 390], [450, 950], [90, 310], [600, 1340], [150, 410]
],
styleÉlément: { couleur: '#aa00ff' }
}]
};7. Diagramme en étoile (Licences de code multi-niveaux)
Visualisez les relations hiérarchiques avec des anneaux concentriques. Notre plateforme agit comme un organisme créateur de graphiques pour simplifier les configurations de données complexes et imbriquées comme celle-ci.
option = {
titre: { texte: 'Composition des licences du code source', gauche: 'centre' },
séries: [{
type: 'en étoile',
rayon: [0, '90%'],
données: [{
nom: 'Open Source',
enfants: [
{ nom: 'Libre', enfants: [{ nom: 'MIT', valeur: 55 }, { nom: 'Apache 2.0', valeur: 30 }] },
{ nom: 'Copyleft', enfants: [{ nom: 'GPLv3', valeur: 12 }] }
]
}, {
nom: 'Propriétaire',
enfants: [{ nom: 'Fournisseur commercial', valeur: 18 }]
}]
}]
};8. Diagramme de Sankey (Analyseur de flux des coûts d’infrastructure)
Suivez le mappage des ressources opérationnelles ou les variables financières à travers les étapes de calcul grâce à des liens de poids de nœuds fluides.
option = {
titre: { texte: 'Analyseur de flux des coûts d'infrastructure' },
info-bulle: { déclencheur: 'élément', déclencheurSur: 'déplacementSouris' },
séries: [{
type: 'sankey',
données: [
{ nom: 'Budget total' }, { nom: 'AWS Cloud' }, { nom: 'Outils SaaS' },
{ nom: 'Calcul EC2' }, { nom: 'Stockage RDS' }, { nom: 'Surveillance' }
],
liens: [
{ source: 'Budget total', target: 'AWS Cloud', valeur: 8000 },
{ source: 'Budget total', target: 'Outils SaaS', valeur: 2000 },
{ source: 'AWS Cloud', target: 'Calcul EC2', valeur: 5500 },
{ source: 'AWS Cloud', target: 'Stockage RDS', valeur: 2500 },
{ source: 'Outils SaaS', target: 'Surveillance', valeur: 2000 }
],
styleLigne: { couleur: 'source', courbure: 0.5 }
}]
};9. Carte de chaleur (Grille de vitesse de déploiement horaire)
Surveillez facilement les densités systémiques, les volumes de déploiement ou les changements continus du trafic à travers des matrices de délais personnalisées.
option = {
titre: { texte: 'Vitesse de déploiement horaire', gauche: 'centre' },
info-bulle: { position: 'haut' },
grille: { hauteur: '50%', haut: '15%' },
axeX: { type: 'catégorie', données: ['12h', '4h', '8h', '12h', '16h', '20h'], zoneDivision: { afficher: true } },
axeY: { type: 'catégorie', données: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'], zoneDivision: { afficher: true } },
carteVisuelle: { min: 0, max: 30, type: 'continue', orientation: 'horizontale', gauche: 'centre', bas: '15%' },
séries: [{
nom: 'Déploiements',
type: 'carteChaleur',
données: [[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]],
étiquette: { afficher: true },
miseEnValeur: { styleÉlément: { ombreFloue: 10, couleurOmbre: 'rgba(0, 0, 0, 0.5)' } }
}]
};Libérez le pouvoir de l’automatisation texte-diagramme dès aujourd’hui
Que vous ayez besoin d’un créateur de graphiques pour traduire des métriques brutes d’affaires ou une toile centralisée pour des cartes d’ingénierie structurelle, VPasCode rationalise vos flux de travail quotidiens. Dites adieu aux applications fragmentées et aux bibliothèques de visualisation fragiles.
Prêt à transformer vos structures de données en tableaux de bord visuels interactifs ?
Explorez la toile complète, essayez ces modèles et testez gratuitement notre performance de rendu.
Lancez maintenant l’éditeur en direct de VPasCode →