echarts tooltip 字体靠左
时间: 2023-10-03 19:05:51 浏览: 109
8.Echarts总结.rar
可以使用 echarts 的 tooltip.trigger 设置为 'axis',然后通过 tooltip.axisPointer.type 设置为 'shadow',再使用 tooltip.formatter 回调函数来自定义 tooltip 的内容。在 formatter 中可以使用 CSS 样式来调整 tooltip 中文本的样式,例如可以使用 text-align: left; 将文字靠左对齐。
以下是一个示例代码:
```javascript
option = {
// ...
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
var res = '<div style="text-align: left;">' + params[0].name + '</div>';
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/><span style="color:' + params[i].color + '">' + params[i].seriesName + ' : ' + params[i].value + '</span>';
}
return res;
}
},
// ...
};
```
在上面的代码中,我们通过设置 tooltip.trigger 为 'axis',来实现 tooltip 的显示。然后使用 tooltip.axisPointer.type 设置为 'shadow' 来让 tooltip 显示在每个数据点的阴影区域中。最后通过 tooltip.formatter 回调函数来自定义 tooltip 的内容,并使用 CSS 样式将文字靠左对齐。
阅读全文