echarts圖表X軸文字過長解決解決方案：根據文字長度自動旋轉
Echarts 標籤中文本內容太長的時候怎麼辦 ?
關於這個問題搜索一下，有很多解決方案。無非就是 省略（間隔顯示）、旋轉文字方向、豎排展示
前面兩種解決方案，就是echarts暴露的：
{
axisLabel: {
interval: 0,//如果設置為 1，表示『隔一個標籤顯示一個標籤』，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推。
rotate: '45',// 刻度標籤旋轉的角度,在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。
},
};
用法看官方文檔：
-
interval: //echarts.apache.org/zh/option.html#xAxis.axisLabel.interval
-
rotate: //echarts.apache.org/zh/option.html#xAxis.axisLabel.rotate
網上有關的設置也看了下，幾乎大同小異，比如：
-
Echarts x軸文本內容太長的幾種解決方案 //www.jianshu.com/p/b452cbe9be0e
-
Echarts-axislabel文字過長導致顯示不全或重疊 //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軸文字過長解決解決方案：根據文字長度自動旋轉》,
請註明出處：//www.zhoulujun.cn/html/webfront/visualization/charts/8611.html通過計算X軸文章渲染的總體寬度與圖表容器的寬度，然後自動去調整x軸的顯示方案，是才去旋轉還是 換行。文字可以正常顯示，不做調整。只有橫排顯示空間不夠時，才做調整。
