VChart中如何配置Tooltip (文字提示) 自动换行？-灵析社区

不同图表库的解决方案不一样，根据你给的demo，在VChart中只需要配置最大宽度和多行支持即可。  ## 代码示例 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)  ## 相关文档 * 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)