实现Echarts词云和随机颜色(vue2)

1.首先需要安装echarts和echarts-wordcloud插件；

2.echarts的版本和echarts-wordcloud版本有对应要求才能实现，否则会报错：经过查询如果是用的是echarts4那么需要对应着echarts-wordcloud1.x版本，echarts5对应着echarts-wordcloud2.x版本；

3.经实验后我是用的是下面的版本，可以保证我的页面正常使用其他各种样式的图表和词云：

 "echarts": "4.5.0",
 "echarts-wordcloud": "1.1.3",

以下是词云组件的实现代码：

<template>
  <div class="content-box">
    <div ref="keyWords" style="height: 300px"></div>
  </div>
</template>
<script>
import 'echarts-wordcloud'
export default {
  data() {
    return {
      words: [
        {
          name: 'web',
          value: 84
        },
        {
          name: 'GIT',
          value: 5
        },
        {
          name: 'CSS',
          value: 22
        },
        {
          name: 'CSS',
          value: 11
        },
        {
          name: '前端',
          value: 101
        },
        {
          name: 'CSS',
          value: 33
        },
        {
          name: 'Vue',
          value: 77
        },
        {
          name: 'js',
          value: 98
        },

        {
          name: '互联网',
          value: 66
        },
        {
          name: '插件',
          value: 55
        },
        {
          name: 'UI',
          value: 44
        },
        {
          name: 'GIT',
          value: 5
        },
        {
          name: 'CSS',
          value: 22
        },
        {
          name: 'CSS',
          value: 11
        },
        {
          name: 'CSS',
          value: 33
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchart()
    })
  },
  methods: {
    initEchart() {
      //获取DOM节点并初始化
      const el = this.$refs.keyWords
      const echarts = require('echarts')
      const myChart = echarts.init(el)
      //按照colorList指定颜色的数据进行随机
      const colorList = ['#f89b6299', '#afcf7cde', '#fece5b']
      const option = {
        tooltip: {
          show: true
        },
        series: [
          {
            //用来调整词之间的距离
            gridSize: 20,
            //用来调整字的大小范围
            sizeRange: [18, 40],
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向
            rotationRange: [0, 0],
            type: 'wordCloud',
            size: ['95%', '95%'],
            textRotation: [0, 90],
            textPadding: 0,
            autoSize: {
              enable: true,
              minSize: 14
            },
            textStyle: {
              normal: {
                color: function() {
                  let index = Math.floor(Math.random() * colorList.length)
                  return colorList[index]
                }
              }
            },
            data: this.words
          }
        ]
      }
      //设置图表的参数
      myChart.setOption(option)
    }
  }
}
</script>

实现的效果如下图：

以上例子设置的是按照指定颜色进行随机。如果没有指定，颜色完全随机展示可以使用以下代码：

 normal: {
  color: function() {
    return `rgb(${[
      Math.round(Math.random() * 200 + 55),
      Math.round(Math.random() * 200 + 55),
      Math.round(Math.random() * 200 + 55)
    ].join(',')})`
  }
}

实现效果如图：

有时需要将词云的颜色按照数据的大小显示深浅程度，实现思路是需要将数据先按照数据进行由大到小的排序，并渲染排序后的数据：

const data = this.words.sort(function(a, b) {
        return b.value - a.value
      })

然后我们将设置颜色函数内的回调参数输出一下看看：

normal: {
  color: (v) => {
     console.log(v)
   }
 }

能看到有个dataIndex属性：

利用这个属性，我们可以设置指定排序区间段的颜色，代码如下：

normal: {
  color: (v) => {
    switch (true) {
      case v.dataIndex <= 5:
        return '#da6b0b'
      case 5 < v.dataIndex && v.dataIndex <= 10:
        return '#ec9043b8'
      default:
        return '#f7af736e'
    }
  }
}

最终展示效果：