vue中词云的使用

一、echarts、wordcloud版本
安装完在package.json中查看

二、效果图

三、代码
因为ui图每个词云只给了两个随机颜色，所以先准备好随机颜色。
之前接口评审，让后端将数据处理成这种格式：
const data = [
{ name: '睡觉', value: 1228 },
{ name: '玩手机', value: 981 },
{ name: '吃东西', value: 363 },
……
]，或者自己将后台数据处理成这种格式
1、// 初始化两个词云

initWord() {
  const chartDom1 = document.getElementById('behaviorAnalysis')
  const chartDom2 = document.getElementById('moodAnalysis')
  if (chartDom1 && chartDom2) {
    const myChart1 = echarts.init(chartDom1)
    const myChart2 = echarts.init(chartDom2)
    const arr1 = ['rgb(135,206,201)', 'rgb(240,194,110)']
    const arr2 = ['rgb(187,180,255)', 'rgb(223,141,131)']
    this.actionData = this.formatteData(this.actionData, arr1)
    this.moodData = this.formatteData(this.moodData, arr2)
    myChart1.setOption({ series: this.setWordOption(this.actionData) })
    myChart2.setOption({ series: this.setWordOption(this.moodData) })
  }
},

2、//给data添加textStyle属性，并添加一个随机颜色

formatteData(data, colorArray) {
  // 给数组每一项添加textstyle
  const cloudData = data.map(val => ({
    ...val,
    //color不要用normal包裹，否则颜色不生效
    textStyle: {
      // normal: {
      color: this.randomColor(colorArray)
      // }
    }
  }))
  // console.log('cloudData', this.cloudData)
  return cloudData
},

3、随机颜色函数

randomColor(colorArray) {
  // 课堂行为分析两种颜色
  const arr = colorArray
  return arr[Math.round(Math.random() * (arr.length - 1))]// 随机取1个颜色

  // 如果颜色不固定的话可以使用下面的随机颜色
  // return 'rgb(' + [
  //   Math.round(Math.random() * 160),
  //   Math.round(Math.random() * 160),
  //   Math.round(Math.random() * 160)
  // ].join(',') + ')'

},
4、配置函数

setWordOption(words) {
  // const data = words
  const data = words
  // console.log(data, 'setWordOption data----')
  const option = [{
    type: 'wordCloud',
    shape: 'diamond',
    left: 'center',
    top: 'center',
    right: null,
    bottom: null,
    width: '100%',
    height: '90%',
    sizeRange: [18, 30],
    rotationRange: [0, 0], 
    rotationStep: 45,
    gridSize: 25,
    drawOutOfBound: false,
    textStyle: {
      // normal: {
      fontFamily: 'PingFangSC-Regular, PingFang SC',
      fontWeight: 'normal'
      // },
    },
    data //这个data就是添加完textStyle的数组
  }]
  return option
},
//配置说明：
  shape ：词云的形状，默认是 circle，可选的参数有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star。
  left top right bottom ：词云的位置，默认是 center center。
  width height ：词云的宽高，默认是 75% 80%。
  sizeRange ：词云的文字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例， value 最小的渲染为 12px ，最大的渲染为 60px ，中间的值按比例计算相应的数值。
  rotationRange rotationStep ：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep ，这个值越小，词云里出现的角度种类就越多。以上面参数为例，可能旋转的角度就是 -90 -45 0 45 90 。
  gridSize ：词云中每个词的间距。
  drawOutOfBound ：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠。
  textStyle ：词云中文字的样式， normal 是初始的样式， emphasis 是鼠标移到文字上的样式

四、阅读官方文档

在node_modules目录下阅读其官方readme配置文件：

由于之前参考的是这篇文章：https://segmentfault.com/a/11...，其textStyle下是有normal包裹的，但官方文档没有，所以导致字体颜色不生效，去除掉才生效。