ECharts 是一個基于 JavaScript的開源可視化圖表庫，廣泛應用于數據可視化的場景中，支持多種圖表類型，如柱狀圖、折線圖、餅圖、散點圖、雷達圖等，且具有強大的自定義功能。
1. ECharts 基本使用
首先需要引入 ECharts 庫，通常通過 CDN 或本地引入。以下是通過 CDN 引入的方式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts 入門教程</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><style>#chart {width: 100%;height: 400px;}</style>
</head>
<body><div id="chart"></div><script>// 初始化 ECharts 實例var chart = echarts.init(document.getElementById('chart'));// 配置項var option = {title: {text: 'ECharts 入門示例',subtext: '子標題',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['A', 'B', 'C', 'D']},series: [{name: '類別',type: 'pie',radius: '50%',data: [{ value: 40, name: 'A' },{ value: 30, name: 'B' },{ value: 20, name: 'C' },{ value: 10, name: 'D' }]}]};// 使用剛定義的配置項和數據顯示圖表chart.setOption(option);</script>
</body>
</html>
2. 解析配置項
-
title：圖表的標題配置。text: 主標題內容。subtext: 副標題內容。left: 控制標題的位置，center表示居中，left表示左對齊，right表示右對齊。
-
tooltip：提示框配置，鼠標懸浮在圖形元素上時顯示的內容。trigger: 觸發方式，item表示觸發項（如餅圖的每一項），axis表示坐標軸觸發。formatter: 自定義提示框的顯示內容，{a}是系列名稱，{b}是數據項名稱，{c}是數據項的值，{d}是百分比。
-
legend：圖例配置，展示各系列對應的標識符。orient: 圖例的排列方式，vertical表示豎直排列，horizontal表示水平排列。left: 控制圖例的位置，left表示左對齊，center居中，right右對齊。data: 圖例項的名稱數組，對應到series數據項中的name。
-
series：系列數據配置，ECharts 中的圖表類型（如柱狀圖、折線圖、餅圖等）都會通過series來定義。name: 系列名稱，用于tooltip提示框展示。type: 圖表類型，這里是pie，表示餅圖，其他常見類型有bar（柱狀圖）、line（折線圖）等。radius: 餅圖的半徑大小，50%表示占據容器寬度的50%。data: 圖表數據，包含各數據項的value（數值）和name（名稱）。
3. 場景分析：使用 ECharts 展示數據統計
假設我們需要展示一個餅圖，反映某公司不同部門的員工分布情況。我們可以通過 ECharts 來快速實現該需求，以下是代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>員工分布情況</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><style>#chart {width: 100%;height: 400px;}</style>
</head>
<body><div id="chart"></div><script>var chart = echarts.init(document.getElementById('chart'));var option = {title: {text: '公司部門員工分布',subtext: '2025年數據',left: 'center'},tooltip: {trigger: 'item',formatter: '{b}: {c}人 ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['研發', '市場', '銷售', '人力資源', '財務']},series: [{name: '員工分布',type: 'pie',radius: '50%',data: [{ value: 400, name: '研發' },{ value: 150, name: '市場' },{ value: 300, name: '銷售' },{ value: 100, name: '人力資源' },{ value: 50, name: '財務' }]}]};chart.setOption(option);</script>
</body>
</html>
4. 詳細解釋
-
title：此圖表的主標題為“公司部門員工分布”，副標題為“2025年數據”，這些都位于頁面中央顯示。 -
tooltip：每次鼠標懸停在圖表的不同部門上時，都會彈出該部門員工數量以及該部門占總員工數的百分比。 -
legend：顯示不同部門的圖例，并放置在頁面的左側。 -
series：這里的type為pie，表示我們使用餅圖來展示員工分布，radius: '50%'讓餅圖的大小為容器寬度的50%。
5. 進階功能：自定義樣式和交互
ECharts 提供了許多自定義圖表樣式和交互功能，可以進一步優化用戶體驗。例如，可以為每個部門設置不同的顏色，或者啟用動畫效果。
option = {...option,color: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'], // 自定義顏色animationType: 'expansion', // 動畫效果series: [{name: '員工分布',type: 'pie',radius: '50%',label: {show: true,position: 'outside',formatter: '{b}: {c}人'},data: [{ value: 400, name: '研發' },{ value: 150, name: '市場' },{ value: 300, name: '銷售' },{ value: 100, name: '人力資源' },{ value: 50, name: '財務' }]}]
};
color: 自定義每個部分的顏色。label: 配置標簽的顯示方式，包括位置和格式。
6. 總結
ECharts 是一個功能豐富且靈活的數據可視化庫，支持多種類型的圖表。通過簡單的配置，你可以實現復雜的交互效果和動態樣式調整。了解了 ECharts 的基本配置項后，你可以根據實際需求進行定制化的開發和設計，幫助你更好地呈現數據分析結果。
