echarts圖表X軸文字過長解決解決方案：根據文字長度自動旋轉

zhoulujun發表於2021-01-28
Echarts

Echarts 標籤中文字內容太長的時候怎麼辦 ?

關於這個問題搜尋一下，有很多解決方案。無非就是 省略（間隔顯示）、旋轉文字方向、豎排展示

前面兩種解決方案，就是echarts暴露的：

{
  axisLabel: {
    interval: 0,//如果設定為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推。
    rotate: '45',// 刻度標籤旋轉的角度,在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。
  },
};

用法看官方文件：

網上有關的設定也看了下，幾乎大同小異，比如：

如何更加標籤文字的總長度自動採取調整策略

對於固定模式的圖示，我們直接設定 豎排展示或者旋轉就可了。但是對於圖表類平臺，如何控制 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軸的顯示方案，是才去旋轉還是 換行。文字可以正常顯示，不做調整。只有橫排顯示空間不夠時，才做調整。

相關文章