css-Echarts图表tooltip / label文本过长 超出屏幕边缘或容器范围

1.tooltip 在靠近浏览器边缘时，部分内容看不见

1.1实际场景

文本过长或者Echarts刚好处于可视屏幕边缘导致超出的提示文本被截取。

1.2tooltip解决方法

设置确保tooltip不受父容器限制

appendToBody: true,

设置让 tooltip 始终限制在视口内，自动调整位置

confine: true,

完整示例

tooltip: { trigger: 'item', appendToBody: true, confine: true, // 自动防止溢出视口 formatter: (params) => { return `${params.name}<br/>${params.value}人 (${Math.round(params.percent)}%)` } }

2.label文本过长导致显示问题

2.1实际场景

文本过长被容器截取

2.2label解决方法

设置宽度，超出部分省略号显示，以及换行处理

label: { show: true, position: 'inside', // 或 'outside' overflow: 'truncate', // 超出部分用省略号 width: 80, // 限制宽度（单位 px） formatter: (params: any) => { const percent = Math.round(params.percent) return `${params.value}人\n${percent}%` }, fontSize: '1.2em', color: '#fff', lineHeight: 16, rich: richConfig }

或者读取对应的文本进行截取，超过多少字进行截取添加省略号

label: { show: true, position: 'outside', formatter: (params: any) => { const name = params.name.length > 4 ? params.name.substring(0, 4) + '.' : params.name return `{text|${name}${''}}{color_${idx}|${params.value}}` }, }