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

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

/**
 * @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;
};

/**
 * @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;
};

// 计算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,
};