词云图

安装

• pnpm install echarts-wordcloud
• 注意wordcloud版本2 对应 echart版本5，wordcloud版本1 对应 echart4

自定义形状 maskImage

• 主要是改变maskImage，自定义配置，图片必须是base64格式,并且以Image的方法返回
• 图片必须是闭合的，填充区域必须为黑色，图片可以通过阿里巴巴矢量图标库
  下载图片

字体范围 sizeRange

• 如果sizeRange设置的范围差距过大，数据渲染时，数据量不会全部展示
• 因为图形的大小限制和drawOutOfBound: false不允许超过边界

字体颜色

• 可以全局配置也可给单个字体配置
  • 全局：直接在全局的textStyle的color中设置随机颜色，当然也可以固定一种颜色
  • 单个：给数据的每个对象单独配置颜色，如：{ name: “深圳”, value: 164910, textStyle: { color: ‘red’ } }
• 参考其他使用的应用，会发现存在使用基本是是统一色系颜色的随机颜色，这个如何实现？
  • 创建对应的配色主题，每个主题有若干颜色
  • 配置option的主题颜色

排列方式

• 主要使用 rotationRange 和 rotationStep
• 横向：rotationRange: [0, 0], rotationStep: 0
• 对角线：rotationRange: [-90, 90], rotationStep: 7
• 横竖混排：rotationRange: [0, 90], rotationStep: 90
• 横切混排：rotationRange: [0, 90], rotationStep: 45

配置项

type: 'wordCloud', // 类型

shape: 'circle', // 词云形状，内置形状有circle，cardioid(心形),diamond(棱形),triangle-forward, triangle,triangle-upright, pentagon, and star

keepAspect: false, // v2.1.0时可以保持maskImage纵横比或1：1
maskImage: maskImage, // 背景图，白底不画，最好黑底，maskImage优先级比shape高

left: 'center', // 调整词云位置
top: 'center',
width: '70%',
height: '80%',
right: null,
bottom: null,

sizeRange: [12, 60], // 字体范围,默认最小12px，最大60px大小

rotationRange: [-90, 90], // 词云中文字的角度
rotationStep: 45, // 渲染梯度，越小角度种类越多

gridSize: 8, // 网格大小，越大，词之间间隙越大

drawOutOfBound: false, // v2.1.0时可以设置是否允许词云在边界外渲染，默认false，否则容易造成词重叠

shrinkToFit: false, // v2.1.0时可以允许当字体过大是否缩小字体，false不渲染，true缩小

layoutAnimation: true, // 是否开启动画

textStyle: {// 全局文本样式
  fontFamily: 'sans-serif',
  fontWeight: 'bold',
  color: function () {
    return 'rgb(' + [
      Math.round(Math.random() * 160),
      Math.round(Math.random() * 160),
      Math.round(Math.random() * 160)
    ].join(',') + ')';
  }
},
emphasis: {// 鼠标移到文字上的样式
  focus: 'self',
  textStyle: {
      textShadowBlur: 10,
      textShadowColor: '#333'
  }
},

// 数据格式
data: [{
    name: 'Farrah Abraham', // 词云文本
    value: 366, // 词云大小通过value判断
    textStyle: {} // 可单独设置文本样式
}]