echarts x轴文字个数太多_Echarts x轴文本内容太长的几种解决方案

Echarts 标签中文本内容太长的时候怎么办 ?

1对文本进行倾斜

在xAxis.axisLabe中修改rotate的值

xAxis: {

data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据

name:"123",//坐标轴名称。

nameLocation:'end',//坐标轴名称显示位置。

axisLabel : {//坐标轴刻度标签的相关设置。

interval:0,

rotate:"45"

}

},

interval

坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签(也就是默认会将部分文字显示不全)

可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推

一开始我没设置 因为标签文本过长的原因他就自动不显示全部

image.png

被遮挡住就让grid 组件离容器向上移动 把grid中的bottom的值调大一些

grid:{//直角坐标系内绘图网格

show:true,//是否显示直角坐标系网格。[ default: false ]

left:"20%",//grid 组件离容器左侧的距离。

right:"30px",

borderColor:"#c454