Apache ECharts 6 新特性

十二年前，ECharts 在 GitHub 上首次釋出，播下了一段開源之旅的種子。

從一個簡單的圖表工具，到如今支援百萬開發者的視覺化利器；從單一的前端圖表庫，到覆蓋移動端、大屏、伺服器端渲染的完備技術體系——這 12 年，我們見證了 ECharts 不斷的技術突破，也欣喜地看到全球開發者用 ECharts 創作出無數精彩的資料故事。

現在，Apache ECharts 6.0 正式釋出，帶來 12 項重大升級，將您的資料視覺化體驗提升至全新高度。

特性概覽

十二年積澱，只為更極致的視覺表達。Apache ECharts 的核心力量，始終源於對開發者真實痛點的深刻理解。在定義 6.0 的方向時，問題非常明確：如何讓複雜的資料呈現既強大又優雅？

這驅動著我們圍繞三大核心維度進行了深度進化

更專業的視覺呈現：從精心打磨的預設主題到智慧的暗黑模式切換，確保圖表具備專業外觀，並能無縫融入現代應用。
拓展資料表達的邊界：新增圖表型別與功能，以應對複雜場景，讓深層資料得以直觀表達。
釋放自由組合的可能：從革命性的矩陣座標系到可複用的自定義系列、最佳化的座標軸標籤——賦予開發者自由組合的能力，將創意轉化為不受約束的視覺作品。

我們圍繞這三大核心維度，進行了 12 項升級。這不僅是簡單的功能疊加，更是為構建下一代資料驅動應用打下的堅實基礎。它們都指向同一個目標：讓 ECharts 在幕後強大、可靠、穩定，將舞臺和聚光燈，留給你的創意表達。

下面，我們詳細介紹這十二項升級

更專業的視覺呈現
- 1. 全新預設主題：現代設計語言，為專業資料表達而生
- 2. 動態主題切換：多主題場景下，執行時無縫切換主題
- 3. 暗黑模式支援：自動適配系統深色/淺色模式，提升使用者體驗
拓展資料表達的邊界
- 4. 新增弦圖：視覺化複雜關係與分佈
- 5. 新增蜂群圖：智慧將重疊資料點展開為蜂巢佈局
- 6. 新增散點圖抖動：為散點圖增加抖動，提升密集資料的可讀性
- 7. 新增斷軸：輕鬆呈現數量級差異大的資料
- 8. 增強股票交易圖：改進標籤能力，提供更多開箱即用的交易圖表
釋放自由組合的可能
- 9. 新增矩陣座標系：像表格一樣自由組合圖表型別和元件
- 10. 增強自定義系列：支援 npm 釋出和動態註冊，實現程式碼複用
- 11. 新增自定義圖表：小提琴圖、等高線圖、階段圖、柱狀範圍圖和折線範圍圖
- 12. 座標軸標籤最佳化：更智慧的預設座標軸標籤佈局，防止溢位和重疊

透過這些升級，Apache ECharts 6.0 幫助使用者更靈活、更便捷地建立更多圖表，真正實現“圖表無界”！

特性詳解

1. 全新預設主題

在 ECharts 6.0 的開發過程中，我們透過對真實使用者場景的分析發現，超過 70% 的開發者在使用預設主題。這讓我們意識到：一個優秀的預設主題，不僅要美觀，更要滿足各種業務場景的普遍需求。

新的主題系統使用設計變數（design token）重構了顏色、間距等設計元素，使不同圖表型別和元件之間更加和諧統一。

儘管 6.0 主題相較於 5.x 有較大變化，但我們為希望使用新功能但保留舊樣式的開發者提供了 v5.js 主題檔案，以便快速遷移。

2. 動態主題切換

在舊版本中，更換圖表主題需要銷燬圖表例項並重新初始化，這可能因重複的動畫對使用者體驗造成負面影響。在新版本中，我們實現了動態主題切換（見文件），顯著提升了使用者體驗。

3. 暗黑模式支援

有了動態主題註冊和切換，一個典型的應用場景就是監聽系統的暗黑模式，並動態調整圖表主題。

這對於支援暗黑模式的業務場景至關重要，能確保應用介面與系統主題一致，大大增強使用者體驗。

以下是如何監聽系統暗黑模式並更換圖表主題

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function updateDarkMode() {
    const isDarkMode = darkModeMediaQuery.matches;
    for (const chart of charts) {
        chart.setTheme(isDarkMode ? 'dark' : 'default');
    }
}
darkModeMediaQuery.addEventListener('change', () => {
    updateDarkMode();
});

4. 新增弦圖

弦圖能直觀展示覆雜關係網路中的流量和權重，非常適合金融交易、社交網路等場景。ECharts 創新地支援使用源節點和目標節點的漸變色來渲染邊，創造出獨特的視覺效果。參見 series-chord。

5. 新增蜂群圖

傳統的散點圖在類目軸上可能會變得擁擠。蜂群圖透過非數值軸的偏移來分佈資料點，既避免重疊，又保留了數值軸的準確性。將 jitter 設定為非零值，並將 jitterOverlap 設定為 false 即可啟用蜂群圖。

6. 新增散點圖抖動

散點圖抖動為非資料維度新增隨機偏移，解決了資料點過於密集的問題。

不加抖動時，資料密集處難以看清分佈情況

啟用抖動後，最密集的區間（6-8）變得清晰可見。與蜂群圖相比，散點圖抖動效能更優。

將 jitter 設定為非零值，並將 jitterOverlap 設定為 true 即可啟用散點圖抖動。

7. 新增斷軸

斷軸是一種用於展示數量級差異大的資料的視覺化技巧。在 ECharts 6.0 中，我們創新地為斷軸實現了“撕紙”效果，使其含義更直觀，並支援點選展開以恢復真實的資料比例。

8. 增強股票交易圖

ECharts 6.0 針對金融交易場景進行了深度最佳化，增強了標籤相對於座標系的定位能力，幫助開發者快速構建專業級的交易分析工具。

以下是使用 ECharts 製作的綜合性股票交易圖，結合了分時圖、MACD、成交量、訂單簿和深度圖

這些示例幫助開發者快速滿足金融交易需求。例如，透過 relativeTo 可以在圖表的四個角顯示數字。

9. 新增矩陣座標系

上面的示例也用到了 ECharts 6.0 中新增的矩陣座標系，它功能非常強大。可以用於協方差矩陣圖

元素週期表

作為一個佈局容器，它還允許開發者組合各種圖表型別和元件，以建立靈活複雜的複合視覺化

10. 增強自定義系列

以前，使用 ECharts 自定義系列意味著開發者需要從頭編寫複雜的 renderItem 邏輯，程式碼複用也僅限於複製貼上。現在，ECharts 6.0 帶來了標準化、可複用的解決方案

自定義系列註冊：與主題註冊類似，自定義系列可以動態註冊，並像內建系列一樣輕鬆使用。參見 series-custom.renderItem
官方自定義系列專案：官方專案 https://github.com/apache/echarts-custom-series 提供了多個自定義系列，正式釋出後可透過 npm 使用
釋出你自己的自定義系列：向上述專案提交拉取請求，或釋出到自己的倉庫，以實現程式碼複用