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}}`
          },
}