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

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)

阅读量:1

点赞量:0

问AI