Echart柱状图:自定义tooltip浮窗内容
时间: 2024-05-06 10:20:25 浏览: 90
要自定义Echart柱状图的tooltip浮窗内容,可以使用Echart的tooltip formatter属性。该属性允许您使用自定义函数来生成tooltip浮窗中的内容。以下是一个简单的示例:
```javascript
option = {
tooltip: {
trigger: 'axis',
formatter: function(params) {
var tooltipHtml = '<div class="tooltip">';
tooltipHtml += '<div class="tooltip-title">' + params[0].name + '</div>';
tooltipHtml += '<div class="tooltip-content">';
tooltipHtml += '<div class="tooltip-item">' + params[0].seriesName + ': ' + params[0].value + '</div>';
tooltipHtml += '</div></div>';
return tooltipHtml;
}
},
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0,
rotate: 45
}
},
yAxis: {
type: 'value'
},
series: [{
name: 'Sales',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
}]
};
```
在上述示例中,我们定义了一个tooltip formatter函数,该函数接收一个参数params,该参数包含与鼠标悬停的数据点相关的信息。我们使用这些信息来构建我们自己的tooltip浮窗内容,并将其返回给Echart。然后,我们将该函数分配给tooltip的formatter属性。
在这个例子中,我们创建了一个自定义的tooltip浮窗,其中包含数据点的名称和值。您可以根据需要自定义tooltip的样式和内容,以满足您的特定需求。