ECharts 快速入門

文章目錄

- 1. 引入 ECharts
- 2. 初始化 ECharts 實例
- 3. 配置圖表選項
- 4. 使用配置項生成圖表
- 5. 最常用的幾種圖形
- - 5.1 柱狀圖（Bar Chart）
  - 5.2 折線圖（Line Chart）
  - 5.3 餅圖（Pie Chart）
  - 5.4 散點圖（Scatter Chart）
- 6. 更多配置項
- - 6.1 顏色主題
  - 6.2 數據縮放
  - 6.3 工具欄
- 7. 參考文檔

ECharts 是一個由百度開源的基于 JavaScript 的數據可視化圖表庫，它提供了豐富的圖表類型、交互功能和主題樣式，方便用戶快速創建各種數據可視化圖表，并在商業和開源項目中廣泛應用。

本文內容根據 ECharts 官方文檔整理。

下面將介紹如何使用 ECharts 創建最常用的幾種圖表：柱狀圖、折線圖、餅圖和散點圖。

1. 引入 ECharts

在使用 ECharts 之前，首先需要在 HTML 文件中引入 ECharts 的 JavaScript 文件。

可以選擇通過 CDN 引入或者下載 ECharts 文件并在本地引入。

使用 CDN：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 庫 -->
</head>
<body><div id="main" style="width: 600px;height:400px;"></div> <!-- 定義一個用于顯示圖表的容器 --><script>// 在這里編寫您的 ECharts 代碼</script>
</body>
</html>

2. 初始化 ECharts 實例

在 HTML 中創建一個容器，然后在 JavaScript 中初始化 ECharts 實例。

<div id="main" style="width: 600px;height:400px;"></div> <!-- 創建一個用于顯示圖表的 div 容器 -->
<script>// 初始化 ECharts 實例，并將其綁定到上述 div 容器var chart = echarts.init(document.getElementById('main')); 
</script>

3. 配置圖表選項

定義圖表的配置和數據。

ECharts 的配置項非常豐富，以下是一個簡單的示例：

var option = {// 圖表的標題配置title: {text: 'ECharts 示例圖表'  // 設置圖表的標題文本},// 提示框組件配置，用于顯示數據詳細信息tooltip: {},  // 默認配置，啟用提示框組件// 圖例組件配置，用于顯示圖例數據legend: {data: ['銷量']  // 圖例數據，顯示在圖表上方的標簽},// X 軸配置xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']  // X 軸的數據項},// Y 軸配置，使用默認配置yAxis: {},// 數據系列配置series: [{name: '銷量',  // 系列的名稱type: 'bar',  // 圖表類型為柱狀圖data: [5, 20, 36, 10, 10, 20]  // 數據項，對應于 X 軸上的各個類別}]
};

4. 使用配置項生成圖表

將配置項設置給 ECharts 實例以生成圖表。

// 使用 setOption 方法將配置項設置給 ECharts 實例，生成圖表
chart.setOption(option);

5. 最常用的幾種圖形

5.1 柱狀圖（Bar Chart）

柱狀圖是一種非常常用的圖表類型，適用于比較不同類別的數據。

下面是一個完整的柱狀圖示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>柱狀圖</title><!-- 引入 ECharts 庫 --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body><!-- 創建一個用于顯示柱狀圖的 div 容器，設置寬度為 600 像素，高度為 400 像素 --><div id="barChart" style="width: 600px;height:400px;"></div> <script>// 初始化 ECharts 實例，并將其綁定到上述 div 容器var barChart = echarts.init(document.getElementById('barChart'));// 定義柱狀圖的配置選項var barOption = {// 配置圖表的標題title: {text: '柱狀圖示例'  // 設置標題文本為“柱狀圖示例”},// 配置提示框組件，默認配置即可顯示數據詳細信息tooltip: {},  // 配置圖例legend: {data: ['銷量']  // 圖例數據，顯示為“銷量”},// 配置 X 軸xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']  // X 軸數據，表示不同種類的商品},// 配置 Y 軸，默認配置yAxis: {},  // 配置數據系列series: [{name: '銷量',  // 系列名稱為“銷量”type: 'bar',  // 圖表類型為柱狀圖data: [5, 20, 36, 10, 10, 20]  // 數據項，表示不同商品的銷量}]};// 使用 setOption 方法將配置項設置給 ECharts 實例，生成圖表barChart.setOption(barOption);</script>
</body>
</html>

5.2 折線圖（Line Chart）

折線圖用于顯示數據的變化趨勢，特別適合展示時間序列數據。

