Di Visual Paradigm, kami terus mendorong batas-batas bagaimana para pengembang, analis data, dan profesional teknologi memvisualisasikan sistem dan dataset yang kompleks. Baru-baru ini, kami memperkenalkanVPasCode, sebuah platform teks ke diagram terpadu yang dirancang untuk menghilangkan hambatan saat beralih antar alat menggambar yang berbeda. Dengan mendukung opsi sintaks populer seperti Mermaid, PlantUML, dan Graphviz dalam satu lingkungan pengembang terintegrasi, VPasCode dengan cepat menjadi ekosistem pilihan untuk rendering diagram yang cepat dan akurat.
Hari ini, kami sangat senang mengumumkan peningkatan besar pada alat bantu kami:VPasCode kini mendukung Apache ECharts secara native. Penambahan ini mengubah lingkungan diagram kami menjadi pembuat grafik yang sangat fleksibel dan berbasis kodepembuat grafik. Sekarang Anda dapat mengubah konfigurasi JSON atau deskripsi yang dibantu AI menjadi visualisasi data yang kaya dan interaktif secara real time.
Dengan antarmuka sampingan yang kami miliki, mekanismenya tetap sederhana dan intuitif: masukkan objek konfigurasi ECharts di panel kiri, dan komponen dashboard interaktif Anda akan dirender secara mulus di panel kanan.
Mengapa Memilih VPasCode sebagai Pembuat Grafik Anda?
Sementara perangkat lunak pembuatan grafik statis standar memaksa Anda menyeret, melepas, dan menyesuaikan piksel secara manual, VPasCode sepenuhnya mengandalkan kode terstruktur. Mengintegrasikan ECharts membuka keunggulan khusus bagi tim teknis modern:
- Arsitektur Terpadu: Beralih dengan mudah antara kerangka arsitektur aplikasi (melalui PlantUML/Mermaid) dan dashboard analitik data (melalui ECharts) dalam tab yang sama.
- Alur Kerja yang Didorong AI: Manfaatkan platform kami sebagai pembuat grafik cerdaspembuat grafik AI. Jelaskan kebutuhan data Anda secara alami (melalui Chatbot Diagram AI kami), dan lihat visualisasi yang akurat dibuat secara otomatis tanpa penataan manual.
- Status yang Sangat Dapat Dibagikan: Setiap konfigurasi diagram dikompresi menjadi URL unik yang dapat dibagikan, sehingga sangat mudah untuk berkolaborasi dalam ulasan kode, dokumentasi wiki, atau presentasi klien langsung.
Menjelajahi Contoh Langsung ECharts di VPasCode
Untuk menunjukkan kinerja dari pembuat grafik kami yang diperbaruipembuat grafik, kami telah menyiapkan beberapa template visualisasi data tingkat produksi. Anda dapat berinteraksi langsung dengan setiap contoh dengan mengunjungi tautan playground pendukungnya.
1. Grafik Batang Tumpuk (Analisis Penjualan Regional)
Sempurna untuk melihat total absolut di antara kelompok sambil memecah distribusi kategorikal secara bersamaan.
option = {
title: { text: 'Penjualan Triwulanan Berdasarkan Wilayah' },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['Utara', 'Selatan', 'Timur', 'Barat'] },
xAxis: { type: 'value', name: 'Pendapatan (dalam $1.000)' },
yAxis: { type: 'category', data: ['K1', 'K2', 'K3', 'K4'] },
series: [
{ name: 'Utara', type: 'bar', stack: 'Total', data: [85, 120, 95, 150] },
{ name: 'Selatan', type: 'bar', stack: 'Total', data: [65, 90, 110, 130] },
{ name: 'Timur', type: 'bar', stack: 'Total', data: [45, 70, 85, 100] },
{ name: 'Barat', type: 'bar', stack: 'Total', data: [30, 50, 60, 75] }
]
};2. Grafik Garis dengan Area yang Diarsir (Pertumbuhan Situs Web Bulanan)
Dirancang untuk melacak perubahan kronologis dengan interpolasi yang halus dan penataan grid yang bersih.
option = {
title: { text: 'Kunjungan Bulanan', left: 'center' },
tooltip: { trigger: 'axis' },
grid: { left: 40, right: 20, top: 50, bottom: 30, containLabel: true },
xAxis: { type: 'category', data: ['Jan','Feb','Mar','Apr','Mei','Jun'] },
yAxis: { type: 'value' },
series: [{
name: 'Kunjungan',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
areaStyle: { opacity: 0.3 }
}]
};3. Grafik Area Kustom (Highlight Cerah)
Tampilan yang sangat baik mengenai fleksibilitas gaya di mana warna garis, konfigurasi batas, dan opasitas isian dapat dimanipulasi secara instan.
option = {
title: { text: 'Kunjungan Situs Web Bulanan (2026)' },
xAxis: { type: 'category', boundaryGap: false, data: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', '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. Grafik Pie Interaktif (Campuran Referensi Lalu Lintas)
Tata letak klasik untuk menghitung pangsa pasar relatif atau sumber lalu lintas, dilengkapi dengan wadah legenda bawah yang bersih.
option = {
title: { text: 'Referer Situs Web', left: 'center' },
tooltip: { trigger: 'item' },
legend: { bottom: 10 },
series: [
{
name: 'Akses Dari',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Mesin Pencari' },
{ value: 735, name: 'Langsung' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Iklan Union' },
{ value: 300, name: 'Iklan Video' }
]
}
]
};5. Grafik Radar (Perbandingan Arsitektur Service Mesh)
Struktur grafik multivariat yang sering digunakan untuk mengevaluasi kemampuan teknis, benchmark perangkat lunak, atau kriteria arsitektur kompleks secara berdampingan.
option = {
title: { text: 'Penilaian Kemampuan Service Mesh' },
tooltip: {},
radar: {
indicator: [
{ name: 'Throughput (RPS)', max: 100 },
{ name: 'Toleransi Kesalahan', max: 100 },
{ name: 'Efisiensi Memori', max: 100 },
{ name: 'Observability', max: 100 },
{ name: 'Keamanan/TLS', max: 100 }
]
},
series: [{
name: 'Profil Layanan',
type: 'radar',
data: [
{ value: [85, 90, 55, 95, 80], name: 'Node Proxy Go', areaStyle: { opacity: 0.3 } },
{ value: [40, 75, 90, 60, 90], name: 'Gateway Java Lama', areaStyle: { opacity: 0.1 } }
]
}]
};6. Plot Sebaran (Profil Metrik Latensi Inference)
Sangat baik untuk mengidentifikasi lonjakan outlier, ambang batas ukuran payload, dan kemacetan aplikasi di seluruh infrastruktur terdistribusi.
option = {
title: { text: 'Latensi Inference vs Ukuran Payload', left: 'center' },
tooltip: { trigger: 'item', formatter: function (p) { return 'Ukuran: ' + p.value[0] + ' KB<br />Latensi: ' + p.value[1] + ' ms'; } },
xAxis: { name: 'Ukuran Payload (KB)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
yAxis: { name: 'Latensi (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. Grafik Sunburst (Lisensi Kode Berjenjang)
Visualisasikan hubungan hierarkis dengan lingkaran bersarang. Platform kami berfungsi sebagai pembuat grafik organikpembuat grafik untuk menyederhanakan konfigurasi data bersarang yang kompleks seperti ini.
option = {
judul: { teks: 'Komposisi Lisensi Kode', kiri: 'center' },
seri: [{
jenis: 'sunburst',
radius: [0, '90%'],
data: [{
nama: 'Open Source',
anak: [
{ nama: 'Permissive', anak: [{ nama: 'MIT', nilai: 55 }, { nama: 'Apache 2.0', nilai: 30 }] },
{ nama: 'Copyleft', anak: [{ nama: 'GPLv3', nilai: 12 }] }
]
}, {
nama: 'Proprietary',
anak: [{ nama: 'Vendor Komersial', nilai: 18 }]
}]
}]
};8. Diagram Sankey (Penganalisis Aliran Biaya Infrastruktur)
Lacak pemetaan sumber daya operasional atau variabel keuangan melalui langkah-langkah komputasi dengan tautan bobot node yang mengalir.
option = {
judul: { teks: 'Penganalisis Aliran Biaya Infrastruktur' },
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
seri: [{
jenis: 'sankey',
data: [
{ nama: 'Total Anggaran' }, { nama: 'AWS Cloud' }, { nama: 'SaaS Tooling' },
{ nama: 'EC2 Compute' }, { nama: 'RDS Storage' }, { nama: 'Monitoring' }
],
tautan: [
{ sumber: 'Total Anggaran', target: 'AWS Cloud', nilai: 8000 },
{ sumber: 'Total Anggaran', target: 'SaaS Tooling', nilai: 2000 },
{ sumber: 'AWS Cloud', target: 'EC2 Compute', nilai: 5500 },
{ sumber: 'AWS Cloud', target: 'RDS Storage', nilai: 2500 },
{ sumber: 'SaaS Tooling', target: 'Monitoring', nilai: 2000 }
],
gayaGaris: { warna: 'sumber', kelengkungan: 0.5 }
}]
};9. Peta Panas (Kisi Kecepatan Deploi Harian)
Pantau kerapatan sistemik, volume deploi, atau pergeseran lalu lintas berkelanjutan melalui matriks waktu kustom dengan mudah.
option = {
judul: { teks: 'Kecepatan Deploi Per Jam', kiri: 'center' },
tooltip: { posisi: 'atas' },
grid: { tinggi: '50%', atas: '15%' },
sumbuX: { jenis: 'kategori', data: ['12am', '4am', '8am', '12pm', '4pm', '8pm'], areaPemisah: { tampilkan: true } },
sumbuY: { jenis: 'kategori', data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'], areaPemisah: { tampilkan: true } },
petaVisual: { min: 0, maks: 30, jenis: 'kontinu', orientasi: 'horizontal', kiri: 'center', bawah: '15%' },
seri: [{
nama: 'Deploi',
jenis: 'peta panas',
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: { tampilkan: true },
penekanan: { gayaItem: { bayanganBlur: 10, bayanganWarna: 'rgba(0, 0, 0, 0.5)' } }
}]
};Buka Kekuatan Otomasi Teks ke Diagram Hari Ini
Baik Anda membutuhkan pembuat grafikuntuk menerjemahkan metrik bisnis mentah atau kanvas terpusat untuk peta rekayasa struktural, VPasCode menyederhanakan alur kerja harian Anda. Ucapkan selamat tinggal pada aplikasi yang terpecah dan perpustakaan visualisasi yang rapuh.
Siap mengubah struktur data Anda menjadi dashboard visual interaktif?
Jelajahi seluruh kanvas, coba template ini, dan uji kinerja rendering kami secara gratis.
Mulai Editor VPasCode Langsung Sekarang →