Echarts设置X轴文本换行

在做Echarts图表的时候通常会遇到一个名字较长的分类或者字段名称通常我们可以倾斜他让他全部显示但是这样的话X轴下方就会拉得比较长在项目中需求通常也是会要求换行；

Echarts本身没有提供换行这个功能的所以只有自己想办法；我这里是利用循环对字符串进行截取拼接的方式来解决的；

下面给一个示例，都有注释很好理解：

xAxis: [{type: 'category',data: [],axisLine:{show:false //不显示横轴线},axisTick: {alignWithLabel: true, //柱状图中心是否对齐刻度位置show: false //不显示刻度},axisLabel: {  interval: 0,  formatter:function(value)  {  var ret = "";//拼接加\n返回的类目项  var maxLength = 5;//每项显示文字个数  var valLength = value.length;//X轴类目项的文字个数  var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  if (rowN > 1)//如果类目项的文字大于5,  {  for (var i = 0; i < rowN; i++) {  var temp = "";//每次截取的字符串  var start = i * maxLength;//开始截取的位置  var end = start + maxLength;//结束截取的位置  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  temp = value.substring(start, end) + "\n";  ret += temp; //凭借最终的字符串  }  return ret;  }  else {  return value;  }  }  } }
],

我们来看下效果：

Echarts设置X轴文本换行相关推荐

Echarts设置y轴值间隔
需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的清清楚楚 ...
echarts设置x轴字体不同颜色
业务需求:根据x轴是用户和有用户的文件夹来展示两种颜色在获取数据的方法中 initData() {totalAnaysis().then(res => {let xData = [],yDat ...
解决echarts设置x轴、y轴刻度起始值、终止值以及步长
echarts的官方示例中,可以通过设置xAxis(x轴)和yAxis(y轴)min.max属性改变x.y轴刻度起始.终止值. 对于坐标轴步长,官方给出两种方式,第一种是利用splitNumber,第 ...
echarts 设置X轴Y轴字体大小不成功问题处理
在网上看到的error代码 axisLabel: {show: true,textStyle: {color: '#FFFFFF',fontSize: '38',//字体大小},}, 正确的代码 ax ...
echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...
前言之前在一篇文章<深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?>已经初步介绍了如何通过 formatter 结合 r ...
R语言ggplot2可视化：ggplot2中使用element_text函数设置轴标签文本粗体字体（bold text,只设置x轴的标签文本使用粗体字体）
R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置x轴的标签文本使用粗体字体) 目录
R语言ggplot2可视化：ggplot2中使用element_text函数设置轴标签文本粗体字体（bold text,只设置y轴的标签文本使用粗体字体）
R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,只设置y轴的标签文本使用粗体字体) 目录
echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
echarts中y轴设置刻度_xAxis 配置
设置ECharts中y轴刻度线的样式在上节内容中我们提到了 ECharts 中 y 轴刻度线样式的设置,那么在本节我们就来详细介绍一下 yAxis 中 axisTick.lineStyle 所包含的 ...

Echarts设置X轴文本换行

Echarts设置X轴文本换行相关推荐

最新文章

热门文章