VChart中如何配置Tooltip (文字提示) 自动换行？-灵析社区
WhatUpDanger 图表里的tooltip默认效果在文字很长的时候不会换行，如何配置自动换行呢？
全能人才不同图表库的解决方案不一样，根据你给的demo，在VChart中只需要配置最大宽度和多行支持即可。
"图片" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/681ea52a8a7c2199a658c82bcad94a1f.png)
代码示例
const spec = {
type: 'line',
data: {
values: [
{ type: 'Nail polish', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 4229 },
{ type: 'Nail polish', country: 'EU', value: 4376 },
{ type: 'Nail polish', country: 'China', value: 3054 },
{ type: 'Nail polish', country: 'USA', value: 12814 },
{ type: 'Eyebrow pencil', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 3932 },
{ type: 'Eyebrow pencil', country: 'EU', value: 3987 },
{ type: 'Eyebrow pencil', country: 'China', value: 5067 },
{ type: 'Eyebrow pencil', country: 'USA', value: 13012 },
{ type: 'Rouge', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 5221 },
{ type: 'Rouge', country: 'EU', value: 3574 },
{ type: 'Rouge', country: 'China', value: 7004 },
{ type: 'Rouge', country: 'USA', value: 11624 },
{ type: 'Lipstick', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 9256 },
{ type: 'Lipstick', country: 'EU', value: 4376 },
{ type: 'Lipstick', country: 'China', value: 9054 },
{ type: 'Lipstick', country: 'USA', value: 8814 },
{ type: 'Eyeshadows', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 3308 },
{ type: 'Eyeshadows', country: 'EU', value: 4572 },
{ type: 'Eyeshadows', country: 'China', value: 12043 },
{ type: 'Eyeshadows', country: 'USA', value: 12998 },
{ type: 'Eyeliner', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 5432 },
{ type: 'Eyeliner', country: 'EU', value: 3417 },
{ type: 'Eyeliner', country: 'China', value: 15067 },
{ type: 'Eyeliner', country: 'USA', value: 12321 },
{ type: 'Foundation', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 13701 },
{ type: 'Foundation', country: 'EU', value: 5231 },
{ type: 'Foundation', country: 'China', value: 10119 },
{ type: 'Foundation', country: 'USA', value: 10342 },
{ type: 'Lip gloss', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 4008 },
{ type: 'Lip gloss', country: 'EU', value: 4572 },
{ type: 'Lip gloss', country: 'China', value: 12043 },
{ type: 'Lip gloss', country: 'USA', value: 22998 },
{ type: 'Mascara', country: '这是一段很长的标题这是一段很长的标题这是一段很长的标题', value: 18712 },
{ type: 'Mascara', country: 'EU', value: 6134 },
{ type: 'Mascara', country: 'China', value: 10419 },
{ type: 'Mascara', country: 'USA', value: 11261 }
]
},
title: {
visible: true,
text: '100% stacked line chart of cosmetic products sales'
},
percent: true,
xField: 'type',
yField: 'value',
seriesField: 'country',
legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
axes: [
{
orient: 'left',
label: {
formatMethod(val) {
return `${(val * 100).toFixed(2)}%`;
}
}
}
],
tooltip: {
style: {
keyLabel: {
maxWidth: 100,
multiLine: true
},
titleLabel: {
maxWidth: 20
}
}
}
};
结果展示
* 在线效果参考："https://codesandbox.io/s/tooltip-multiline-j9ngvp" (https://link.segmentfault.com/?enc=FjeVLqshehMu8uiqSOsMEA%3D%3D.4jgwXNdAGmB86Jr5TZiNsWbaZf7zx3d9QRsIWJYW4FBqe6Dpo68MUOIVwmLMilSVYVt7P1J%2B20VFukbR7fP%2BBQ%3D%3D)
"图片" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/1f487826ca1cad7180b25cb0cf0f623f.png)
相关文档
* Tooltip教程："https://visactor.bytedance.net/vchart/guide/tutorial_docs/Cha..." (https://link.segmentfault.com/?enc=iF0ASANsrD6sRVoGaVnsdw%3D%3D.2iJXowoJeIL4EWj28Fc1dQdcXc2fAVftggKWr5upOADi2f%2BCStKhd2px0HgX0PJulmEOrVAf09808HPs3%2FDYrtGgp4IKE5OCsTQweZt5W%2FI%3D)
* Tooltip相关api："https://visactor.bytedance.net/vchart/option/barChart#tooltip..." (https://link.segmentfault.com/?enc=I7gE0oXi97djxwvxUMUbPw%3D%3D.6WLvLUjJryUZLTupbWOn5cAV7LhrNnzNn3RGb0%2FhlIbyRG47Igd5Z1uka46y%2F%2F7GywfEoNCMWV8ZROdcvrP9%2BF7Il1s1NRXHBdej%2FuG99bE%3D)
* github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=59JAfzuL7W5kj0FYw%2BNisg%3D%3D.HC0RDXHNAOeynmFLyW9O5hMOX91vVFGBXT7AbVKEjqajq%2BFs3u%2FeR7n2qYx6s2Yf)