echarts图表X轴文字过长解决解决方案：根据文字长度自动旋转

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

关于这个问题搜索一下，有很多解决方案。无非就是省略（间隔显示）、旋转文字方向、竖排展示

前面两种解决方案，就是echarts暴露的：

{
  axisLabel: {
    interval: 0,//如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
    rotate: '45',// 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
  },
};

用法看官方文档：

interval: https://echarts.apache.org/zh/option.html#xAxis.axisLabel.interval
rotate: https://echarts.apache.org/zh/option.html#xAxis.axisLabel.rotate

网上有关的设置也看了下，几乎大同小异，比如：

Echarts x轴文本内容太长的几种解决方案 https://www.jianshu.com/p/b452cbe9be0e
Echarts-axislabel文字过长导致显示不全或重叠 https://www.cnblogs.com/hwaggLee/p/4762467.html

如何更加标签文字的总长度自动采取调整策略

对于固定模式的图标，我们直接设置竖排展示或者旋转就可了。但是对于图表类平台，如何控制 X轴文字自适应显示呢

这就需要我们去计算 x轴标签文字的长度，然后去匹配图表宽度，然后才去旋转策略去显示

如何计算字符串在浏览器中显示的宽度

这个有两种方法，一个是直接计算字符串，第二个是canvas里面计算

通过文本计算字符串的宽度

/**
* @description 计算字符串在浏览器中显示的宽度
* @author andyzhou
* @create andyzhou
* @update 1/27/21 by andyzhou
* @param text {string|number}
* @param fontSize {number}
* @return {number}
*/
export default function computedTextWidth(text, fontSize = 14) {
  let span = document.getElementById('computedTextWidth');
  if (!span) {
    span = document.createElement('span');
    span.id = 'computedTextWidth';
    span.style.cssText = 'visibility:hidden;position: absolute;left: -999em;top:-999em;';
    document.body.appendChild(span);
  }
  span.style.fontSize = `${fontSize}px`;
  span.innerHTML = text;
  return span.offsetWidth;
};

这个方法可以共用，我就是直接采用这个

canvas里面计算文本宽度

在canvas绘图环境中，measureText()方法可以度量字体的宽度。measureText()方法返回了一个包含width属性的TextMetrics对象，后期我们会使用这个方法实现文本编辑器。

/**
* @description 计算字符串在浏览器中显示的宽度
* @author andyzhou
* @create andyzhou
* @update 1/27/21 by andyzhou
* @param text {string|number}
* @param fontSize {number}
* @return {number}
*/
export default function computedTextWidth2(text, fontSize = 14) {
  let canvas = document.getElementById('computedTextWidth');
  if (!canvas) {
    canvas = document.createElement('canvas');
    canvas.id = 'computedTextWidth';
    canvas.style.cssText = 'visibility:hidden;position: absolute;left: -999em;top:-999em;';
    document.body.appendChild(canvas);
  }
  const context = canvas.getContext('2d');
  context.font = `${fontSize}px`;
  context.fillText(text, 0, 0);
  return context.measureText(text).width;
};

推荐采用这个函数

vue组件里面 echart坐标轴自适应文本

// 计算x周文本总宽度
const textWidth = categoryData.reduce((value, current) => value + computedTextWidth(current), 0);
// 计算组件容器宽度
const  width = this.$parent.$el.clientWidth;
const rotate = width - 50 > textWidth ? 0 : 40;
this.options.xAxis =  {
  type: 'category',
  axisLabel: {
    interval: 0,
    rotate,
  },
  axisTick: { show: false },
  data: categoryData,
};

其他调整，原理和这个差不都，就不赘述了

转载本站文章《echarts图表X轴文字过长解决解决方案：根据文字长度自动旋转》,
请注明出处：https://www.zhoulujun.cn/html/webfront/visualization/charts/8611.html通过计算X轴文章渲染的总体宽度与图表容器的宽度，然后自动去调整x轴的显示方案，是才去旋转还是换行。文字可以正常显示，不做调整。只有横排显示空间不够时，才做调整。