Echarts 是一個由百度開源的數據可視化庫，它提供了豐富的圖表類型和靈活的配置選項，能夠幫助開發者快速構建出美觀、交互性強的數據可視化圖表。本文將詳細介紹如何在 Echarts 中使用橫向堆疊柱狀圖（Horizontal Stacked Bar Chart）以及如何結合 markLine 來實現更復雜的數據展示。
橫向堆疊柱狀圖是一種將多個數據系列在水平方向上堆疊顯示的柱狀圖。每個柱子的長度代表數據的大小，而柱子內部的堆疊部分則代表不同系列的數據。這種圖表常用于展示多個類別的數據在不同維度上的分布情況。
首先，我們需要引入 Echarts 庫，并創建一個容器來放置圖表。以下是一個簡單的 HTML 結構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Stacked Bar Chart with markLine</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 在這里編寫 Echarts 配置
</script>
</body>
</html>
接下來，我們將在 script 標簽中編寫 Echarts 的配置代碼。以下是一個簡單的橫向堆疊柱狀圖的配置示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['系列1', '系列2', '系列3']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['類別1', '類別2', '類別3', '類別4', '類別5']
},
series: [
{
name: '系列1',
type: 'bar',
stack: '總量',
data: [120, 132, 101, 134, 90]
},
{
name: '系列2',
type: 'bar',
stack: '總量',
data: [220, 182, 191, 234, 290]
},
{
name: '系列3',
type: 'bar',
stack: '總量',
data: [150, 232, 201, 154, 190]
}
]
};
myChart.setOption(option);
trigger: 'axis' 表示觸發方式為坐標軸觸發，axisPointer: { type: 'shadow' } 表示鼠標懸停時顯示陰影。data 中的每一項對應一個系列的名稱。containLabel: true 表示包含坐標軸的標簽。type: 'value' 表示 X 軸為數值軸。type: 'category' 表示 Y 軸為類目軸，data 中的每一項對應一個類目。type: 'bar' 表示柱狀圖，stack: '總量' 表示將多個系列堆疊在一起，data 中的每一項對應一個數據點。markLine 添加標記線markLine 是 Echarts 中用于在圖表中添加標記線的功能。我們可以通過 markLine 來標記某些特定的數據點或范圍。以下是如何在橫向堆疊柱狀圖中使用 markLine 的示例：
var option = {
// 其他配置保持不變...
series: [
{
name: '系列1',
type: 'bar',
stack: '總量',
data: [120, 132, 101, 134, 90],
markLine: {
data: [
{ type: 'average', name: '平均值' },
{ yAxis: '類別3', name: '標記線' }
]
}
},
{
name: '系列2',
type: 'bar',
stack: '總量',
data: [220, 182, 191, 234, 290]
},
{
name: '系列3',
type: 'bar',
stack: '總量',
data: [150, 232, 201, 154, 190]
}
]
};
data 中的每一項表示一條標記線。
{ type: 'average', name: '平均值' }: 表示在系列1的數據上添加一條表示平均值的標記線。{ yAxis: '類別3', name: '標記線' }: 表示在 Y 軸的 類別3 處添加一條標記線。將上述配置整合在一起，完整的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Stacked Bar Chart with markLine</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['系列1', '系列2', '系列3']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['類別1', '類別2', '類別3', '類別4', '類別5']
},
series: [
{
name: '系列1',
type: 'bar',
stack: '總量',
data: [120, 132, 101, 134, 90],
markLine: {
data: [
{ type: 'average', name: '平均值' },
{ yAxis: '類別3', name: '標記線' }
]
}
},
{
name: '系列2',
type: 'bar',
stack: '總量',
data: [220, 182, 191, 234, 290]
},
{
name: '系列3',
type: 'bar',
stack: '總量',
data: [150, 232, 201, 154, 190]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
通過本文的介紹，我們了解了如何在 Echarts 中配置橫向堆疊柱狀圖，并使用 markLine 來添加標記線。Echarts 提供了豐富的配置選項，開發者可以根據實際需求靈活調整圖表的樣式和功能。希望本文能幫助你在實際項目中更好地使用 Echarts 進行數據可視化。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
