真实场景 - 产品销量排行综合示例

/** * 计算字符串的视觉宽度（中文×2，英文×1） */ function getVisualWidth(str) { let width = 0; for (let i = 0; i < str.length; i++) { const charCode = str.charCodeAt(i); if (charCode >= 0x4E00 && charCode <= 0x9FFF || charCode >= 0x3000 && charCode <= 0x303F || charCode >= 0xFF00 && charCode <= 0xFFEF) { width += 2; // 中文、全角字符 } else { width += 1; // 英文、数字 } } return width; } /** * SmartXAxis - 智能X轴配置生成器 */ const SmartXAxis = { getConfig(data, xField, options = {}) { const { maxTruncate = 8, // 45°截断长度 minTruncate = 6, // 90°截断长度 } = options; const maxWidth = Math.max(...data.map(d => getVisualWidth(String(d[xField] || '')) )); const count = data.length; let rotate, truncateAt; if (maxWidth <= 4 && count <= 8) { rotate = 0; // 水平 truncateAt = null; } else if (maxWidth <= 8 && count <= 12) { rotate = -Math.PI / 4; // 45°不截断 truncateAt = null; } else if (maxWidth >= 50) { rotate = -Math.PI / 2; // 仅超长文字用 90° truncateAt = minTruncate; } else { rotate = -Math.PI / 4; // 多数据项统一 45°+截断 truncateAt = count >= 15 ? minTruncate : maxTruncate; } return { label: { autoRotate: false, rotate, formatter: (text) => { const str = String(text || ''); if (truncateAt && str.length > truncateAt) { return str.substring(0, truncateAt) + '...'; } return str; }, style: { fontSize: 11, fill: '#1D1D1F', textAlign: rotate === 0 ? 'center' : 'end', }, }, }; }, };