echarts修改悬浮样式
时间: 2023-10-06 08:13:18 浏览: 140
要修改 echarts 图表的悬浮样式,可以使用 echarts 的 tooltip 配置项。
例如,可以使用 tooltip 的 formatter 属性来自定义悬浮框的内容。同时,可以使用 tooltip 的 textStyle 属性来设置悬浮框文本的样式,使用 backgroundColor 属性来设置悬浮框的背景颜色。
下面是一个示例代码:
```
option = {
// ... 其他配置项
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
// 自定义悬浮框的内容
var html = '';
html += '<div style="font-weight:bold;">' + params[0].name + '</div>';
for (var i = 0; i < params.length; i++) {
var item = params[i];
html += '<div>' + item.marker + ' ' + item.seriesName + ': ' + item.value + '</div>';
}
return html;
},
textStyle: {
fontSize: 14,
color: 'white'
},
backgroundColor: 'rgba(0, 0, 0, 0.7)'
},
// ... 其他配置项
};
```
在上面的示例中,我们设置了 tooltip 的 trigger 为 'axis',这表示当鼠标悬浮在图表上时,会显示与鼠标所在位置对应的数据项的详细信息。我们还通过 formatter 属性来自定义了悬浮框的内容,通过 textStyle 属性来设置悬浮框文本的样式,通过 backgroundColor 属性来设置悬浮框的背景颜色。
你可以根据自己的需求,修改对应的属性来实现自定义的悬浮样式。