eacharts markPoint 使用回调函数
时间: 2023-06-28 10:08:37 浏览: 45
在使用 echarts 的 markPoint 功能时,可以通过设置 itemStyle 属性来控制标记点的样式。其中,可以通过设置 label 属性来显示标记点的文本信息。而要实现根据文本信息动态地显示不同的样式,可以通过设置 label 的 formatter 属性为一个回调函数来实现。
例如,下面的代码演示了如何根据标记点的文本信息显示不同的背景颜色:
```javascript
option = {
series: [
{
type: 'scatter',
data: [
[10.0, 8.04, 'A'],
[8.0, 6.95, 'B'],
[13.0, 7.58, 'C'],
[9.0, 8.81, 'D'],
[11.0, 8.33, 'E'],
[14.0, 9.96, 'F'],
[6.0, 7.24, 'G'],
[4.0, 4.26, 'H'],
[12.0, 10.84, 'I'],
[7.0, 4.82, 'J'],
[5.0, 5.68, 'K']
],
markPoint: {
data: [
{ name: 'high', value: 'I', xAxis: 12, yAxis: 10.84 },
{ name: 'low', value: 'H', xAxis: 4, yAxis: 4.26 }
],
itemStyle: {
color: function(params) {
if (params.data.value === 'I') {
return '#FF4136'; // 红色
} else if (params.data.value === 'H') {
return '#0074D9'; // 蓝色
} else {
return '#2ECC40'; // 绿色
}
}
},
label: {
show: true,
formatter: function(params) {
if (params.value === 'I') {
return 'High: ' + params.value;
} else if (params.value === 'H') {
return 'Low: ' + params.value;
} else {
return params.value;
}
},
backgroundColor: function(params) {
if (params.value === 'I') {
return '#FF4136'; // 红色
} else if (params.value === 'H') {
return '#0074D9'; // 蓝色
} else {
return '#2ECC40'; // 绿色
}
},
padding: [2, 4],
borderRadius: 2
}
}
}
]
};
```
在上面的代码中,我们设置了两个标记点,分别表示最高点和最低点。对于这两个标记点,我们通过设置 itemStyle 的 color 属性来控制其背景颜色,通过设置 label 的 formatter 和 backgroundColor 属性来显示文本信息和动态地控制标记点的背景颜色。具体来说,我们通过判断标记点的文本信息来显示不同的文本和背景颜色。如果是最高点,则显示 "High: I" 和红色背景,如果是最低点,则显示 "Low: H" 和蓝色背景,否则就只显示文本信息和绿色背景。