快捷導(dǎo)航

前端echarts加標(biāo)記點(diǎn)及標(biāo)記線和提示框詳細(xì)代碼示例

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

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

前言

在 ECharts 中，你可以通過(guò)配置 series 對(duì)象的 markPoint、markLine 和 tooltip 屬性來(lái)添加標(biāo)記點(diǎn)、標(biāo)記線和提示框。以下是一個(gè)簡(jiǎn)單的示例，說(shuō)明如何在圖表中添加這些元素。

1. 添加標(biāo)記點(diǎn)（markPoint）

標(biāo)記點(diǎn)通常用于突出顯示數(shù)據(jù)中的某些點(diǎn)。

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);

在這個(gè)例子中，我們?yōu)?nbsp;markPoint 添加了最大值和最小值的標(biāo)記點(diǎn)。

2. 添加標(biāo)記線（markLine）

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

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

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

// ...

3. 添加提示框（tooltip）

提示框用于在鼠標(biāo)懸停在數(shù)據(jù)點(diǎn)上時(shí)顯示額外的信息。

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

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

// ...

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

整合示例

將上述所有配置整合到一個(gè)完整的 ECharts 選項(xiàng)中：

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);

總結(jié)

到此這篇關(guān)于前端echarts加標(biāo)記點(diǎn)及標(biāo)記線和提示框的文章就介紹到這了,更多相關(guān)echarts加標(biāo)記點(diǎn)及標(biāo)記線和提示框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: