簡介
在數據可視化領域，清晰與效率至關重要。Visual Paradigm 持續演進，以滿足開發者、數據分析師和設計師的需求，讓視覺化創建體驗更流暢、更快速、更直觀。隨著 VPasCode 的最新增強，用戶現在可以利用原生的 Apache ECharts 支援，結合強大的新自動格式化功能。本綜合指南將引導您使用 VPasCode 進行 ECharts 可視化，並運用一鍵自動格式化工具，保持代碼整潔、易讀且輕鬆編輯。
逐步指南：如何在 VPasCode 中可視化並自動格式化 ECharts
步驟 1：訪問 VPasCode 編輯器
前往 VPasCode 平台，即 Visual Paradigm 統一的「圖表即程式碼」（DaC）遊樂場。這個互動式、基於瀏覽器的編輯器專為處理各種程式碼驅動的可視化而設計，包括新整合的 Apache ECharts 環境。
步驟 2：輸入您的 ECharts 配置
在並排介面的左側面板中，貼上或輸入您的 ECharts 配置物件。無論您正在構建堆疊柱狀圖、雷達圖，還是複雜的儀表板組件，VPasCode 都能無縫接受標準的 EChartsoption 結構。
步驟 3：即時可視化
當您輸入程式碼時，右側面板會即時渲染互動式圖表。這個即時回饋迴圈讓您能直接看到配置變更的影響，無需重新整理頁面或手動編譯腳本。
圖 1：VPasCode 介面支援無縫的程式碼編輯與即時可視化渲染。
步驟 4：套用一鍵自動格式化
處理複雜的圖表腳本時，常會導致壓縮的多行屬性，容易產生編輯錯誤和遺漏細節。要解決此問題，只需點擊</> 格式化 按鈕，該按鈕位於編輯器頂部。這將立即套用整潔、標準的縮排，轉換您的程式碼結構。
步驟 5：以無縫清晰度進行編輯
格式化後，每個屬性都清晰地列在單獨的行上。這種「無隱藏」的方式讓您對圖表結構擁有完全的可見性，讓您能快速定位並更新標籤、系列資料或樣式規則，無需從擁擠的程式碼行中搜尋。
步驟 6：分享或匯出您的作品
VPasCode 會自動將每個圖表配置壓縮成一個獨一無二、可分享的 URL。您可以輕鬆地進行程式碼審查協作、將圖表嵌入 Wiki 文件，或透過單一、無縫的連結向客戶進行即時展示。
實用的 ECharts 範例：銷售績效儀表板
為了展示 VPasCode 中 ECharts 整合的強大功能，讓我們 walkthrough 一個完整的銷售績效儀表板範例。
格式化前（壓縮程式碼）：
{title:{text:'Monthly Sales Performance'},tooltip:{trigger:'axis'},legend:{data:['Product A','Product B','Product C']},xAxis:{type:'category',data:['Jan','Feb','Mar','Apr','May','Jun']},yAxis:{type:'value'},series:[{name:'Product A',type:'bar',data:[120,200,150,80,70,110]},{name:'Product B',type:'bar',data:[220,182,191,234,290,330]},{name:'Product C',type:'line',data:[150,230,224,218,135,147]}]}
自動格式化後（整潔、易讀的程式碼）：
{
title: {
text: 'Monthly Sales Performance'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Product A', 'Product B', 'Product C']
},
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Product A',
type: 'bar',
data: [120, 200, 150, 80, 70, 110]
},
{
name: 'Product B',
type: 'bar',
data: [220, 182, 191, 234, 290, 330]
},
{
name: 'Product C',
type: 'line',
data: [150, 230, 224, 218, 135, 147]
}
]
}
此範例展示的內容：
-
混合圖表類型：將產品 A 和 B 的柱狀圖與產品 C 的折線圖結合，展現 ECharts 的靈活性
-
互動功能: 包含工具提示觸發器和圖例控制項，以增強使用者互動體驗
-
清晰的資料結構: 自動格式化版本可讓每個系列的起始與結束位置一目了然
-
輕鬆修改: 需要新增第四項產品嗎？使用格式化程式碼，您只需複製一個系列區塊並修改數值即可
-
專業呈現: 標題、軸線與資料均已正確設定，可立即用於生產環境的儀表板
親自試試看：
-
複製上方「格式化前」的程式碼
-
將其貼上至 VPasCode 的左側面板
-
點擊「
</> 格式化」按鈕，即可查看轉換效果 -
觀察右側圖表即時渲染的過程
-
嘗試修改數值、新增新系列或調整顏色
結論
VPasCode 整合 ECharts 自動格式化功能，為尋求簡化資料視覺化工作流程的技術團隊帶來重大突破。透過消除雜亂程式碼帶來的障礙，Visual Paradigm 讓使用者能以前所未有的輕鬆方式設計專業且具互動性的圖表。無論您是生成由 AI 驅動的儀表板，或是微調手動設定，VPasCode 都能確保您的程式碼與其所產生的視覺化效果一樣優雅且結構清晰。立即啟動線上編輯器，體驗乾淨格式化程式碼帶來的差異。
參考資料
-
提升您的工作流程：ECharts 自動格式化功能現已於 VPasCode 正式上線: 介紹 VPasCode 中針對 ECharts 腳本新增的一鍵程式碼格式化功能。
-
最佳圖表編輯器與統一的圖形即程式碼平台: 宣布 VPasCode 原生支援 Apache ECharts，可直接於平台內建構互動式資料視覺化。
-
VPasCode：統一的圖形即程式碼平台: 概述 VPasCode 作為智慧、AI 輔助的圖形即程式碼沙盒與編輯器。
-
使用 VPasCode 即時視覺化 XML: 詳細說明 VPasCode 環境中的 XML 視覺化與自動格式化功能。
