echarts柱状图实现x轴文字多行展示

好奇鑫

于 2022-12-07 17:45:11 发布

阅读量1.4k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/wx258852/article/details/128224168

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了ECharts中xAxis配置项的使用方法，包括如何设置分类类型的数据轴、调整刻度标签显示方式及旋转角度等。针对不同场景，如‘rdyyfl’、‘cllxh’和‘sgxt’等，提供了自定义标签格式的方法，以适应长标签名的展示需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xAxis: [
{
type: 'category',
data: xAxisData,
axisTick: {
alignWithLabel: true
},

axisLabel: {
interval: 0,
rotate: propsData.key=='rdyyfl'? -50 : 0,

formatter: function (value, index) {
if(propsData.key=='rdyyfl'||propsData.key=='cllxh'||propsData.key=='sgxt'){
if(value.length>4){
const num = parseInt(value.length/2)
// return `${value.slice(0,3)}...`+'\n'+ num
return `${value.slice(0,num)}`+'\n'+ `${value.slice(num,value.length)}`
}
}
return value
}
// formatter: function(value, index){
// if(propsData.key=='rdyyfl'||propsData.key=='cllxh'||propsData.key=='sgxt'){
// if (index % 2 != 0) {
// return '\n' + value;
// }
// }
// return value
//}
}
}
],