echarts X轴文字排列方式总结

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;}}}

echarts X轴文字排列方式总结相关推荐

echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
echarts X轴文字竖向排列 ,一行两字竖向排列或旋转角度排列
竖向排列 (可指定文字数量) // 此为 x 轴信息xAxis: [{type: "category",axisTick: {show: false,},splitLine: {s ...
Echarts柱状图中让x轴的坐标文字竖版向下显示；echarts x轴文字竖排；echarts x轴文字
效果代码 xAxis: {// data: ['消防烟感', '摄像机', '环境烟感', '路灯', '地磁'],data:myKeys,axisLine: {show: false //隐藏X轴 ...
echarts的x轴文字倾斜展示
前言: echarts图x轴文字倾斜展示效果图: 实现代码: xAxis:{data:['站点一','站点二']//主要是下面的代码-倾斜axisLabel:{ rotate : 60 } } 到此 ...
ECharts X 轴标签过长导致文字重叠的 4 种解决方案
目录方法一:Echarts X 轴标签倾斜摆放方法二:Echarts X 轴限制每行字数,换行显示方法三:Echarts X 轴垂直竖显文字方法四:Echarts X 轴隔行显示使用 ...
ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...
在 Echarts 中设置折线图x轴文字的倾斜度
在 Echarts 中设置折线图x轴文字的倾斜度在工作需求中,有需要把 Echarts 折线图的文字变成倾斜的样式.类似这样的: 这个功能咋实现? 很简单.加一句话就行了 // 配置项 option ...
Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
Echarts x轴，y轴，文字大小设置.
如图修改前: 从echarts官网文档找到配置文字大小项: 官网链接:https://echarts.apache.org/zh/index.html 修改X,Y轴文字大小,可加代码: axisLab ...

echarts X轴文字排列方式总结

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

2.旋转角度排列

echarts X轴文字排列方式总结相关推荐

最新文章

热门文章

echarts X轴文字排列方式总结

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

2.旋转角度排列

echarts X轴文字排列方式总结相关推荐

最新文章

热门文章

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