{"id":11302,"date":"2026-07-28T15:15:09","date_gmt":"2026-07-28T07:15:09","guid":{"rendered":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/"},"modified":"2026-07-28T15:15:09","modified_gmt":"2026-07-28T07:15:09","slug":"from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts","status":"publish","type":"post","link":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","title":{"rendered":"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts"},"content":{"rendered":"<h2>Pendahuluan<\/h2>\n<p>Di dunia yang didorong oleh data saat ini, kemampuan untuk mengubah angka mentah menjadi cerita visual yang menarik merupakan keterampilan penting. Baik Anda seorang analis bisnis yang menyajikan hasil kuartalan, seorang pengembang yang memantau kinerja aplikasi, atau seorang mahasiswa yang mengerjakan proyek penelitian, grafik dan diagram merupakan alat yang kuat untuk membuat informasi kompleks menjadi mudah dipahami dan terjangkau.<\/p>\n<p>Namun, alat pembuatan grafik tradisional sering kali membutuhkan pekerjaan manual yang luas, keahlian teknis, atau lisensi perangkat lunak mahal. Bagaimana jika Anda bisa membuat grafik profesional dan interaktif hanya dengan deskripsi teks sederhana? Bagaimana jika kecerdasan buatan bisa membuat draf pertama Anda, dan Anda bisa menyempurnakannya dengan kode saat presisi sangat penting?<\/p>\n<p>Panduan komprehensif ini memperkenalkan Anda pada pendekatan revolusioner dalam visualisasi data: menggabungkan bantuan berbasis kecerdasan buatan <a href=\"https:\/\/www.visual-paradigm.com\/features\/ai-chatbot\/\">chatbot<\/a>dengan fleksibilitas pengeditan grafik berbasis kode. Anda akan belajar cara menggunakan chatbot AI Visual Paradigm untuk langsung menghasilkan grafik dari deskripsi bahasa alami, lalu menyempurnakannya menggunakan Visual Paradigm <a href=\"https:\/\/www.visual-paradigm.com\/features\/vpascode\/\">VPasCode<\/a>\u2014sebuah platform diagram berbasis kode yang kuat yang mendukung Apache ECharts, salah satu perpustakaan grafik paling serbaguna yang tersedia saat ini.<\/p>\n<p id=\"SuvJEWd\"><img alt=\"VP Chatbot + VPasCode: Revolutionizing Data Visualization using Echarf\" class=\"alignnone wp-image-13256 size-full\" decoding=\"async\" height=\"572\" loading=\"lazy\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png\" srcset=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png 1024w, https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335-300x168.png 300w, https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335-768x429.png 768w\" width=\"1024\"\/><\/p>\n<p>Pada akhir panduan ini, Anda akan memiliki pengetahuan dan kepercayaan diri untuk membuat visualisasi yang menakjubkan untuk berbagai skenario, mulai dari grafik batang sederhana yang menunjukkan penjualan bulanan hingga diagram Sankey yang kompleks yang melacak aliran energi melintasi berbagai sistem.<\/p>\n<h2>Memahami Alur Kerja Pembuatan Grafik Modern<\/h2>\n<h3>Tantangan dengan Pembuat Grafik Berbasis Kecerdasan Buatan Tradisional<\/h3>\n<p>Pernahkah Anda menggunakan pembuat grafik berbasis kecerdasan buatan untuk membuat visualisasi, hanya untuk menyadari data sedikit tidak sesuai atau warnanya tidak sesuai dengan merek Anda? Meskipun pembuatan grafik berbasis kecerdasan buatan sangat kuat untuk brainstorming dan memulai dengan cepat, hasil AI statis sering kali gagal memenuhi harapan saat tiba waktunya untuk presentasi kepada tim atau klien Anda. Di dunia nyata, Anda membutuhkan fleksibilitas untuk mengedit, menyempurnakan, dan memperbarui data Anda agar sesuai dengan skenario Anda secara tepat.<\/p>\n<h3>Alur Kerja Lengkap: <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-chart-generation-create-with-chatbot-edit-with-vpascode\/\">Buat dengan Chatbot AI, Edit dengan VPasCode<\/a><\/h3>\n<p>Sebuah pembuat grafik berbasis kecerdasan buatan yang benar-benar bermanfaat seharusnya tidak hanya memberi Anda gambar statis dan meninggalkan Anda terjebak. Dengan ekosistem all-in-one Visual Paradigm, Anda mendapatkan alur kerja pembuatan grafik berbasis kecerdasan buatan yang mulus dan fleksibel, yang memberi Anda kelebihan dari kedua dunia:<\/p>\n<ol>\n<li><strong>Ideasi Instan:<\/strong>\u00a0Tanyakan pada <a href=\"https:\/\/www.visual-paradigm.com\/features\/ai-chatbot\/\">Chatbot AI<\/a>untuk menghasilkan jenis grafik yang Anda butuhkan agar bisa langsung memulai desain Anda.<\/li>\n<li><strong>Kontrol Penuh:<\/strong>\u00a0Buka langsung grafik yang dihasilkan di <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/vpascode-echarts-support-chart-maker\/\">VPasCode<\/a>, sebuah editor diagram berbasis kode. Dari sana, Anda dapat dengan bebas mengedit data mentah, menyesuaikan nilai-nilai, dan sepenuhnya menyesuaikan gaya\u2014seperti mengganti warna agar sesuai dengan merek Anda\u2014untuk membuatnya sepenuhnya milik Anda.<\/li>\n<\/ol>\n<p>Alih-alih membuat ulang grafik dari awal hanya karena satu angka berubah, generator grafik berbasis kecerdasan buatan ini memberi Anda titik awal yang sempurna, serta alat tepat yang Anda butuhkan untuk menyelesaikan pekerjaan.<\/p>\n<h2>Memulai dengan VPasCode<\/h2>\n<h3>Apa itu VPasCode?<\/h3>\n<p><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/vpascode-echarts-support-chart-maker\/\">VPasCode<\/a>adalah platform teks-ke-diagram terpadu yang dirancang untuk menghilangkan hambatan saat beralih antar berbagai alat menggambar. 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.<\/p>\n<p>Baru-baru ini, <a href=\"https:\/\/www.visual-paradigm.com\/features\/vpascode\/\">VPasCode<\/a>memperkenalkan native <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/vpascode-echarts-support-chart-maker\/\">dukungan untuk Apache ECharts<\/a>, mengubah lingkungan diagram menjadi pembuat grafik yang sangat fleksibel dan berbasis kode. Anda kini dapat mengubah konfigurasi JSON atau deskripsi yang dibantu AI menjadi visualisasi data yang kaya dan interaktif secara real time.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55b06a06ebf.png\"\/><\/p>\n<p>Dengan antarmuka samping-berdampingan, mekanismenya tetap sederhana dan intuitif: masukkan objek konfigurasi ECharts Anda di panel kiri, dan komponen dashboard interaktif Anda akan dirender secara mulus di panel kanan.<\/p>\n<h3>Mengapa Memilih VPasCode sebagai Pembuat Grafik Anda?<\/h3>\n<p>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:<\/p>\n<ul>\n<li><strong>Arsitektur Terpadu:<\/strong>\u00a0Beralih dengan mudah antara kerangka arsitektur aplikasi (melalui PlantUML\/Mermaid) dan dashboard analitik data (melalui ECharts) dalam tab yang sama.<\/li>\n<li><strong>Alur Kerja yang Didorong AI:<\/strong>\u00a0Manfaatkan platform ini sebagai pembuat grafik AI yang cerdas. Jelaskan kebutuhan data Anda secara alami (di Chatbot Diagraming AI), dan lihat visualisasi yang akurat dibuat secara otomatis tanpa penataan manual.<\/li>\n<li><strong>Status yang Sangat Dapat Dibagikan:<\/strong>\u00a0Setiap konfigurasi diagram dikompresi menjadi URL unik yang dapat dibagikan, sehingga sangat mudah untuk berkolaborasi dalam ulasan kode, dokumentasi wiki, atau presentasi klien langsung.<\/li>\n<\/ul>\n<h2>Pengantar ECharts<\/h2>\n<h3>Apa itu Apache ECharts?<\/h3>\n<p>Apache ECharts adalah perpustakaan visualisasi yang kuat dan open-source yang menyediakan grafik yang intuitif, interaktif, dan sangat dapat disesuaikan. Dibangun berdasarkan JavaScript dan menggunakan HTML5 Canvas untuk rendering, yang berarti grafik Anda akan halus, cepat, dan berjalan di semua peramban modern.<\/p>\n<h3>Konsep Kunci untuk Pemula<\/h3>\n<p><strong>1. Objek Opsi<\/strong><br \/>\nSetiap grafik ECharts didefinisikan oleh objek konfigurasi yang disebut\u00a0<code data-backticks=\"1\">option<\/code>. Objek JavaScript ini berisi semua pengaturan untuk grafik Anda, termasuk:<\/p>\n<ul>\n<li>Nilai data<\/li>\n<li>Jenis grafik<\/li>\n<li>Warna dan gaya<\/li>\n<li>Konfigurasi sumbu<\/li>\n<li>Tooltip dan interaksi<\/li>\n<\/ul>\n<p><strong>2. Seri<\/strong><br \/>\nBagian\u00a0<code data-backticks=\"1\">series<\/code>\u00a0array adalah tempat Anda menentukan jenis grafik yang ingin Anda buat (batang, garis, lingkaran, dll.) dan memberikan data sebenarnya. Setiap seri dapat memiliki properti yang berbeda seperti:<\/p>\n<ul>\n<li><code data-backticks=\"1\">tipe<\/code>: Jenis grafik (misalnya, \u2018batang\u2019, \u2018garis\u2019, \u2018lingkaran\u2019)<\/li>\n<li><code data-backticks=\"1\">data<\/code>: Dataset Anda<\/li>\n<li><code data-backticks=\"1\">nama<\/code>: Label untuk legenda<\/li>\n<\/ul>\n<p><strong>3. Sumbu<\/strong><br \/>\nUntuk sebagian besar grafik, Anda akan mengonfigurasi:<\/p>\n<ul>\n<li><code data-backticks=\"1\">sumbuX<\/code>: Sumbu horizontal (kategori atau nilai)<\/li>\n<li><code data-backticks=\"1\">sumbuY<\/code>: Sumbu vertikal (nilai atau kategori)<\/li>\n<\/ul>\n<p><strong>4. Tooltip<\/strong><br \/>\nTooltip muncul saat pengguna mengarahkan kursor ke elemen grafik, menampilkan informasi rinci tentang titik data tertentu.<\/p>\n<h2>Menggunakan Chatbot AI untuk Pembuatan Grafik Instan<\/h2>\n<h3>Mengakses Chatbot AI<\/h3>\n<p>Chatbot AI adalah pintu masuk Anda untuk pembuatan grafik instan. Cukup kunjungi AI Toolbox dan mulailah dengan permintaan sederhana. Tidak perlu pengetahuan pemrograman\u2014cukup jelaskan apa yang ingin Anda visualisasikan dalam bahasa Inggris yang sederhana.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/ai-toolbox.visual-paradigm.com_app_chatbot-v2_Windows-widescreen.png\"\/><\/p>\n<h3>Membuat Permintaan yang Efektif<\/h3>\n<p>Kunci untuk mendapatkan hasil yang hebat dari <a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-chatbot\/\">Chatbot AI<\/a>adalah menulis permintaan yang jelas dan spesifik. Berikut rumusnya:<\/p>\n<p><strong>Struktur Dasar:<\/strong><br \/>\n\u201cBuat sebuah [jenis grafik] yang menunjukkan [apa yang Anda ukur] berdasarkan [kategori\/waktu periode]\u201d<\/p>\n<p><strong>Contoh:<\/strong><\/p>\n<ul>\n<li>\u201cBuat grafik batang untuk lalu lintas situs web bulanan\u201d<\/li>\n<li>\u201cBuat grafik lingkaran yang menunjukkan pangsa pasar dari 5 merek ponsel teratas\u201d<\/li>\n<li>\u201cBuat grafik garis jumlah pengunjung situs web per bulan\u201d<\/li>\n<\/ul>\n<h3>Alur Kerja Contoh<\/h3>\n<p>Mari kita bahas contoh lengkap:<\/p>\n<p><strong>Langkah 1: Mulai dengan Permintaan<\/strong><br \/>\nKetik: \u201cHasilkan grafik batang untuk lalu lintas situs web bulanan\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a59860e871a9.png\"\/><\/p>\n<p><strong>Langkah 2: Tinjau Grafik yang Dibuat<\/strong><br \/>\nChatbot akan membuat grafik dengan data contoh. Tinjau grafik tersebut untuk memastikan strukturnya sudah benar.<\/p>\n<p><strong>Langkah 3: Buka di VPasCode<\/strong><br \/>\nKlik untuk membuka grafik di <a href=\"https:\/\/www.archimetric.com\/case-study-vpascode-revolutionizing-system-architecture-documentation-through-diagram-as-code-3\/\">editor VPasCode<\/a>di mana Anda dapat:<\/p>\n<ul>\n<li>Ganti data contoh dengan angka aktual Anda<\/li>\n<li>Ubah warna agar sesuai dengan merek Anda<\/li>\n<li>Sesuaikan label dan format<\/li>\n<li>Tambahkan fitur interaktivitas<\/li>\n<\/ul>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/www.vpascode.com_Windows-widescreen.png\"\/><\/p>\n<p><strong>Langkah 4: Sesuaikan dan Ekspor<\/strong><br \/>\nLakukan perubahan Anda dan bagikan hasil akhir melalui URL atau ekspor untuk presentasi.<\/p>\n<h2>Jenis Grafik dan Kasus Penggunaan<\/h2>\n<p>Kami <a href=\"https:\/\/blog.visual-paradigm.com\/ai-chatbot-a-comprehensive-guide-to-visual-modeling\/\">alat pembuatan grafik AI<\/a>kini dapat membuat beragam tata letak secara langsung dari petunjuk teks Anda. Mari kita jelajahi berbagai jenis grafik dan kapan menggunakan masing-masing.<\/p>\n<h3>Format Klasik<\/h3>\n<h4>Grafik Garis<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Menampilkan tren seiring waktu, melacak perubahan, membandingkan berbagai seri data<\/p>\n<p><strong>\u00a0Contoh Permintaan:<\/strong>\u00a0\u201cHasilkan grafik garis dari pengunjung situs web per bulan\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d83e0f1216.png\"\/><\/p>\n<p>Grafik garis sangat unggul dalam menampilkan data kontinu dan sangat cocok untuk menunjukkan pola pertumbuhan, tren musiman, atau metrik kinerja seiring waktu.<\/p>\n<h4>Grafik Area<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Memvisualisasikan total kumulatif, menunjukkan perubahan volume, menekankan besarnya nilai<\/p>\n<p><strong>\u00a0Contoh Permintaan:<\/strong>\u00a0\u201cHasilkan grafik area yang memvisualisasikan penjualan kumulatif per kuartal\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d835d91117.png\"\/><\/p>\n<p>Grafik area mirip grafik garis tetapi dengan area di bawah garis yang diisi, sehingga sangat ideal untuk menunjukkan bagaimana bagian-bagian yang berbeda berkontribusi terhadap keseluruhan seiring waktu.<\/p>\n<h4>Diagram Batang dan Diagram Kolom<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Membandingkan kategori, menampilkan peringkat, menampilkan data diskret<\/p>\n<p><strong>\u00a0Contoh Petunjuk:<\/strong>\u00a0\u201cHasilkan diagram batang bertumpuk yang menunjukkan penjualan kuartalan berdasarkan wilayah\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a598eaef341d.png\"\/><\/p>\n<p>Diagram batang (horizontal) dan diagram kolom (vertikal) adalah jenis diagram yang paling serbaguna, sangat cocok untuk membandingkan nilai-nilai di berbagai kategori.<\/p>\n<h3>Pemecahan Proporsional<\/h3>\n<h4>Diagram Lingkaran<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Menampilkan bagian dari keseluruhan, menampilkan persentase, komposisi sederhana<\/p>\n<p><strong>\u00a0Contoh Petunjuk:<\/strong>\u00a0\u201cBuat diagram lingkaran yang menunjukkan pangsa pasar dari 5 merek ponsel cerdas teratas\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d8446df1da.png\"\/><\/p>\n<p>Diagram lingkaran bekerja paling baik ketika Anda memiliki jumlah kategori yang kecil (idealnya 5-7) dan ingin menunjukkan kontribusi masing-masing terhadap 100%.<\/p>\n<h4>Diagram Donat<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Mirip dengan diagram lingkaran tetapi memiliki lubang di tengah untuk informasi tambahan atau estetika<\/p>\n<p><strong>\u00a0Contoh Petunjuk:<\/strong>\u00a0\u201cHasilkan diagram donat yang menunjukkan pemecahan persentase pengeluaran perusahaan\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d8471f2f21.png\"\/><\/p>\n<p>Diagram donat menawarkan fungsi yang sama seperti diagram lingkaran tetapi dengan tampilan yang lebih modern dan kemampuan untuk menampilkan total atau label di tengah.<\/p>\n<h4>Diagram Mawar Nightingale<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Membandingkan data siklikal, menampilkan pola periodik, perbandingan radial<\/p>\n<p>Diagram khusus ini menampilkan data dalam format melingkar dengan jari-jari yang bervariasi, menjadikannya sangat baik untuk menunjukkan pola musiman atau tren siklikal.<\/p>\n<h4>Diagram Sunburst<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Memvisualisasikan data hierarkis, menunjukkan hubungan bersarang, pemecahan multi-level<\/p>\n<p><strong>\u00a0Contoh Petunjuk:<\/strong>\u00a0\u201cHasilkan diagram sunburst yang memvisualisasikan pemecahan hierarkis lalu lintas situs web, dari saluran sumber lalu lintas hingga halaman masuk tertentu\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d80c3f0871.png\"\/><\/p>\n<p>Diagram sunburst menampilkan data hierarkis sebagai cincin-cincin bersarang, di mana setiap cincin mewakili satu tingkat dalam hierarki.<\/p>\n<h3>Kinerja &amp; Pelacakan<\/h3>\n<h4>Grafik Radar<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Membandingkan beberapa variabel, menunjukkan kekuatan dan kelemahan, profil<\/p>\n<p><strong>\u00a0Contoh Petunjuk:<\/strong>\u00a0\u201cHasilkan grafik radar yang menunjukkan tingkat keterampilan karyawan dalam sebuah tim\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-17-at-10.15.42-AM.png\"\/><\/p>\n<p>Grafik radar (juga disebut grafik laba-laba) menampilkan data multivariat pada sumbu yang dimulai dari titik yang sama, menjadikannya sempurna untuk membandingkan profil atau kemampuan.<\/p>\n<h4>Grafik Sebar<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Mengidentifikasi korelasi, menemukan pencilan, menunjukkan hubungan antara dua variabel<\/p>\n<p>Grafik sebar menggunakan titik-titik untuk mewakili nilai-nilai dari dua variabel numerik yang berbeda, membantu Anda mengidentifikasi pola, kelompok, dan anomali dalam data Anda.<\/p>\n<h4>Diagram Corong<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Memvisualisasikan tahapan dalam proses, menunjukkan tingkat konversi, melacak kemajuan<\/p>\n<p>Grafik corong sangat ideal untuk saluran penjualan, corong pemasaran, atau proses apa pun di mana barang bergerak melalui tahapan berurutan dengan jumlah yang berkurang.<\/p>\n<h4>Meteran Pengukur<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Menampilkan metrik tunggal, menunjukkan kemajuan menuju tujuan, dashboard KPI<\/p>\n<p>Grafik meteran meniru speedometer atau alat ukur, memberikan indikator visual langsung tentang di mana nilai berada dalam rentang tertentu.<\/p>\n<h3>Aliran &amp; Tren Lanjutan<\/h3>\n<h4>Diagram Sankey<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Menunjukkan aliran dan transfer, memvisualisasikan aliran energi atau material, melacak konversi<\/p>\n<p><strong>\u00a0Contoh Petunjuk:<\/strong>\u00a0\u201cHasilkan diagram Sankey yang menunjukkan aliran energi dari sumber utama ke penggunaan akhir\u201d<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d7d9b926de.png\"\/><\/p>\n<p>Diagram Sankey menggunakan garis yang mengalir dengan lebar yang berbeda untuk menunjukkan bagaimana kuantitas bergerak antar node yang berbeda, menjadikannya sempurna untuk memvisualisasikan anggaran, aliran energi, atau perjalanan pengguna.<\/p>\n<h4>Sungai Tema<\/h4>\n<p><strong>Terbaik Digunakan Untuk:<\/strong>\u00a0Menampilkan perubahan komposisi seiring waktu, menunjukkan evolusi tema<\/p>\n<p>Grafik sungai tema adalah grafik area khusus yang menunjukkan bagaimana tema atau kategori yang berbeda berkembang dan berubah secara proporsional seiring waktu.<\/p>\n<h2>Langkah demi Langkah: Membuat Grafik Pertama Anda<\/h2>\n<p>Mari kita bahas membuat grafik lengkap dari awal menggunakan Chatbot AI dan VPasCode.<\/p>\n<h3>Langkah 1: Tentukan Tujuan Anda<\/h3>\n<p>Sebelum Anda mulai, tanyakan pada diri sendiri:<\/p>\n<ul>\n<li>Cerita apa yang ingin saya sampaikan?<\/li>\n<li>Siapa audiens saya?<\/li>\n<li>Grafik jenis apa yang paling baik mewakili data ini?<\/li>\n<li>Apa saja wawasan utama yang ingin saya soroti?<\/li>\n<\/ul>\n<h3>Langkah 2: Hasilkan dengan Chatbot AI<\/h3>\n<p>Kunjungi Chatbot AI dan masukkan petunjuk Anda. Misalnya:<\/p>\n<p><strong>Petunjuk:<\/strong>\u00a0\u201cHasilkan grafik batang yang menunjukkan penjualan kuartalan berdasarkan wilayah\u201d<\/p>\n<p>Chatbot akan menghasilkan grafik dengan data contoh yang dapat Anda gunakan sebagai titik awal.<\/p>\n<h3>Langkah 3: Buka di VPasCode<\/h3>\n<p>Klik tautan untuk membuka grafik Anda di VPasCode. Anda akan melihat:<\/p>\n<ul>\n<li><strong>Panel Kiri:<\/strong>\u00a0Kode konfigurasi ECharts<\/li>\n<li><strong>Panel Kanan:<\/strong>\u00a0Pratinjau grafik langsung dan interaktif<\/li>\n<\/ul>\n<h3>Langkah 4: Sesuaikan Data Anda<\/h3>\n<p>Ganti data contoh dengan angka aktual Anda. Misalnya:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqNkbFug0AMQPdI+QcPlWglBgghaag6dOhalaRShyiDEyxy6pVDh0lBUf69PgptVGXIcPYZ7j37wJSsTAGPcByPAFixpgSOwNRwAl5ao2WyuoUVaqpg28KScgE8OPkdYIxmVXaIVXlOVihsVOX54NKrUQW7h\/K+LUXtVXvMzJfwvUFTTkXmDmTImMDaezGW98J7K1P\/bJ6xYpffSfKmB5sn8Z+JD6hrklMFfrpySQcqaoJbVcBN6AdBcDcM3f4jd8iUG9sKPMyQhq5fOuli1MXpb+eKrCIRrF0B4ulbDoP32i1aKSrG3YdUb4ZR\/3W4j30IJ4EPC7eJg8F9phuuf41uJpaF2MLQheiSrv+IV+mmopuLqZsyuGTrfsWVtkhMsayZrHksMufajEenh2+XTbPp\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqNkU1vwjAMhu9I\/AcfJmWTqqkFCoNph3HtBWlMOyAOHrVKRppUabpRIf77nNIONHHgEPfNh5\/Xdk3hpNHwAod+D8BJp2gGB3C0dzMQC9JfFSrUkFRoXaPmZFMs0e5Yf0iFNW4FHIMm3RjlZNEArMwysszAvSxFAP6zMFI7f8j3dcFGotxian44vyUoykin\/kGKDmewEu8OLXK+eCPFR9rLpcwr68Wc75xYt8n7V\/a4gH+jqoifaczp1EyKhWfAfcqt5HAXPYZh+NCVX\/\/L36CjzNiaEV01SeRtk0ETh00c\/fmXZCUxYOU3wJzWuGuhxX6ir710uNnxbml4rGeHpziAaBAGMPUiDjv2Be48iFuAY+ZMmRdFPgyvAbtx3sQbMW\/CqKbQ8Bru9FNuxA0ZFfMa85rETPOwdb93fP4FYo6+bw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n  title: { text: 'Penjualan Kuartalan Berdasarkan Wilayah' },\r\n  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },\r\n  legend: { data: ['Utara', 'Selatan', 'Timur', 'Barat'] },\r\n  xAxis: { type: 'value', name: 'Pendapatan (dalam $1.000)' },\r\n  yAxis: { type: 'category', data: ['K1', 'K2', 'K3', 'K4'] },\r\n  series: [\r\n    { name: 'Utara', type: 'bar', stack: 'Total', data: [85, 120, 95, 150] },\r\n    { name: 'Selatan', type: 'bar', stack: 'Total', data: [65, 90, 110, 130] },\r\n    { name: 'Timur',  type: 'bar', stack: 'Total', data: [45, 70, 85, 100] },\r\n    { name: 'Barat',  type: 'bar', stack: 'Total', data: [30, 50, 60, 75] }\r\n  ]\r\n};\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqNkU1vwjAMhu9I\/AcfJmWTqqkFCoNph3HtBWlMOyAOHrVKRppUabpRIf77nNIONHHgEPfNh5\/Xdk3hpNHwAod+D8BJp2gGB3C0dzMQC9JfFSrUkFRoXaPmZFMs0e5Yf0iFNW4FHIMm3RjlZNEArMwysszAvSxFAP6zMFI7f8j3dcFGotxian44vyUoykin\/kGKDmewEu8OLXK+eCPFR9rLpcwr68Wc75xYt8n7V\/a4gH+jqoifaczp1EyKhWfAfcqt5HAXPYZh+NCVX\/\/L36CjzNiaEV01SeRtk0ETh00c\/fmXZCUxYOU3wJzWuGuhxX6ir710uNnxbml4rGeHpziAaBAGMPUiDjv2Be48iFuAY+ZMmRdFPgyvAbtx3sQbMW\/CqKbQ8Bru9FNuxA0ZFfMa85rETPOwdb93fP4FYo6+bw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqNkbFug0AMQPdI+QcPlWglBgghaag6dOhalaRShyiDEyxy6pVDh0lBUf69PgptVGXIcPYZ7j37wJSsTAGPcByPAFixpgSOwNRwAl5ao2WyuoUVaqpg28KScgE8OPkdYIxmVXaIVXlOVihsVOX54NKrUQW7h\/K+LUXtVXvMzJfwvUFTTkXmDmTImMDaezGW98J7K1P\/bJ6xYpffSfKmB5sn8Z+JD6hrklMFfrpySQcqaoJbVcBN6AdBcDcM3f4jd8iUG9sKPMyQhq5fOuli1MXpb+eKrCIRrF0B4ulbDoP32i1aKSrG3YdUb4ZR\/3W4j30IJ4EPC7eJg8F9phuuf41uJpaF2MLQheiSrv+IV+mmopuLqZsyuGTrfsWVtkhMsayZrHksMufajEenh2+XTbPp\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Langkah 5: Format Kode Anda<\/h3>\n<p>Jika kode Anda menjadi berantakan atau sulit dibaca, gunakan <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/enhance-your-workflow-echarts-auto-formatting-now-live-in-vpascode\/\">fitur\u00a0<strong>Format<\/strong>\u00a0fitur<\/a>. Klik\u00a0<code data-backticks=\"1\">&lt;\/&gt; Format<\/code>tombol di bagian atas editor untuk langsung mengatur skrip Anda menjadi indentasi yang bersih dan standar.<\/p>\n<p><strong>Sebelum Format:<\/strong><br \/>\n<img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/www.vpascode.com_Wordpress-3.png\"\/><\/p>\n<p><strong>Setelah Format:<\/strong><br \/>\n<img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/www.vpascode.com_Wordpress-1-3.png\"\/><\/p>\n<p>Setiap atribut ditampilkan dengan jelas pada baris terpisah, memberi Anda visibilitas penuh terhadap struktur grafik Anda dan membuatnya mudah untuk menemukan serta memperbarui label, data seri, atau aturan styling.<\/p>\n<h3>Langkah 6: Sesuaikan Styling<\/h3>\n<p>Ubah warna, font, dan elemen visual lainnya:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNp9jsEKgzAMhu+C7xDYwYuM1g6ZfQ1hl+GhusgKaqXNDkV897V1eNwlhC9f\/sSh1egkPLc8A1jUjBKKh3aaXFFGRH6NaNILHsDNxtBbAtkPJvBSpELAvWIlNKIKhfHY3UrgVRMgF4J1SVUWVUt+CokbRAAwmMnYcOAyjnVf98cNALOqQZOXwK4imXsaxDfOgHMVmeCCFz9HE85\/nDzbuy9vOUC2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNp9jsEKgzAMhu+C7xDYwYuM1g6ZfYUddxweootbh7ZS60HEd19bh8ddQvjy5U8msoomCY81TQA0DiQhu836M+sX6iwP1C1joL3StINpMMa9JTg7UwRPdOgzrgXLoRKFL4yH7pIDLyoPuRCsjipawrtbep+4QgAAremN9QdOXVc2ZbPfADAjtsotEthZRHOLg\/DGEXCsEhNc8OznKEfDHydNtvoLjthB5Q==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">series: [{\r\n  name: 'Kunjungan',\r\n  type: 'line',\r\n  smooth: true,\r\n  data: [820, 932, 901, 934, 1290, 1330],\r\n  areaStyle: { \r\n    color: '#ff6b6b',\r\n    opacity: 0.3 \r\n  },\r\n  lineStyle: { color: '#e03131' },\r\n  itemStyle: { color: '#e03131' }\r\n}]\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNp9jsEKgzAMhu+C7xDYwYuM1g6ZfYUddxweootbh7ZS60HEd19bh8ddQvjy5U8msoomCY81TQA0DiQhu836M+sX6iwP1C1joL3StINpMMa9JTg7UwRPdOgzrgXLoRKFL4yH7pIDLyoPuRCsjipawrtbep+4QgAAremN9QdOXVc2ZbPfADAjtsotEthZRHOLg\/DGEXCsEhNc8OznKEfDHydNtvoLjthB5Q==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNp9jsEKgzAMhu+C7xDYwYuM1g6ZfQ1hl+GhusgKaqXNDkV897V1eNwlhC9f\/sSh1egkPLc8A1jUjBKKh3aaXFFGRH6NaNILHsDNxtBbAtkPJvBSpELAvWIlNKIKhfHY3UrgVRMgF4J1SVUWVUt+CokbRAAwmMnYcOAyjnVf98cNALOqQZOXwK4imXsaxDfOgHMVmeCCFz9HE85\/nDzbuy9vOUC2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Langkah 7: Bagikan atau Ekspor<\/h3>\n<p>Setelah puas, salin URL yang dapat dibagikan atau ekspor grafik Anda untuk digunakan dalam presentasi, laporan, atau aplikasi web.<\/p>\n<h2>Mengedit dan Menyesuaikan Grafik di VPasCode<\/h2>\n<h3>Memahami Struktur Konfigurasi ECharts<\/h3>\n<p>Setiap grafik di VPasCode mengikuti struktur standar. Mari kita bahas komponen utamanya:<\/p>\n<p><strong>1. Konfigurasi Judul<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNorySzJSbVSqFbg5VJQKEmtKLFSUI\/MLy1ScM5ILCpRCAFJq+uAJHNS00CSyal5JalF6goK+voKAfnFmSWZ+XlAYZCsug5cGsgqykzPKFHn5aoFANy4HeM=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNorySzJSbVSqFbg5VJQKEmtKLFSUPcqTSnNUXAvSkzLzFZwzEtJVNcByeakpoFkk1PzSlKL1BUU9PUVAvKLM4szgYIgOXUduCSQVZSZnlGizstVCwCt2h0u\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">title: { \r\n  text: 'Judul Grafik Anda',\r\n  left: 'center'  \/\/ Posisi: 'left', 'center', 'right'\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNorySzJSbVSqFbg5VJQKEmtKLFSUPcqTSnNUXAvSkzLzFZwzEtJVNcByeakpoFkk1PzSlKL1BUU9PUVAvKLM4szgYIgOXUduCSQVZSZnlGizstVCwCt2h0u\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNorySzJSbVSqFbg5VJQKEmtKLFSUI\/MLy1ScM5ILCpRCAFJq+uAJHNS00CSyal5JalF6goK+voKAfnFmSWZ+XlAYZCsug5cGsgqykzPKFHn5aoFANy4HeM=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>2. Pengaturan Tooltip<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNoryc\/PKckssFKoVuDlUlAoKcpMT08tslJQT6zILFbXUYACfX0F9cyS1FygCExGPS8\/L1UdpAkkEJCfmVcC0ggxB2hSZUEq0JjijMSU\/HJ1ZHNyMoH6dOBSyCbV8nLVAgC0xieY\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNoryc\/PKckssFKoVuDlUlAoKcpMT08tslJQT6zILFbXUYACfX0F9cyS1FygCExGPS8\/L1UdpAkkEJCfmVcC0ggxB2hSZUEq0JjijMSU\/HJ1ZHNyMoH6dOBSyCbV8nLVAgC0xieY\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">tooltip: { \r\n  trigger: 'axis',        \/\/ 'item', 'axis', 'none'\r\n  axisPointer: { \r\n    type: 'shadow'        \/\/ 'line', 'shadow', 'none'\r\n  }\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNoryc\/PKckssFKoVuDlUlAoKcpMT08tslJQT6zILFbXUYACfX0F9cyS1FygCExGPS8\/L1UdpAkkEJCfmVcC0ggxB2hSZUEq0JjijMSU\/HJ1ZHNyMoH6dOBSyCbV8nLVAgC0xieY\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNoryc\/PKckssFKoVuDlUlAoKcpMT08tslJQT6zILFbXUYACfX0F9cyS1FygCExGPS8\/L1UdpAkkEJCfmVcC0ggxB2hSZUEq0JjijMSU\/HJ1ZHNyMoH6dOBSyCbV8nLVAgC0xieY\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>3. Konfigurasi Legenda<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNrLSU1PzUuxUqhW4OVSUEhJLEm0UohWD04tykwtVjBU11GAsY3UY3VASpLyS0ryc60UDA0UFPT1FQLyizNLMvPzrBTUS\/ILQOohCkCsnNS0EhBdlJmeUaLOy1ULALffH2o=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNrLSU1PzUuxUqhW4OVSUEhJLEm0UohWD04tysyrTFQwVNdRgHOM1GN1QIqS8ktK8nOtFAwNFBT09RUC8oszizOtFNRL8gtAyiHSIFZOaloJiC7KTM8oUeflqgUAxMcfbA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">legend: { \r\n  data: ['Serinya 1', 'Serinya 2'],\r\n  bottom: 10  \/\/ Posisi: 'top', 'bottom', 'left', 'right'\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNrLSU1PzUuxUqhW4OVSUEhJLEm0UohWD04tysyrTFQwVNdRgHOM1GN1QIqS8ktK8nOtFAwNFBT09RUC8oszizOtFNRL8gtAyiHSIFZOaloJiC7KTM8oUeflqgUAxMcfbA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNrLSU1PzUuxUqhW4OVSUEhJLEm0UohWD04tykwtVjBU11GAsY3UY3VASpLyS0ryc60UDA0UFPT1FQLyizNLMvPzrBTUS\/ILQOohCkCsnNS0EhBdlJmeUaLOy1ULALffH2o=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>4. Konfigurasi Sumbu<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqrcKzILLZSqFbg5VJQKKksSLVSUE9OLElNzy+qVNdRgAB9fRRB9bLEnNJUEKMkMzdVHaQzJbEk0UohWt0rMQ8k7paaBKJ8E4vUY3VA8nmJuSCTffPzSjKAGmqBgpVYbIYajKQjKLUsNa8UZEktANt2Luc=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqrcKzILLZSqFbg5VJQKKksSLVSUM9OLElNzy\/KVNdRgAB9fRRB9bzMnEQwozwxu6RUHaQ1JbEk0UohWt0rMQ8k4ZaaBKJ8E4vUY3VA8nmJuSCjnUpzgAp4uWqBgpVYrIaajKQjIDUvJbEAaDpYGwCeUzBC\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">xAxis: { \r\n  type: 'kategori',       \/\/ 'kategori', 'nilai', 'waktu'\r\n  data: ['Jan', 'Feb', 'Mar'],\r\n  name: 'Bulan'\r\n},\r\nyAxis: { \r\n  type: 'nilai',\r\n  name: 'Pendapatan'\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqrcKzILLZSqFbg5VJQKKksSLVSUM9OLElNzy\/KVNdRgAB9fRRB9bzMnEQwozwxu6RUHaQ1JbEk0UohWt0rMQ8k4ZaaBKJ8E4vUY3VA8nmJuSCjnUpzgAp4uWqBgpVYrIaajKQjIDUvJbEAaDpYGwCeUzBC\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqrcKzILLZSqFbg5VJQKKksSLVSUE9OLElNzy+qVNdRgAB9fRRB9bLEnNJUEKMkMzdVHaQzJbEk0UohWt0rMQ8k7paaBKJ8E4vUY3VA8nmJuSCTffPzSjKAGmqBgpVYbIYajKQjKLUsNa8UZEktANt2Luc=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>5. Definisi Seri<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpNjjEKwzAMRfdC76DNS0iclC4+QC+QbCWD6ghq6sbB1mJC7l6rpSEaJPjSeyhRdJQM3NfzCWDGNxlQPXpKqpKE8yLJA6Oq4FBN8w+VdzPJXJwMYlsLOCFj0badrqDTpbVXPX6VidG+inMIjP5gLcpbiL81TWCfGDkJgJGw5+zLIyuEBa3jbEDXF9h2Sm52ZBs\/b885zg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNpljjEOgzAMRXck7uAtC4JA1YVTVGo7VQwGUpQmhChxhghx9yadkOrBtr7+f7YXTgrfw2svCwCDq+iB3YT5BNRoWJVVijarIxKahVVwqqY56WxBJ31erBRpzFrXOT8nQ7rQdryCjqfWXvnwI3vCSSX0YyPUJ3LCPg0FBYvDt1QwCkdhtUHlEDqBd4o6\/bTDZnGSFHvg9QWO\/2Q2l8UxfAHAWkEQ\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">series: [{\r\n  name: 'Penjualan',\r\n  type: 'batang',            \/\/ 'batang', 'garis', 'pie', dll.\r\n  data: [120, 200, 150],\r\n  stack: 'Total',         \/\/ Untuk grafik bertumpuk\r\n  areaStyle: { opacity: 0.3 }  \/\/ Untuk grafik area\r\n}]\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNpljjEOgzAMRXck7uAtC4JA1YVTVGo7VQwGUpQmhChxhghx9yadkOrBtr7+f7YXTgrfw2svCwCDq+iB3YT5BNRoWJVVijarIxKahVVwqqY56WxBJ31erBRpzFrXOT8nQ7rQdryCjqfWXvnwI3vCSSX0YyPUJ3LCPg0FBYvDt1QwCkdhtUHlEDqBd4o6\/bTDZnGSFHvg9QWO\/2Q2l8UxfAHAWkEQ\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpNjjEKwzAMRfdC76DNS0iclC4+QC+QbCWD6ghq6sbB1mJC7l6rpSEaJPjSeyhRdJQM3NfzCWDGNxlQPXpKqpKE8yLJA6Oq4FBN8w+VdzPJXJwMYlsLOCFj0badrqDTpbVXPX6VidG+inMIjP5gLcpbiL81TWCfGDkJgJGw5+zLIyuEBa3jbEDXF9h2Sm52ZBs\/b885zg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Teknik Kustomisasi Lanjutan<\/h3>\n<p><strong>Menambahkan Kontrol Grid<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpLL8pMsVKoVuDlUlDISU0rsVIwMdAB84oy0zOAXCMotyS\/wErBFMpJyi8pyc+1UjCG8pPz80oSM\/N8EpNSc6wUSopKU4HCtQAiqBfA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNpLL8pMsVKoVuDlUlDIzizKtFIwMdCB8BLzEvOsFIyg3MSSxGIrBVMoLymxPDHDSsEYyk3OzytJzMzzSUxKzbFSKCkqTQUK1wIAF\/kXcw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">grid: { \r\n  kiri: 40, \r\n  kanan: 20, \r\n  atas: 50, \r\n  bawah: 30, \r\n  containLabel: true \r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNpLL8pMsVKoVuDlUlDIzizKtFIwMdCB8BLzEvOsFIyg3MSSxGIrBVMoLymxPDHDSsEYyk3OzytJzMzzSUxKzbFSKCkqTQUK1wIAF\/kXcw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpLL8pMsVKoVuDlUlDISU0rsVIwMdAB84oy0zOAXCMotyS\/wErBFMpJyi8pyc+1UjCG8pPz80oSM\/N8EpNSc6wUSopKU4HCtQAiqBfA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Mengkustomisasi Warna<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpLzs\/JL7JSiFZXTkszSzJLUtdRUFc2SU1OSTaBME2TzFMMwUxLs+TUJBP1WABsCg0x\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNorTyzKS7RSiFZXTkszSzJLUtdRUFc2SU1OSTaBME2TzFMMwUxLs+TUJBP1WABrIQ0r\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">warna: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4']\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNorTyzKS7RSiFZXTkszSzJLUtdRUFc2SU1OSTaBME2TzFMMwUxLs+TUJBP1WABrIQ0r\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpLzs\/JL7JSiFZXTkszSzJLUtdRUFc2SU1OSTaBME2TzFMMwUxLs+TUJBP1WABsCg0x\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Menambahkan Peta Visual<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNoryywuTczxTSywUqhW4OVSUMjNzLNSMNCBsBMrrBSMoZySyoJUKwX15Py8ksy80vzSYnWIeH5RZmpeCVAmA8iqAsom5kBlclLTQOLJQOnUIqhYUn5JSX4uUNTQVFUdKFILACiWI5M=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNoryywuTczxTSywUqhW4OVSUMjNzLNSMNCBsBMrrBSMoZySyoJUKwX17Py8ksy8UnWIYH5RZmpeCVA4A8iqAkol5kBlclLTQOLJQOnUIqhYUn5JSX4uUNTQVFUdKFILAJxwIkQ=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">visualMap: { \r\n  min: 0, \r\n  max: 30, \r\n  type: 'kontinu', \r\n  orient: 'horizontal', \r\n  left: 'center', \r\n  bottom: '15%' \r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNoryywuTczxTSywUqhW4OVSUMjNzLNSMNCBsBMrrBSMoZySyoJUKwX17Py8ksy8UnWIYH5RZmpeCVA4A8iqAkol5kBlclLTQOLJQOnUIqhYUn5JSX4uUNTQVFUdKFILAJxwIkQ=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNoryywuTczxTSywUqhW4OVSUMjNzLNSMNCBsBMrrBSMoZySyoJUKwX15Py8ksy80vzSYnWIeH5RZmpeCVAmA8iqAsom5kBlclLTQOLJQOnUIqhYUn5JSX4uUNTQVFUdKFILACiWI5M=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Sunting ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h2>Contoh dan Templat Dunia Nyata<\/h2>\n<p>Untuk membantu Anda mulai dengan cepat, berikut ini adalah contoh siap produksi untuk skenario umum:<\/p>\n<h3>1. Analisis Penjualan Regional (Grafik Batang Bertumpuk)<\/h3>\n<p>Sempurna untuk melihat total absolut di seluruh kelompok sambil memecah distribusi kategorikal secara bersamaan.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55af7c83297.png\"\/><\/p>\n<p>Grafik ini menunjukkan kinerja kuartalan di berbagai wilayah, dengan setiap batang ditumpuk untuk menunjukkan kontribusi individu.<\/p>\n<h3>2. Pertumbuhan Situs Web Bulanan (Grafik Garis dengan Area yang Diarsir)<\/h3>\n<p>Dirancang untuk melacak pergeseran kronologis dengan interpolasi halus dan penataan grid yang rapi.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55af9111db3.png\"\/><\/p>\n<p>Area yang diarsir menekankan volume dan membuat tren lebih jelas secara visual.<\/p>\n<h3>3. Campuran Rujukan Lalu Lintas (Grafik Pie Interaktif)<\/h3>\n<p>Tata letak klasik untuk menghitung pangsa pasar relatif atau sumber lalu lintas, dilengkapi wadah legenda bawah yang bersih.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55afd092eaa.png\"\/><\/p>\n<p>Grafik ini membantu Anda dengan cepat mengidentifikasi saluran mana yang menghasilkan lalu lintas terbanyak.<\/p>\n<h3>4. Perbandingan Arsitektur Service Mesh (Grafik Radar)<\/h3>\n<p>Struktur grafik multivariat yang sering digunakan untuk mengevaluasi kemampuan teknis, benchmark perangkat lunak, atau kriteria arsitektur kompleks secara berdampingan.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55b17647e8f.png\"\/><\/p>\n<p>Bandingkan beberapa sistem di berbagai dimensi kinerja dalam satu tampilan.<\/p>\n<h3>5. Profil Metrik Latensi Inference (Grafik Sebaran)<\/h3>\n<p>Sangat baik untuk mengidentifikasi lonjakan outlier, ambang batas ukuran payload, dan kemacetan aplikasi di seluruh infrastruktur terdistribusi.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55afdea74d3.png\"\/><\/p>\n<p>Setiap titik mewakili satu titik data, sehingga memudahkan untuk mengidentifikasi korelasi dan anomali.<\/p>\n<h3>6. Lisensi Codebase Multi-Tingkat (Grafik Sunburst)<\/h3>\n<p>Visualisasikan hubungan hierarkis dengan lingkaran-lingkaran konsentris. Pembuat grafik ini menyederhanakan konfigurasi data bersarang yang kompleks.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55afed2221b.png\"\/><\/p>\n<p>Lihat bagaimana jenis lisensi yang berbeda terbagi di seluruh hierarki kode Anda.<\/p>\n<h3>7. Analyzer Aliran Biaya Infrastruktur (Diagram Sankey)<\/h3>\n<p>Lacak pemetaan sumber daya operasional atau variabel keuangan di seluruh langkah komputasi dengan tautan bobot node yang mengalir.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55aff8ee208.png\"\/><\/p>\n<p>Ikuti bagaimana anggaran mengalir dari alokasi total ke layanan dan komponen tertentu.<\/p>\n<h3>8. Kisi Kecepatan Deploi Jam-jam (Peta Panas)<\/h3>\n<p>Pantau kerapatan sistemik, volume deploi, atau pergeseran lalu lintas terus-menerus di berbagai matriks waktu kustom dengan mudah.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55b13325ddf.png\"\/><\/p>\n<p>Identifikasi pola dalam frekuensi deploi di berbagai hari dan waktu.<\/p>\n<h2>Praktik Terbaik Pemformatan Kode<\/h2>\n<h3>Mengapa Pemformatan Penting<\/h3>\n<p>Ketika bekerja dengan skrip grafik yang kompleks, keterbacaan adalah segalanya. Menyusun banyak atribut dalam satu baris membuat mudah melewatkan detail atau melakukan kesalahan saat mengedit. Dengan alat pemformatan VPasCode, struktur kode Anda langsung berubah:<\/p>\n<ul>\n<li><strong>Tidak Ada yang Tersembunyi:<\/strong>\u00a0Setiap atribut tercantum dengan jelas pada baris terpisah, memberi Anda visibilitas penuh terhadap struktur grafik Anda.<\/li>\n<li><strong>Pengeditan yang Mudah:<\/strong>\u00a0Cepat temukan dan perbarui label, data seri, atau aturan gaya tanpa harus mencari di baris-baris kode yang padat.<\/li>\n<li><strong>Pembersihan Satu Klik:<\/strong>\u00a0Klik saja tombol\u00a0<strong><code data-backticks=\"1\">&lt;\/&gt; Format<\/code><\/strong>\u00a0tombol di bagian atas editor untuk langsung mengatur skrip Anda menjadi indentasi bersih dan standar.<\/li>\n<\/ul>\n<h3>Contoh Format<\/h3>\n<p><strong>Sebelum (Dikompresi):<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqNjz1PwzAQQPdK\/Q83IBmkDElLEQ1iYGBFpEViqBiuzSm1MHZkX0qiiv\/OOWmgYkKy7sP2e2e7mrWzcA9HYM2G8lhQyzmookHP5E0HazQUYNvBiiq5reArmU7YOcO67gGvq4q8MNjqoBKI6dlpy3FTzrtaxCrssXSfQgsP04mhimwZz0tkzGGjnpznveBq7ZqheMTAMb+S5LeBax\/EfqY9oGlILln8iO2KDmQbgktt4SJL0jS9UgPY\/QF3yFQ53wk7vqDI4rRi1sd5H6\/HuYG8JuE3x3HU+N6Tb4temsC4e5fuxTGaX\/XtIoFsliawjMUiPUl\/XOOX\/+O6EcVSVFkWwzy6ZN19Ay7GiKM=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqNj8FKw0AQhu+FvsMchFUIkrRWbMSDfYIWKx6Kh7EZ0rWb3bCZ2ITiuzubNK14EpbZPzv5v3\/GlaydhSc4Ams2lAZBDaeglmQ\/azRoYe31oRYhckE+wwr9XvSbNtjiTsF3NB6xc4Z12fm9znPygsBGVyqCcC2dthwepd+WkqOqHWbuIG7xw3hkKCebhX6GjCls1CujR7GrFzLyZINc66L2QSykx+q99zbPkvAL\/YWmJvnLYkH9JhmWAQHXmWxUwFVyG8fxjert7R\/7Fply51shDLOskhC6mnR12tW7Ib0ir0n8m+MQOEx+4n1gGLli3O7la+0YzQX9MIsgmcQRzIOYxSfomXVZ\/j+0e4HMBZYkoUwDTc7jD7uykvg=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = { title: { text: 'Penjualan Triwulanan Berdasarkan Wilayah' },\r\ntooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, \r\nlegend: { data: ['Utara', 'Selatan', 'Timur', 'Barat'] }, \r\nxAxis: { type: 'value', name: 'Pendapatan (dalam $1.000)' }, \r\nyAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] }, \r\nseries: [{ name: 'Utara', type: 'bar', stack: 'Total', data: [85, 120, 95, 150] }, \r\n{ name: 'Selatan', type: 'bar', stack: 'Total', data: [65, 90, 110, 130] }] };\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqNj8FKw0AQhu+FvsMchFUIkrRWbMSDfYIWKx6Kh7EZ0rWb3bCZ2ITiuzubNK14EpbZPzv5v3\/GlaydhSc4Ams2lAZBDaeglmQ\/azRoYe31oRYhckE+wwr9XvSbNtjiTsF3NB6xc4Z12fm9znPygsBGVyqCcC2dthwepd+WkqOqHWbuIG7xw3hkKCebhX6GjCls1CujR7GrFzLyZINc66L2QSykx+q99zbPkvAL\/YWmJvnLYkH9JhmWAQHXmWxUwFVyG8fxjert7R\/7Fply51shDLOskhC6mnR12tW7Ib0ir0n8m+MQOEx+4n1gGLli3O7la+0YzQX9MIsgmcQRzIOYxSfomXVZ\/j+0e4HMBZYkoUwDTc7jD7uykvg=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqNjz1PwzAQQPdK\/Q83IBmkDElLEQ1iYGBFpEViqBiuzSm1MHZkX0qiiv\/OOWmgYkKy7sP2e2e7mrWzcA9HYM2G8lhQyzmookHP5E0HazQUYNvBiiq5reArmU7YOcO67gGvq4q8MNjqoBKI6dlpy3FTzrtaxCrssXSfQgsP04mhimwZz0tkzGGjnpznveBq7ZqheMTAMb+S5LeBax\/EfqY9oGlILln8iO2KDmQbgktt4SJL0jS9UgPY\/QF3yFQ53wk7vqDI4rRi1sd5H6\/HuYG8JuE3x3HU+N6Tb4temsC4e5fuxTGaX\/XtIoFsliawjMUiPUl\/XOOX\/+O6EcVSVFkWwzy6ZN19Ay7GiKM=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Setelah (Diformat):<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqlUEtPg0AQvjfpf5iDyWrCAVprLMaDB69GWhMPDYdpmdCNK0uWoUIM\/91dHgUfNy8zOx\/zPRids9QZ3MMnzGcALFlR2A92pIpDEFGJhsmoGraoqIB9DRtKLU+0e43XUrVWLPMJ2cg0JWP5WMlCeD3shmctM3afhl27XefWWBRHTPSH6OGm12+bopSyZOQkyBjCTjxpw0crL7a67B6PWLDrr2R7PNWoHqz7JGJnekJV0jlghu8O3NCJspLgUmZwEXi+71+JqVT9p9QBmVJt6rPakDIKXKJo0dZlW6+\/ZyvISLKKu444nqYPNPznj4vt0UzAgvHwZtEXzagmeB\/jduVBsPA9WLvHyo+HQw+bv1yHo\/7H9caara1pELiyHF1di+ez5u4L4fSbXg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqlUMtOwzAQvFfqP\/iAZJAilLQU0SAO9AtaEcSh6mHbrFJTx44chyZC+XfWeTThceOynh17Z8arMyu0Yk\/sk00njFlhJYZdQy2WNmR8jeq9AAmKRUacCwIEV2hiyMGcCL8JCRUceTNWe42S1tKKbKRlRJKgITkoRc69jnbNWgtl3VX\/ll5XGeXg+RFifeYdXXf6zSExQRUPMzFYCNmWv1owQPL8BSVRysFIpIVxYEV3lu\/GOuUzJRjFbI0\/QBZ4CakgxXYPMWROlF3HtI+UXQW3vu\/f8LFg9afgASwm2lQXzT7vJnDBNrOmzpt69z1hjkYgKW7bwWFJXaz+xz92twczInMLhxOxkbYgR3wX42HhsWDme2zpwMLf9SvvX\/5yHdb7H997sluSbRC4Mh983bGbTurHL9NopbM=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = { \r\n  title: { \r\n    text: 'Penjualan Triwulanan Berdasarkan Wilayah' \r\n  },\r\n  tooltip: { \r\n    trigger: 'axis', \r\n    axisPointer: { \r\n      type: 'shadow' \r\n    } \r\n  }, \r\n  legend: { \r\n    data: ['Utara', 'Selatan', 'Timur', 'Barat'] \r\n  }, \r\n  xAxis: { \r\n    type: 'value', \r\n    name: 'Pendapatan (dalam $1.000)' \r\n  }, \r\n  yAxis: { \r\n    type: 'category', \r\n    data: ['Q1', 'Q2', 'Q3', 'Q4'] \r\n  }, \r\n  series: [\r\n    { \r\n      name: 'Utara', \r\n      type: 'bar', \r\n      stack: 'Total', \r\n      data: [85, 120, 95, 150] \r\n    }, \r\n    { \r\n      name: 'Selatan', \r\n      type: 'bar', \r\n      stack: 'Total', \r\n      data: [65, 90, 110, 130] \r\n    }\r\n  ]\r\n};\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqlUMtOwzAQvFfqP\/iAZJAilLQU0SAO9AtaEcSh6mHbrFJTx44chyZC+XfWeTThceOynh17Z8arMyu0Yk\/sk00njFlhJYZdQy2WNmR8jeq9AAmKRUacCwIEV2hiyMGcCL8JCRUceTNWe42S1tKKbKRlRJKgITkoRc69jnbNWgtl3VX\/ll5XGeXg+RFifeYdXXf6zSExQRUPMzFYCNmWv1owQPL8BSVRysFIpIVxYEV3lu\/GOuUzJRjFbI0\/QBZ4CakgxXYPMWROlF3HtI+UXQW3vu\/f8LFg9afgASwm2lQXzT7vJnDBNrOmzpt69z1hjkYgKW7bwWFJXaz+xz92twczInMLhxOxkbYgR3wX42HhsWDme2zpwMLf9SvvX\/5yHdb7H997sluSbRC4Mh983bGbTurHL9NopbM=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqlUEtPg0AQvjfpf5iDyWrCAVprLMaDB69GWhMPDYdpmdCNK0uWoUIM\/91dHgUfNy8zOx\/zPRids9QZ3MMnzGcALFlR2A92pIpDEFGJhsmoGraoqIB9DRtKLU+0e43XUrVWLPMJ2cg0JWP5WMlCeD3shmctM3afhl27XefWWBRHTPSH6OGm12+bopSyZOQkyBjCTjxpw0crL7a67B6PWLDrr2R7PNWoHqz7JGJnekJV0jlghu8O3NCJspLgUmZwEXi+71+JqVT9p9QBmVJt6rPakDIKXKJo0dZlW6+\/ZyvISLKKu444nqYPNPznj4vt0UzAgvHwZtEXzagmeB\/jduVBsPA9WLvHyo+HQw+bv1yHo\/7H9caara1pELiyHF1di+ez5u4L4fSbXg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p>Lihat betapa mudahnya kode yang telah diformat untuk dikerjakan? Setiap objek dan array bersarang telah diindentasi dengan benar, sehingga memudahkan pemahaman struktur secara sekilas.<\/p>\n<h2>Kiat untuk Sukses<\/h2>\n<h3>1. Mulai dengan Sederhana<\/h3>\n<p>Mulailah dengan jenis grafik dasar seperti grafik batang atau grafik garis sebelum beralih ke visualisasi yang kompleks seperti diagram Sankey atau grafik matahari.<\/p>\n<h3>2. Gunakan Petunjuk yang Deskriptif<\/h3>\n<p>Semakin spesifik Anda dengan Chatbot AI, semakin baik hasilnya. Sertakan:<\/p>\n<ul>\n<li>Jenis grafik<\/li>\n<li>Kategori data<\/li>\n<li>Periode waktu<\/li>\n<li>Metrik khusus<\/li>\n<\/ul>\n<h3>3. Validasi Data Anda<\/h3>\n<p>Selalu periksa kembali bahwa angka Anda akurat dan kategori sesuai dengan label data Anda.<\/p>\n<h3>4. Pertimbangkan Audiens Anda<\/h3>\n<p>Pilih jenis grafik yang akan dipahami oleh audiens Anda. Tidak semua orang akrab dengan grafik radar atau diagram Sankey.<\/p>\n<h3>5. Jaga Kebersihan<\/h3>\n<p>Hindari memenuhi grafik dengan terlalu banyak informasi. Jika Anda memiliki beberapa cerita yang ingin disampaikan, buatlah beberapa grafik.<\/p>\n<h3>6. Gunakan Warna Secara Bermaksud<\/h3>\n<p>Warna harus meningkatkan pemahaman, bukan mengalihkan perhatian. Gunakan warna yang konsisten untuk kategori yang sama di berbagai grafik.<\/p>\n<h3>7. Uji Interaktivitas<\/h3>\n<p>Jika Anda membuat grafik interaktif, uji semua keadaan hover, tooltip, dan perilaku klik untuk memastikan berfungsi sesuai harapan.<\/p>\n<h3>8. Simpan Pekerjaan Anda<\/h3>\n<p>Gunakan fitur URL yang dapat dibagikan untuk menyimpan versi berbeda dari grafik Anda. Ini memudahkan Anda untuk kembali ke iterasi sebelumnya atau berbagi versi tertentu dengan rekan kerja.<\/p>\n<h2>Mengatasi Masalah Umum<\/h2>\n<h3>Grafik Tidak Tampil<\/h3>\n<ul>\n<li>Periksa kesalahan sintaks dalam konfigurasi JSON Anda<\/li>\n<li>Pastikan semua kurung dan tanda koma ditempatkan dengan benar<\/li>\n<li>Verifikasi bahwa array data Anda sesuai dengan format yang diharapkan<\/li>\n<\/ul>\n<h3>Data Tidak Tampil Dengan Benar<\/h3>\n<ul>\n<li>Konfirmasi bahwa tipe xAxis dan yAxis Anda sesuai dengan data Anda<\/li>\n<li>Periksa apakah array data seri memiliki jumlah nilai yang benar<\/li>\n<li>Verifikasi bahwa nama kategori cocok persis (sensitif terhadap huruf besar\/kecil)<\/li>\n<\/ul>\n<h3>Warna Tidak Diterapkan<\/h3>\n<ul>\n<li>Pastikan nilai warna berada dalam format yang valid (#hex, rgb(), atau warna bernama)<\/li>\n<li>Periksa apakah Anda menerapkan warna pada properti yang benar (itemStyle, lineStyle, areaStyle)<\/li>\n<\/ul>\n<h3>Tooltip Tidak Berfungsi<\/h3>\n<ul>\n<li>Verifikasi bahwa pemicu tooltip diatur dengan benar (&#8216;item&#8217; untuk grafik pie, &#8216;axis&#8217; untuk grafik batang\/grafik garis)<\/li>\n<li>Pastikan seri Anda memiliki properti nama yang didefinisikan<\/li>\n<\/ul>\n<h2>Kesimpulan<\/h2>\n<p>Membuat grafik profesional dan interaktif kini tidak lagi memerlukan perangkat lunak mahal atau keterampilan pemrograman tingkat lanjut. Dengan kombinasi AI Chatbot Visual Paradigm dan integrasi ECharts yang kuat dari VPasCode, Anda memiliki semua yang dibutuhkan untuk mengubah data mentah menjadi cerita visual yang menarik.<\/p>\n<p>Alur kerja ini sederhana namun kuat:<\/p>\n<ol>\n<li><strong>Mulai dengan AI:<\/strong>Gunakan bahasa alami untuk menghasilkan grafik awal Anda secara instan<\/li>\n<li><strong>Sempurnakan dengan Kode:<\/strong>Buka di VPasCode untuk menyesuaikan data, gaya, dan perilaku<\/li>\n<li><strong>Format untuk Kejelasan<\/strong>Gunakan alat format satu klik untuk menjaga kode Anda tetap bersih dan dapat dipertahankan<\/li>\n<li><strong>Bagikan dan Kolaborasi:<\/strong>Hasilkan URL yang dapat dibagikan untuk kolaborasi dan presentasi yang mudah<\/li>\n<\/ol>\n<p>Apakah Anda perlu membuat diagram batang sederhana yang menunjukkan tren penjualan bulanan, diagram Sankey yang kompleks melacak aliran energi, atau diagram radar interaktif yang membandingkan kinerja tim, pembuat diagram berbasis AI ini memberi Anda fleksibilitas untuk membuat apa yang Anda butuhkan secara tepat.<\/p>\n<p>Contoh dan templat yang disediakan dalam panduan ini hanya menunjukkan sebagian kecil dari apa yang mungkin dilakukan. Mulai dari peta panas yang menunjukkan kecepatan penyebaran hingga diagram matahari yang memvisualisasikan struktur data hierarkis, ECharts yang digabungkan dengan VPasCode membuka kemungkinan tanpa batas untuk visualisasi data.<\/p>\n<p>Berhenti menerima gambar AI yang kaku dan tidak dapat diedit, atau menghabiskan berjam-jam menyesuaikan piksel secara manual di alat pembuatan diagram tradisional. Rasakan kekuatan pembuat diagram yang fleksibel yang beradaptasi dengan kebutuhan bisnis Anda yang sebenarnya. Wujudkan ide Anda secara instan dengan pembuatan diagram melalui chatbot AI, dan edit data serta gaya secara bebas menggunakan VPasCode.<\/p>\n<p>Data Anda memiliki cerita untuk disampaikan. Sekarang Anda memiliki alat untuk menyampaikannya dengan indah.<\/p>\n<h2>Referensi<\/h2>\n<ol>\n<li><a href=\"https:\/\/ai-toolbox.visual-paradigm.com\/app\/chatbot-v2\/\"><strong>Generasi Diagram AI: Buat dengan Chatbot, Edit dengan VPasCode<\/strong><\/a>: Temukan cara menggabungkan pembuatan diagram instan berbasis AI dengan fleksibilitas pengeditan berbasis kode untuk kendali penuh atas visualisasi data Anda.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/overview\/\"><strong>Ikhtisar VPasCode<\/strong><\/a>: Jelajahi platform teks-ke-diagram terpadu yang mendukung Mermaid, PlantUML, Graphviz, dan ECharts dalam satu lingkungan terintegrasi.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/diagram-as-code-tool\/\"><strong>Alat Diagram-sebagai-Kode<\/strong><\/a>: Pelajari pendekatan inovatif Visual Paradigm dalam membuat diagram dan grafik melalui kode untuk presisi dan kontrol versi.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/\"><strong>Editor Langsung VPasCode<\/strong><\/a>: Akses editor interaktif untuk membuat, menyesuaikan, dan berbagi visualisasi ECharts dengan pratinjau real-time dan format satu klik.<\/li>\n<li><a href=\"https:\/\/ai-toolbox.visual-paradigm.com\/app\/chatbot-v2\/share\/9c2809f5-cc0c-4935-81e0-ae081f4652b5\"><strong>Chatbot Kotak Alat AI<\/strong><\/a>: Coba sesi percakapan contoh yang menunjukkan cara membuat diagram batang, diagram garis, diagram lingkaran, dan lainnya menggunakan petunjuk bahasa alami.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Pendahuluan Di dunia yang didorong oleh data saat ini, kemampuan untuk mengubah angka mentah menjadi cerita visual yang menarik merupakan<\/p>\n","protected":false},"author":3482,"featured_media":11303,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","fifu_image_url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png","fifu_image_alt":"","footnotes":""},"categories":[144,145,160],"tags":[],"class_list":["post-11302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-ai-chatbot","category-vpascode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts - ArchiMetric Indonesian<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts - ArchiMetric Indonesian\" \/>\n<meta property=\"og:description\" content=\"Pendahuluan Di dunia yang didorong oleh data saat ini, kemampuan untuk mengubah angka mentah menjadi cerita visual yang menarik merupakan\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\" \/>\n<meta property=\"og:site_name\" content=\"ArchiMetric Indonesian\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-28T07:15:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"572\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.archimetric.com\/id\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba\"},\"headline\":\"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts\",\"datePublished\":\"2026-07-28T07:15:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\"},\"wordCount\":3213,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.archimetric.com\/id\/wp-content\/uploads\/sites\/15\/2026\/07\/img_6a68577788335.png\",\"articleSection\":[\"AI\",\"AI Chatbot\",\"VPasCode\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\",\"url\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\",\"name\":\"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts - ArchiMetric Indonesian\",\"isPartOf\":{\"@id\":\"https:\/\/www.archimetric.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.archimetric.com\/id\/wp-content\/uploads\/sites\/15\/2026\/07\/img_6a68577788335.png\",\"datePublished\":\"2026-07-28T07:15:09+00:00\",\"author\":{\"@id\":\"https:\/\/www.archimetric.com\/id\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage\",\"url\":\"https:\/\/www.archimetric.com\/id\/wp-content\/uploads\/sites\/15\/2026\/07\/img_6a68577788335.png\",\"contentUrl\":\"https:\/\/www.archimetric.com\/id\/wp-content\/uploads\/sites\/15\/2026\/07\/img_6a68577788335.png\",\"width\":1024,\"height\":572},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.archimetric.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.archimetric.com\/id\/#website\",\"url\":\"https:\/\/www.archimetric.com\/id\/\",\"name\":\"ArchiMetric Indonesian\",\"description\":\"EA, Dev Ops, Scrum, Agile and More\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.archimetric.com\/id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.archimetric.com\/id\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.archimetric.com\/id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.archimetric.com\/id\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts - ArchiMetric Indonesian","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","og_locale":"id_ID","og_type":"article","og_title":"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts - ArchiMetric Indonesian","og_description":"Pendahuluan Di dunia yang didorong oleh data saat ini, kemampuan untuk mengubah angka mentah menjadi cerita visual yang menarik merupakan","og_url":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","og_site_name":"ArchiMetric Indonesian","article_published_time":"2026-07-28T07:15:09+00:00","og_image":[{"url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png","type":"","width":"","height":""},{"width":1024,"height":572,"url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png","twitter_misc":{"Ditulis oleh":"curtis","Estimasi waktu membaca":"19 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#article","isPartOf":{"@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/"},"author":{"name":"curtis","@id":"https:\/\/www.archimetric.com\/id\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba"},"headline":"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts","datePublished":"2026-07-28T07:15:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/"},"wordCount":3213,"commentCount":0,"image":{"@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.archimetric.com\/id\/wp-content\/uploads\/sites\/15\/2026\/07\/img_6a68577788335.png","articleSection":["AI","AI Chatbot","VPasCode"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","url":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","name":"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts - ArchiMetric Indonesian","isPartOf":{"@id":"https:\/\/www.archimetric.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage"},"image":{"@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.archimetric.com\/id\/wp-content\/uploads\/sites\/15\/2026\/07\/img_6a68577788335.png","datePublished":"2026-07-28T07:15:09+00:00","author":{"@id":"https:\/\/www.archimetric.com\/id\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba"},"breadcrumb":{"@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage","url":"https:\/\/www.archimetric.com\/id\/wp-content\/uploads\/sites\/15\/2026\/07\/img_6a68577788335.png","contentUrl":"https:\/\/www.archimetric.com\/id\/wp-content\/uploads\/sites\/15\/2026\/07\/img_6a68577788335.png","width":1024,"height":572},{"@type":"BreadcrumbList","@id":"https:\/\/www.archimetric.com\/id\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.archimetric.com\/id\/"},{"@type":"ListItem","position":2,"name":"Dari Nol hingga Mahir dalam Visualisasi Data: Panduan Pemula untuk Pembuatan Grafik Berbasis Kecerdasan Buatan dengan VPasCode dan ECharts"}]},{"@type":"WebSite","@id":"https:\/\/www.archimetric.com\/id\/#website","url":"https:\/\/www.archimetric.com\/id\/","name":"ArchiMetric Indonesian","description":"EA, Dev Ops, Scrum, Agile and More","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.archimetric.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.archimetric.com\/id\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba","name":"curtis","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.archimetric.com\/id\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.archimetric.com\/id\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/posts\/11302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/users\/3482"}],"replies":[{"embeddable":true,"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/comments?post=11302"}],"version-history":[{"count":0,"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/posts\/11302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/media\/11303"}],"wp:attachment":[{"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/media?parent=11302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/categories?post=11302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.archimetric.com\/id\/wp-json\/wp\/v2\/tags?post=11302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}