词云图中如何自定义词语的字体大小？-灵析社区

UX_siri

解决方案 Solution 在VChart图表库中，你可以设置"wordCloudChart.fontSizeRange"来配置字体大小范围，它表示数据最小值和最大值分别对应的文字大小，在你给出的例子中，可以配置"wordCloudChart.fontSizeRange: [5, 40]"来达到预期效果。 代码示例 Code Example 代码参考 Code Example const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/data-wordcloud.json'); const dataWordCloud = await response.json(); const spec = { type: 'wordCloud', nameField: 'challenge_name', valueField: 'sum_count', seriesField: 'challenge_name', data: { name: 'baseData', values: dataWordCloud }, fontSizeRange: [5, 40], }; 结果展示 Results 在线效果参考："https://codesandbox.io/s/wordcloud-chart-fontsizerange-znkv37" (https://link.segmentfault.com/?enc=N9RnsE59GFkK8DRwOO21Rw%3D%3D.jeJQIJlojzsHPJxaDV%2BlA0ftqJc4sOaQB3BkirLdw76yEoKchYOfOk5OkGfkAk4c30CVS3fXdq6S1int0KqZPw%3D%3D) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250106/a7a637ed975dafcc911d4e84f1189a26.png) 相关文档 Related Documentation 词云demo："https://www.visactor.io/vchart/demo/word-cloud-chart/word-clo..." (https://link.segmentfault.com/?enc=J9M9QcoK8K6xZkf4mnUNZg%3D%3D.mpbAMSnwQZskpf6bBtUtyF%2FBVNd5kvxYUqd9n7JkIbpgicNybSlZaQwxQa5FwYgsEQyiFvALhak%2BMu%2FLpeRnT%2FN0qqijYnAIoCpImiAV0lQ%3D) 词云教程："https://www.visactor.io/vchart/guide/chart/word-cloud" (https://link.segmentfault.com/?enc=Zqpqnrd76On2QX0GjwspKQ%3D%3D.p8EV6dTFHX94kAb5aVigRdPGK34KS%2Fqsn8w4GSYU47s5ILaDnh2GAwCK1%2FKN22fSZXJyOCg0VpbOwSFmLga1uQ%3D%3D) 相关api："https://www.visactor.io/vchart/option/wordCloudChart#fontSize..." (https://link.segmentfault.com/?enc=JVF2XbJih7%2FRyW1XQvqW0A%3D%3D.PrLAQ63tSRE6IY9gJ8UeHyI8CxyEAbiXAf2wZLsWWzJf7qGthjNfRCeRnPan5gcBnoJuwQC41PfOBZKUrSehgnQFoL%2F%2FAL7ShdNvEYRdtP4%3D) github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=137DVQS1ZejTgbzDaCz8EA%3D%3D.lIGhPSdpnp1stoESKur6hwNqJzIQLxccMJiKpcXMr%2BoK0pePmVpZgPXotmCoH5tF)