W Visual Paradigm stale poszerzamy granice sposobu, w jaki deweloperzy, analitycy danych i specjaliści IT wizualizują złożone systemy i zestawy danych. Nagle wprowadziliśmyVPasCode, jednolitą platformę konwersji tekstu na schematy zaprojektowaną w celu usunięcia problemów wynikających z przełączania się między wieloma narzędziami do rysowania. Dzięki obsłudze popularnych składni takich jak Mermaid, PlantUML i Graphviz w jednym zintegrowanym środowisku dla deweloperów, VPasCode szybko stał się preferowanym ekosystemem do szybkiej i dokładnej wizualizacji schematów.
Dziś z radością ogłaszamy ważną poprawkę naszego zestawu narzędzi:VPasCode teraz natywnie obsługuje Apache ECharts. Ta dodatkowa funkcja przekształca nasze środowisko do tworzenia schematów w bardzo elastyczny, oparty na kodzietwórca wykresów. Teraz możesz przekształcać konfiguracje JSON lub opisy wspomagane przez AI w bogate, interaktywne wizualizacje danych w czasie rzeczywistym.
Dzięki naszemu interfejsowi obok siebie mechanika pozostaje prosta i intuicyjna: wprowadź obiekt konfiguracji ECharts w lewym panelu, a interaktywne elementy pulpitu kontrolnego będą bezproblemowo renderowane w prawym panelu.
Dlaczego wybrać VPasCode jako generator wykresów?
Podczas gdy standardowe oprogramowanie do tworzenia statycznych wykresów wymusza przeciąganie, upuszczanie i ręczne dopasowanie poszczególnych pikseli, VPasCode opiera się całkowicie na strukturalnym kodzie. Integracja ECharts otwiera wyraźne zalety dla nowoczesnych zespołów technicznych:
- Zintegrowana architektura: Łatwo przełączaj się między szkicami architektury aplikacji (przez PlantUML/Mermaid) a pulpitami analizy danych (przez ECharts) w tym samym zakładce.
- Przepływy sterowane przez AI:Wykorzystaj naszą platformę jako inteligentnygenerator wykresów z AI. Opisz swoje wymagania dotyczące danych naturalnie (w naszym czatbotcie do projektowania schematów z AI), a zobacz dokładne wizualizacje tworzone automatycznie bez ręcznego stylizowania.
- Wysoko udostępnialne stany: Każda konfiguracja schematu jest kompresowana do unikalnego, udostępnianego adresu URL, co ułatwia niezwykle współpracę podczas przeglądów kodu, dokumentacji wiki lub prezentacji dla klientów w czasie rzeczywistym.
Przeglądanie przykładów wykresów ECharts w VPasCode
Aby pokazać wydajność naszego ulepszonychgeneratora wykresów, przygotowaliśmy kilka szablonów wizualizacji danych o poziomie produkcyjnym. Możesz interaktywnie pracować z każdym przykładem, odwiedzając dołączone linki do playgroundów.
1. Wykres słupkowy skumulowany (analiza sprzedaży regionalnej)
Idealny do analizy całkowitych wartości w grupach, jednocześnie pokazując rozkład kategorii.
option = {
title: { text: 'Sprzedaż kwartalna według regionu' },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['Północ', 'Południe', 'Wschód', 'Zachód'] },
xAxis: { type: 'value', name: 'Przychód (w $1 000)' },
yAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
series: [
{ name: 'Północ', type: 'bar', stack: 'Razem', data: [85, 120, 95, 150] },
{ name: 'Południe', type: 'bar', stack: 'Razem', data: [65, 90, 110, 130] },
{ name: 'Wschód', type: 'bar', stack: 'Razem', data: [45, 70, 85, 100] },
{ name: 'Zachód', type: 'bar', stack: 'Razem', data: [30, 50, 60, 75] }
]
};2. Wykres liniowy z zacieniowanym obszarem (Miesięczny wzrost liczby odwiedzin strony internetowej)
Stworzony do śledzenia zmian chronologicznych z gładkimi interpolacjami i czystymi ustawieniami siatki.
option = {
title: { text: 'Miesięczne odwiedziny', left: 'center' },
tooltip: { trigger: 'axis' },
grid: { left: 40, right: 20, top: 50, bottom: 30, containLabel: true },
xAxis: { type: 'category', data: ['Sty','Lut','Mar','Kwi','Maj','Cze'] },
yAxis: { type: 'value' },
series: [{
name: 'Odwiedziny',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
areaStyle: { opacity: 0.3 }
}]
};3. Własny wykres obszarowy (jasne akcenty)
Wyjątkowo dobry przykład elastyczności stylizacji, gdzie kolory linii, konfiguracje granic i przezroczystość wypełnienia można natychmiast zmieniać.
option = {
title: { text: 'Miesięczne odwiedziny strony internetowej (2026)' },
xAxis: { type: 'category', boundaryGap: false, data: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip'] },
yAxis: { type: 'value' },
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
areaStyle: { color: '#ff6b6b' },
lineStyle: { color: '#e03131' },
itemStyle: { color: '#e03131' }
}]
};4. Interaktywny wykres kołowy (mieszanka źródeł ruchu)
Klasyczny układ do obliczania udziału rynkowego lub źródeł ruchu, z kompletnym czystym kontenerem legendy u dołu.
option = {
title: { text: 'Źródło odwiedzin strony internetowej', left: 'center' },
tooltip: { trigger: 'item' },
legend: { bottom: 10 },
series: [
{
name: 'Źródło dostępu',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Wyszukiwarki' },
{ value: 735, name: 'Bezpośrednio' },
{ value: 580, name: 'E-mail' },
{ value: 484, name: 'Reklamy Unii' },
{ value: 300, name: 'Reklamy wideo' }
]
}
]
};5. Wykres radarowy (porównanie architektury sieci usług)
Struktura wykresu wielowymiarowego często używana do oceny możliwości technicznych, benchmarków oprogramowania lub złożonych kryteriów architektury w porównaniu boczne przez boczne.
option = {
title: { text: 'Ocena możliwości sieci usług' },
tooltip: {},
radar: {
indicator: [
{ name: 'Przepustowość (RPS)', max: 100 },
{ name: 'Wytrzymałość na błędy', max: 100 },
{ name: 'Efektywność pamięci', max: 100 },
{ name: 'Obserwability', max: 100 },
{ name: 'Bezpieczeństwo/TLS', max: 100 }
]
},
series: [{
name: 'Profil usługi',
type: 'radar',
data: [
{ value: [85, 90, 55, 95, 80], name: 'Węzeł proxy Go', areaStyle: { opacity: 0.3 } },
{ value: [40, 75, 90, 60, 90], name: 'Stary bramka Java', areaStyle: { opacity: 0.1 } }
]
}]
};6. Wykres rozproszenia (profil metryki opóźnienia wnioskowania)
Doskonały do identyfikowania skoków odstających, progów rozmiaru ładunku i wąskich gardeł aplikacji w rozproszonych infrastrukturach.
option = {
title: { text: 'Opóźnienie wnioskowania w stosunku do rozmiaru ładunku', left: 'center' },
tooltip: { trigger: 'item', formatter: function (p) { return 'Rozmiar: ' + p.value[0] + ' KB<br />Opóźnienie: ' + p.value[1] + ' ms'; } },
xAxis: { name: 'Rozmiar ładunku (KB)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
yAxis: { name: 'Opóźnienie (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. Wykres słoneczny (licencjonowanie wielopoziomowe kodu źródłowego)
Wizualizuj relacje hierarchiczne za pomocą koncentrycznych pierścieni. Nasza platforma działa jak organicznytwórca wykresów aby uprościć skomplikowane zagnieżdżone konfiguracje danych, takie jak ta.
option = {
title: { text: 'Skład licencji kodu źródłowego', left: 'center' },
series: [{
type: 'sunburst',
radius: [0, '90%'],
data: [{
name: 'Otwarte źródło',
children: [
{ name: 'Zwolnione', children: [{ name: 'MIT', value: 55 }, { name: 'Apache 2.0', value: 30 }] },
{ name: 'Copyleft', children: [{ name: 'GPLv3', value: 12 }] }
]
}, {
name: 'Własność prywatna',
children: [{ name: 'Dostawca komercyjny', value: 18 }]
}]
}]
};8. Wykres Sankey’ego (analizator przepływu kosztów infrastruktury)
Śledź mapowanie zasobów operacyjnych lub zmienne finansowe na przestrzeni kroków obliczeniowych za pomocą połączonych dynamicznie węzłów o wagach.
option = {
title: { text: 'Analizator przepływu kosztów infrastruktury' },
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
series: [{
type: 'sankey',
data: [
{ name: 'Całkowity budżet' }, { name: 'Chmura AWS' }, { name: 'Narzędzia SaaS' },
{ name: 'Obliczenia EC2' }, { name: 'Przechowywanie RDS' }, { name: 'Monitorowanie' }
],
links: [
{ source: 'Całkowity budżet', target: 'Chmura AWS', value: 8000 },
{ source: 'Całkowity budżet', target: 'Narzędzia SaaS', value: 2000 },
{ source: 'Chmura AWS', target: 'Obliczenia EC2', value: 5500 },
{ source: 'Chmura AWS', target: 'Przechowywanie RDS', value: 2500 },
{ source: 'Narzędzia SaaS', target: 'Monitorowanie', value: 2000 }
],
lineStyle: { color: 'source', curveness: 0.5 }
}]
};9. Mapa ciepła (siatka prędkości wdrażania godzinowa)
Łatwo monitoruj gęstości systemowe, objętości wdrażania lub ciągłe zmiany ruchu w różnych macierzach czasowych.
option = {
title: { text: 'Prędkość wdrażania godzinowa', 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: ['Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob', 'Nied'], splitArea: { show: true } },
visualMap: { min: 0, max: 30, type: 'continuous', orient: 'horizontal', left: 'center', bottom: '15%' },
series: [{
name: 'Wdrożenia',
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)' } }
}]
};Odblokuj moc automatyzacji tekst-z-diagram już dziś
Niezależnie od tego, czy potrzebujesztwórca wykresówdo przetłumaczenia surowych metryk biznesowych lub do centralnego płótna do map inżynierii strukturalnej, VPasCode zoptymalizuje Twoje codzienne zadania. Pożegnaj się z rozdrobnionymi aplikacjami i niestabilnymi bibliotekami wizualizacji.
Gotowy przekształcić swoje struktury danych w interaktywne wizualne pulpity?
Przeglądaj pełne płótno, wypróbuj te szablony i sprawdź naszą wydajność renderowania bezpłatnie.
Uruchom żywy edytor VPasCode już teraz →