以下是一個折線圖的完整示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>折線圖</title><!-- 引入 ECharts 庫 --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body><!-- 創建一個用于顯示折線圖的 div 容器，設置寬度為 600 像素，高度為 400 像素 --><div id="lineChart" style="width: 600px;height:400px;"></div> <script>// 初始化 ECharts 實例，并將其綁定到上述 div 容器var lineChart = echarts.init(document.getElementById('lineChart'));// 定義折線圖的配置選項var lineOption = {// 配置圖表的標題title: {text: '折線圖示例'  // 設置標題文本為“折線圖示例”},// 配置提示框組件，默認配置即可顯示數據詳細信息tooltip: {},  // 配置圖例legend: {data: ['溫度']  // 圖例數據，顯示為“溫度”},// 配置 X 軸xAxis: {type: 'category',  // X 軸類型：類目軸data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']  // X 軸數據，表示一周中的七天},// 配置 Y 軸yAxis: {type: 'value'  // Y 軸類型：數值軸},// 配置數據系列series: [{name: '溫度',  // 系列名稱為“溫度”type: 'line',  // 圖表類型為折線圖data: [11, 11, 15, 13, 12, 13, 10]  // 數據項，表示一周中每天的溫度}]};// 使用 setOption 方法將配置項設置給 ECharts 實例，生成圖表lineChart.setOption(lineOption);</script>
</body>
</html>

5.3 餅圖（Pie Chart）

餅圖用于顯示各部分在總量中的占比情況。

以下是一個餅圖的完整示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>餅圖</title><!-- 引入 ECharts 庫 --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body><!-- 創建一個用于顯示餅圖的 div 容器，設置寬度為 600 像素，高度為 400 像素 --><div id="pieChart" style="width: 600px;height:400px;"></div> <script>// 初始化 ECharts 實例，并將其綁定到上述 div 容器var pieChart = echarts.init(document.getElementById('pieChart'));// 定義餅圖的配置選項var pieOption = {// 配置圖表的標題title: {text: '餅圖示例',  // 設置標題文本為“餅圖示例”left: 'center'  // 標題位置：居中},// 配置提示框組件，默認配置即可顯示數據詳細信息tooltip: {trigger: 'item'  // 提示框觸發類型：數據項觸發},// 配置圖例legend: {orient: 'vertical',  // 圖例布局方式：垂直left: 'left'  // 圖例位置：左側},// 配置數據系列series: [{name: '訪問來源',  // 系列名稱為“訪問來源”type: 'pie',  // 圖表類型為餅圖radius: '50%',  // 餅圖半徑為 50%data: [  // 數據項{value: 1048, name: '搜索引擎'},  // 搜索引擎的訪問量{value: 735, name: '直接訪問'},  // 直接訪問的訪問量{value: 580, name: '郵件營銷'},  // 郵件營銷的訪問量{value: 484, name: '聯盟廣告'},  // 聯盟廣告的訪問量{value: 300, name: '視頻廣告'}  // 視頻廣告的訪問量],// 配置高亮樣式emphasis: {itemStyle: {shadowBlur: 10,  // 陰影模糊大小shadowOffsetX: 0,  // 陰影水平方向偏移shadowColor: 'rgba(0, 0, 0, 0.5)'  // 陰影顏色}}}]};// 使用 setOption 方法將配置項設置給 ECharts 實例，生成圖表pieChart.setOption(pieOption);</script>
</body>
</html>

5.4 散點圖（Scatter Chart）

散點圖用于顯示兩個變量之間的關系。

以下是一個散點圖的完整示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>散點圖</title><!-- 引入 ECharts 庫 --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body><!-- 創建一個用于顯示散點圖的 div 容器，設置寬度為 600 像素，高度為 400 像素 --><div id="scatterChart" style="width: 600px;height:400px;"></div> <script>// 初始化 ECharts 實例，并將其綁定到上述 div 容器var scatterChart = echarts.init(document.getElementById('scatterChart'));// 定義散點圖的配置選項var scatterOption = {// 配置圖表的標題title: {text: '散點圖示例'  // 設置標題文本為“散點圖示例”},// 配置提示框組件，默認配置即可顯示數據詳細信息tooltip: {},  // 配置 X 軸xAxis: {},  // 配置 Y 軸yAxis: {},  // 配置數據系列series: [{symbolSize: 20,  // 數據點大小設置為20data: [  // 數據項[10.0, 8.04],[8.0, 6.95],[13.0, 7.58],[9.0, 8.81],[11.0, 8.33],[14.0, 9.96],[6.0, 7.24],[4.0, 4.26],[12.0, 10.84],[7.0, 4.82],[5.0, 5.68]],type: 'scatter'  // 圖表類型為散點圖}]};// 使用 setOption 方法將配置項設置給 ECharts 實例，生成圖表scatterChart.setOption(scatterOption);</script>
</body>
</html>

6. 更多配置項

ECharts 提供了豐富的配置項來定制圖表。

以下是一些常見配置項的示例：

6.1 顏色主題

通過 color 屬性可以自定義圖表的顏色主題：

var option = {color: ['#3398DB'],  // 自定義顏色主題...
};

6.2 數據縮放

通過 dataZoom 可以實現圖表的數據縮放功能：

var option = {dataZoom: [{type: 'slider',  // 縮放類型：滑動條start: 10,  // 縮放起始位置 end: 60  // 縮放結束位置}],...
};

6.3 工具欄

通過 toolbox 可以添加工具欄，包括導出圖片等功能：

var option = {toolbox: {feature: {saveAsImage: {}  // 保存為圖片的工具}},...
};

7. 參考文檔

本文涵蓋了 ECharts 的基本使用方法和常見圖表類型的創建。

想要了解更多關于 ECharts 的詳細配置和高級功能，請訪問 ECharts 官方文檔。