前端echarts加標記點及標記線和提示框詳細代碼示例

更新時間：2024年06月12日 10:09:42 作者：前端組件開發(fā)

ECharts中的標記線是一條平行于x軸的水平線,有最大值、最小值、平均值等數(shù)據(jù)的標記線,它也是在series字段下進行配置的,下面這篇文章主要給大家介紹了關(guān)于前端echarts加標記點及標記線和提示框的相關(guān)資料,需要的朋友可以參考下

前言

在 ECharts 中，你可以通過配置 series 對象的 markPoint、markLine 和 tooltip 屬性來添加標記點、標記線和提示框。以下是一個簡單的示例，說明如何在圖表中添加這些元素。

1. 添加標記點（markPoint）

標記點通常用于突出顯示數(shù)據(jù)中的某些點。

var myChart = echarts.init(document.getElementById('main'));

var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}]
};

myChart.setOption(option);

在這個例子中，我們?yōu)?nbsp;markPoint 添加了最大值和最小值的標記點。

2. 添加標記線（markLine）

標記線用于突出顯示圖表中的某些線，例如平均值線。

// ... 在上面的 option 中繼續(xù)添加 ...

series: [{
// ... 其他配置 ...
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]

// ...

3. 添加提示框（tooltip）

提示框用于在鼠標懸停在數(shù)據(jù)點上時顯示額外的信息。

// ... 在上面的 option 中繼續(xù)添加 ...

tooltip: {
trigger: 'axis', // 觸發(fā)類型，可選為：'item'、'axis'
formatter: function (params) {
// 格式化提示框的內(nèi)容
return params[0].seriesName + ' : ' + params[0].value;
}
}

// ...

在這個例子中，我們設(shè)置了提示框的觸發(fā)類型為 'axis'，這意味著當鼠標懸停在坐標軸上時，提示框會顯示該坐標軸上所有系列的數(shù)據(jù)。formatter 函數(shù)用于自定義提示框的內(nèi)容。

整合示例

將上述所有配置整合到一個完整的 ECharts 選項中：

var myChart = echarts.init(document.getElementById('main'));

var option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
return params[0].seriesName + ' : ' + params[0].value;
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]
};

myChart.setOption(option);