如何自定义词云图中文字的字体大小？

Question

如何自定义词云中的文字大小，我希望权重较大的文字显示得更大。例如，在下面的示例中，我希望最大文本大小为 40px。我怎么做？

我想将字体大小调整为我期望的

Answer 1

解决方案

您可以设置

wordCloudChart.fontSizeRange

来配置字体大小范围，分别表示数据的最小值和最大值对应的文本大小，在您给出的示例中，您可以配置

wordCloudChart.fontSizeRange: [5, 40]

来达到所需的效果。

代码示例

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],
};

结果

在线演示：https://codesandbox.io/s/wordcloud-chart-fontsizerange-znkv37

相关文档

WordCloud 图表演示：https://www.visactor.io/vchart/demo/bar-chart/stack-column

WordCloud图表教程：https://www.visactor.io/vchart/guide/chart/word-cloud

相关api：https://www.visactor.io/vchart/option/wordCloudChart#fontSizeRange

github：https://github.com/VisActor/VChart