echarts 柱状图+折线+文字倾斜及省略
时间: 2023-07-25 22:06:11 浏览: 174
Echarts 柱状图和折线图
5星 · 资源好评率100%
要实现echarts柱状图+折线+文字倾斜及省略,可以通过以下的配置:
```
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0,
rotate: 45,
overflow: 'truncate'
}
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}, {
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
```
其中,`axisLabel.interval`设置为0表示不间隔显示x轴标签;`axisLabel.rotate`设置为45表示将标签旋转45度;`axisLabel.overflow`设置为'truncate'表示将超出标签长度部分省略显示。
如果要将所有的标签都显示出来,可以将`interval`改为1或者不设置。如果要将标签全部显示并且不旋转,可以将`interval`改为0,`rotate`不设置。
阅读全文