当前位置：首页 > news >正文

echarts X轴文字排列方式总结

news 2023/10/4 11:08:57

1.竖向排列（可指定文字数量）

竖向排列

// 此为 x 轴信息xAxis: [{type: "category",axisTick: {show: false,},splitLine: {show: false,},data: [], // 可动态赋值axisLabel: {show: true,interval: 0,// 此为关键点formatter: function (params) {// params为x轴文字内容var newParamsName = "";var paramsNameNumber = params.length;var provideNumber = 1; //一行显示几个字var rowNumber = Math.ceil(paramsNameNumber / provideNumber);if (paramsNameNumber > provideNumber) {for (var p = 0; p < rowNumber; p++) {var tempStr = "";var start = p * provideNumber;var end = start + provideNumber;if (p == rowNumber - 1) {tempStr = params.substring(start, paramsNameNumber);} else {tempStr = params.substring(start, end) + "\n";}newParamsName += tempStr;}} else {newParamsName = params;}return newParamsName;},textStyle: {color: "#6861a6", //文字颜色},},}, ],

2.旋转角度排列

在这里插入图片描述

 xAxis: [{axisLabel: {interval: 0,rotate: -45, // 主要是这个 设置角度即可 - 90 ~ 90 旋转方向也不同},type: "category",data: [],}],

interval

坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推

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

image.png

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

 grid:{//直角坐标系内绘图网格show:true,//是否显示直角坐标系网格。[ default: false ]left:"20%",//grid 组件离容器左侧的距离。right:"30px",borderColor:"#c45455",//网格的边框颜色bottom:"20%" //},

3.文字竖直显示

同样和换行一个道理,只是这个是单个文字换行
在xAxis.axisLabel中使用formatter回调函数实现换行

axisLabel: {  interval: 0,  formatter:function(value)  {  return value.split("").join("\n");  }  }

4.隔一个换行

在xAxis.axisLabel中使用formatter回调函数实现换行

axisLabel : {//坐标轴刻度标签的相关设置。clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里interval : 0,formatter : function(params,index){if (index % 2 != 0) {return '\n\n' + params;}else {return params;}}}