echarts图例legend倾斜显示
时间: 2023-07-28 14:13:21 浏览: 112
可以通过设置 legend 的 textStyle 属性来实现倾斜显示,具体的代码如下:
```javascript
legend: {
textStyle: {
fontSize: 12,
fontStyle: 'italic',
color: '#333',
textBorderColor: 'rgba(0, 0, 0, 0)'
},
itemWidth: 10,
itemHeight: 10,
data: ['数据1', '数据2', '数据3']
},
```
其中,textStyle 中的 fontStyle 属性可以设置字体的样式,例如 italic 表示斜体。textBorderColor 设置为透明可以让字体与背景融合,看起来更加自然。itemWidth 和 itemHeight 可以分别设置图例的宽度和高度。如果需要调整倾斜的角度,可以使用 transform 属性。例如:
```javascript
legend: {
textStyle: {
fontSize: 12,
fontStyle: 'italic',
color: '#333',
textBorderColor: 'rgba(0, 0, 0, 0)',
transform: 'rotate(-45)'
},
itemWidth: 10,
itemHeight: 10,
data: ['数据1', '数据2', '数据3']
},
```
在 textStyle 中加入 transform: 'rotate(-45)',则图例会以左下到右上的方向倾斜显示。
阅读全文