常見問題

Apache ECharts^TM

主題

一般問題

遇到技術問題該怎麼辦？

1) 建議您在提問之前，先閱讀左側導覽列的選項手冊。在選項手冊中，您可以找到 ECharts 有哪些配置項。您也可以在相關組件下找到是否有可以實現您所需功能的配置項。

2) 瀏覽此頁面上的常見問題。

3) 在官方編輯器、CodePen、CodeSandbox 或 JSFiddle 上建立一個簡單的範例來重現您的問題。如果您無法使用程式碼來描述需求，可以嘗試提供設計草稿或繪製草圖。

4) 在stackoverflow 上提問並附上範例連結。

ECharts 可以免費使用嗎？

是的，ECharts 是根據 Apache 許可證 2.0 開放原始碼的。

軸

如果軸標籤空間不足該怎麼辦？

您可以使用 interval 來控制顯示多少標籤，將其設定為 0 以顯示所有標籤。

或者，您可以設定 axisLabel.rotate 以將標籤旋轉一定的角度。

為什麼當您想將軸放在右側時它不起作用？

您需要將 onZero 設定為 false。

如何強制顯示軸的第一個/最後一個標籤？

ECharts 3.5.2 版本起支援 axisLabel.showMinLabel 和 axisLabel.showMaxLabel。它可以用來控制是否強制顯示第一個/最後一個標籤。

圖例

如果圖例區域重疊在圖表上該怎麼辦？

您可以設定 grid 來控制圖表區域的位置。例如，設定較大的 grid.top 以將繪圖區域向下移動。

我們計劃在未來版本中使佈局更智慧化。

折線圖

坐標軸上的刻度看起來與數據不同？

檢查您是否設定了 stack。如果您不想製作堆疊折線圖，則應將其移除。

長條圖

為什麼當數值很小時，y 軸刻度會消失？

ECharts 3.5 版本已修正此問題。

地圖圖表

省份名稱重疊在圖表上。如何修改名稱的位置？

您可以修改地圖檔案 (JS 或 JSON) 中對應省份的 cp 坐標，或修改已由 echarts.getMap('china') 載入的地圖數據。

如需更多詳細資訊，請參閱 GitHub。

從哪裡可以下載其他國家的地圖？

其他國家的地圖資訊可以從這裡下載。

如何取得地圖的縮放事件？

首先，您需要將系列的 roam 設定為 true，然後監聽 'georoam' 事件。例如：

myChart.on('georoam', function (params) {
   console.log(params);
});

如何製作我的自訂地圖？

ECharts 地圖是從原始坐標額外編碼而來的。您可以使用mapshaper-plus 工具上傳自訂 geojson 檔案，然後產生可在 Echarts 中使用的地圖檔案。

百度地圖

如何將 ECharts 與百度地圖一起使用？

包含 echarts.js、bmap.js 和 https://api.map.baidu.com/api?v=3.0&ak=在這裡填寫您在百度開發平台上取得的存取金鑰。
在 option 中設定 bmap，您可以參考這個範例。
如果您需要取得百度地圖實例，您可以使用 chart.getModel().getComponent('bmap').getBMap()，然後根據百度地圖 API 進行設定。

儀表圖

如何設定儀表板顏色？

您可以使用 axisLine.lineStyle.color。

事件處理

如何取得圖表點擊等事件？

閱讀官方教學。ECharts 支援的事件類型可以在相關 API 中找到。

其他

為什麼圖表沒有顯示？

您可以檢查以下情況：

是否正常載入 echarts.js。
是否已存在 echarts 變數。
在呼叫 echarts.init 時，DOM 容器是否具有寬度或高度。

為什麼在 Vue 中使用 ECharts 時圖表無法正確運作？

如果您使用的是 Vue 3，請避免使用 reactive 和 ref。
如果您使用的是 Vue 2，請避免在 data 函數中宣告 ECharts 實例物件或使用 Vue.observable API。

以上所有情況都會導致 ECharts 實例物件被代理為反應式物件，這可能會影響對 ECharts 內部模型屬性的存取，並帶來一些意想不到的問題和糟糕的效能。

建議將 ECharts 實例物件宣告為一般變數，或使用 shallowRef / shallowReactive / markRaw API 來防止實例物件被代理。

另請參閱 #17723 和 Vue 文件中的使用注意事項。

是否有更多學習 ECharts 的資源？

請參閱 awesome-echarts 以取得更多相關專案和資源。