Echarts中标题把图例遮盖,使用title.textStyle.overflow: 'truncate' 不管用
时间: 2023-06-18 10:03:23 浏览: 168
【JavaScript源代码】Echarts图例组件的属性与源代码.docx
如果使用 `title.textStyle.overflow: 'truncate'` 无法解决标题遮盖图例的问题,可以尝试以下两种方式:
1. 调整标题的位置:可以通过 `title.left` 或 `title.top` 属性调整标题的位置,使得标题不会遮盖图例。
2. 调整图例的位置:可以通过 `grid.top` 或 `grid.bottom` 属性调整图例的位置,使得图例不会被标题遮盖。
示例代码如下:
```javascript
option = {
title: {
text: '标题',
textStyle: {
overflow: 'truncate'
},
left: 20 // 调整标题的位置
},
grid: {
top: 80 // 调整图例的位置
},
legend: {
data: ['图例'],
top: 60
},
series: {
type: 'bar',
data: [10, 20, 30, 40, 50]
}
};
```
如果以上两种方式都无法解决问题,可以考虑将标题和图例分别放在两个不同的图表中,并通过 `grid` 属性进行排版布局。
阅读全文