使用tooltip的formatter属性,自定义tooltip的显示内容和样式。
时间: 2024-05-14 20:12:08 浏览: 120
Toolbar自定义样式
tooltip的formatter属性是一个函数,用于自定义tooltip的显示内容和样式。该函数接受一个参数params,包含了当前鼠标悬浮在哪个系列上、悬浮在哪个数据项上以及对应的数值等信息。下面是一个示例:
```javascript
tooltip: {
formatter: function(params) {
var seriesName = params.seriesName;
var dataIndex = params.dataIndex;
var value = params.value;
return seriesName + "<br />" + "数据项" + dataIndex + ": " + value;
}
}
```
上面的代码中,我们使用了params.seriesName、params.dataIndex和params.value来获取当前悬浮的系列名称、数据项索引和对应的数值。然后,我们将这些信息拼接成一个字符串,作为tooltip的显示内容。
除了显示内容,我们还可以使用CSS样式来自定义tooltip的样式。例如,可以使用以下代码来设置tooltip的背景色、字体大小和字体颜色:
```javascript
tooltip: {
formatter: function(params) {
// ...
},
backgroundColor: "#333",
textStyle: {
fontSize: 14,
color: "#fff"
}
}
```
上面的代码中,我们使用了backgroundColor属性来设置tooltip的背景色,使用textStyle.fontSize和textStyle.color来设置文字的大小和颜色。
总之,通过使用tooltip的formatter属性,我们可以灵活地自定义tooltip的显示内容和样式,以满足我们的需求。
阅读全文