在 Visual Paradigm，我們不斷突破開發人員、資料分析師與科技專業人士視覺化複雜系統與資料集的界限。最近，我們推出了VPasCode，一個整合的文字轉圖表平台，旨在消除在多個繪圖工具之間切換的摩擦。透過在單一整合的開發者環境中支援 Mermaid、PlantUML 和 Graphviz 等廣受歡迎的語法選項，VPasCode 已迅速成為快速、精確圖表渲染的首選生態系統。
今天，我們非常高興地宣布對我們工具包的重大升級：VPasCode 現已原生支援 Apache ECharts。此項新增功能使我們的圖表繪製環境轉變為高度靈活、以程式碼驅動的圖表製作工具。現在，您可以即時將您的 JSON 設定或 AI 協助描述轉換為豐富且互動式的資料視覺化。
透過我們的並排介面，操作機制依然簡單直覺：在左側面板輸入您的 ECharts 設定物件，右側面板將順暢地呈現您的互動式儀表板元件。
為什麼選擇 VPasCode 作為您的圖表生成器？
雖然標準的靜態圖表軟體迫使您拖曳、放置並手動調整每個像素，但 VPasCode 完全依賴結構化程式碼。整合 ECharts 為現代技術團隊帶來獨特優勢：
- 統一架構： 在同一標籤頁內輕鬆切換應用架構藍圖（透過 PlantUML/Mermaid）與資料分析儀表板（透過 ECharts）。
- AI 驅動的工作流程： 善用我們的平台作為智慧AI 圖表生成器。以原生方式描述您的資料需求（透過我們的 AI 圖表對話機器人），即可自動建立精確的視覺化圖表，無需手動樣式設定。
- 高度可分享狀態： 每個圖表設定都會壓縮成獨一無二、可分享的網址，讓您在程式碼審查、維基文件編輯或即時客戶簡報中輕鬆協作。
探索 VPasCode 中 ECharts 的即時範例
為展示我們更新後圖表生成器的效能，我們準備了數個符合生產環境標準的資料視覺化範本。您可透過訪問附帶的沙盒連結，直接與每個範例互動。
1. 累積長條圖（區域銷售分析）
非常適合觀察各組別的絕對總計，同時剖析分類分布。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '各區域季度銷售額' },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['北部', '南部', '東部', '西部'] },
xAxis: { type: 'value', name: '收入（單位：千美元）' },
yAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
series: [
{ name: '北部', type: 'bar', stack: '總計', data: [85, 120, 95, 150] },
{ name: '南部', type: 'bar', stack: '總計', data: [65, 90, 110, 130] },
{ name: '東部', type: 'bar', stack: '總計', data: [45, 70, 85, 100] },
{ name: '西部', type: 'bar', stack: '總計', data: [30, 50, 60, 75] }
]
};2. 帶陰影區域的折線圖（每月網站增長）
專為追蹤時間序列的變化而設計，具有平滑的插值效果和清晰的網格對齊。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '每月訪問次數', left: 'center' },
tooltip: { trigger: 'axis' },
grid: { left: 40, right: 20, top: 50, bottom: 30, containLabel: true },
xAxis: { type: 'category', data: ['一月','二月','三月','四月','五月','六月'] },
yAxis: { type: 'value' },
series: [{
name: '訪問次數',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
areaStyle: { opacity: 0.3 }
}]
};3. 自訂面積圖（明亮強調）
一個極佳的樣式彈性展示，可即時調整線條顏色、邊界設定與填充透明度。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '每月網站訪問次數（2026）' },
xAxis: { type: 'category', boundaryGap: false, data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'] },
yAxis: { type: 'value' },
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
areaStyle: { color: '#ff6b6b' },
lineStyle: { color: '#e03131' },
itemStyle: { color: '#e03131' }
}]
};4. 互動式餅圖（流量來源組合）
經典的布局，用於計算相對市場佔有率或流量來源，並配備清晰的底部圖例容器。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '網站來源網址', left: 'center' },
tooltip: { trigger: 'item' },
legend: { bottom: 10 },
series: [
{
name: '來源',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '搜尋引擎' },
{ value: 735, name: '直接訪問' },
{ value: 580, name: '電子郵件' },
{ value: 484, name: '聯合廣告' },
{ value: 300, name: '影片廣告' }
]
}
]
};5. 雷達圖（服務網格架構比較）
一種多變量圖形結構，常被用來並列評估技術能力、軟體基準或複雜架構標準。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '服務網格功能評估' },
tooltip: {},
radar: {
indicator: [
{ name: '吞吐量（每秒請求數）', max: 100 },
{ name: '容錯能力', max: 100 },
{ name: '記憶體效率', max: 100 },
{ name: '可觀測性', max: 100 },
{ name: '安全性/TLS', max: 100 }
]
},
series: [{
name: '服務型態',
type: 'radar',
data: [
{ value: [85, 90, 55, 95, 80], name: 'Go 代理節點', areaStyle: { opacity: 0.3 } },
{ value: [40, 75, 90, 60, 90], name: '舊版 Java 網關', areaStyle: { opacity: 0.1 } }
]
}]
};6. 散點圖（推論延遲指標分析）
非常適合識別異常峰值、載荷大小閾值，以及在分散式基礎架構中的應用瓶頸。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '推論延遲對比載荷大小', left: 'center' },
tooltip: { trigger: 'item', formatter: function (p) { return '大小: ' + p.value[0] + ' KB<br />延遲: ' + p.value[1] + ' ms'; } },
xAxis: { name: '載荷大小（KB）', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
yAxis: { name: '延遲（毫秒）', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
series: [{
type: 'scatter',
symbolSize: 12,
data: [
[120, 450], [240, 580], [50, 210], [512, 1100], [320, 720],
[180, 390], [450, 950], [90, 310], [600, 1340], [150, 410]
],
itemStyle: { color: '#aa00ff' }
}]
};7. 雷達圖（多層級程式碼庫授權）
使用同心圓來可視化層級關係。我們的平台如同一個有機的圖表製作工具來簡化此類複雜的嵌套資料設定。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '程式碼庫授權組成', left: 'center' },
series: [{
type: 'sunburst',
radius: [0, '90%'],
data: [{
name: '開源',
children: [
{ name: '寬鬆授權', children: [{ name: 'MIT', value: 55 }, { name: 'Apache 2.0', value: 30 }] },
{ name: '著佐權', children: [{ name: 'GPLv3', value: 12 }] }
]
}, {
name: '專有',
children: [{ name: '商業供應商', value: 18 }]
}]
}]
};8. 桑基圖（基礎設施成本流分析器）
透過流動的節點權重連結，追蹤運營資源配置或計算步驟中的財務變數。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '基礎設施成本流分析器' },
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
series: [{
type: 'sankey',
data: [
{ name: '總預算' }, { name: 'AWS 雲端' }, { name: 'SaaS 工具' },
{ name: 'EC2 計算' }, { name: 'RDS 儲存' }, { name: '監控' }
],
links: [
{ source: '總預算', target: 'AWS 雲端', value: 8000 },
{ source: '總預算', target: 'SaaS 工具', value: 2000 },
{ source: 'AWS 雲端', target: 'EC2 計算', value: 5500 },
{ source: 'AWS 雲端', target: 'RDS 儲存', value: 2500 },
{ source: 'SaaS 工具', target: '監控', value: 2000 }
],
lineStyle: { color: 'source', curveness: 0.5 }
}]
};9. 熱力圖（每小時部署速度網格）
輕鬆監控系統密度、部署量或跨自訂時間矩陣的持續流量變化。
ECharts
Edit ECharts in VPasCode
option = {
title: { text: '每小時部署速度', left: 'center' },
tooltip: { position: 'top' },
grid: { height: '50%', top: '15%' },
xAxis: { type: 'category', data: ['12am', '4am', '8am', '12pm', '4pm', '8pm'], splitArea: { show: true } },
yAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], splitArea: { show: true } },
visualMap: { min: 0, max: 30, type: 'continuous', orient: 'horizontal', left: 'center', bottom: '15%' },
series: [{
name: '部署次數',
type: 'heatmap',
data: [[0,0,5],[0,1,1],[0,2,0],[0,3,12],[0,4,18],[0,5,8],[1,3,15],[2,4,22],[3,3,30],[4,4,25],[5,0,2],[6,0,1]],
label: { show: true },
emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
}]
};立即解鎖文字轉圖表自動化的強大功能
無論您需要一個圖表製作工具來轉換原始業務指標，或需要一個用於結構工程地圖的中央畫布，VPasCode 都能簡化您的日常作業流程。告別零散的應用程式與脆弱的可視化庫。
準備好將您的資料結構轉化為互動式視覺化儀表板嗎？
探索完整畫布，試用這些範本，並免費測試我們的渲染效能。
立即啟動即時 VPasCode 編輯器 →