echarts设置tooltip的样式
时间: 2023-10-13 09:06:53 浏览: 77
ECharts 样式设置
可以通过以下代码设置 ECharts 中 tooltip 的样式:
```javascript
tooltip: {
backgroundColor: '#fff', // 提示框背景色
borderColor: '#ccc', // 提示框边框颜色
borderWidth: 1, // 提示框边框宽度
textStyle: { // 提示框文本样式
color: '#333',
fontSize: 14
}
}
```
除了上述属性外,还可以通过 `formatter` 属性设置 tooltip 的展示内容和样式。例如:
```javascript
tooltip: {
formatter: function(params, ticket, callback) {
var htmlStr = '<div style="text-align: left; font-size: 14px;">' +
params.name + ': ' + params.value +
'<br>自定义样式:' +
'<span style="color: red;">这里可以设置自定义样式</span>' +
'</div>';
return htmlStr;
},
backgroundColor: '#fff',
borderColor: '#ccc',
borderWidth: 1,
textStyle: {
color: '#333',
fontSize: 14
}
}
```
在 `formatter` 属性中可以使用 HTML 代码和 CSS 样式来设置 tooltip 的展示效果。
阅读全文