vue数据可视化大屏项目开发中，需要实现词云效果，要实现我们想要的效果，首先需要安装依赖。

安装依赖

npm install echarts
npm install echarts-wordcloud

版本对应

版本需要对应，不对应的话，可能会报错。

echarts-wordcloud@2对应的是echarts@5
echarts-wordcloud@1对应的是echarts@4

引入依赖

import * as echarts from 'echarts'
import 'echarts-wordcloud';

使用

请求接口获取数据，将数据转为echarts需要的格式数据进行渲染。准备一组颜色，使用方法随机取数组中的一个颜色来给标签设置颜色，之前写过一个方法，js 随机读取数组内的5个元素，这里我们改一下，改为随机取一个元素。

color: function () {
  return that.colorList.sort((x, y) => {
    return Math.random() > 0.5 ? -1 : 1;
  }).slice(0, 1)
}

完整实例代码

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-wordcloud';
import {other_rank_book} from "@/api/api/user.js";
import dayjs from "dayjs";

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {
      list: [],
      colorList: ['#86D4FF', '#FF8F6C', '#2CF263', '#9FA8F7', '#1274FF', '#E6613D', '#FFC629', '#FFAB2E', '#F78289', '#FF6C96', '#45BFD4', '#4E31FF', '#31FBFB', '#86D4FF', '#BF8AFD', '#FFF500', '#DE58FF', '#72ED7C', '#0BEEB8', '#931CFF', '#3D25F2', '#F995C8', '#FBE9B4', '#FF4AB6']
    }
  },
  watch: {
    xData() {
      this.drawEcharts()
    },
    yData() {
      this.drawEcharts()
    },
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  mounted() {
    this.getData()
  },
  computed: {
    xData: function () {
      var list = []
      this.list.forEach((type) => {
        list.push(type.title)
      });
      return list
    },
    yData: function () {
      var list = []
      this.list.forEach((type) => {
        var data = {
          value: type.value
        }
        list.push(data)
      });
      return list
    },
  },
  methods: {
    getData() {
      var that = this;
      other_rank_book({
        date: dayjs().format("YYYY-MM-DD"),
        "current": 1,
        "size": "20"
      }).then(res => {
        if (res.data) {
          that.list = []
          res.data.records.forEach((type) => {
            var data = {
              name: type.tsmc,
              value: Number(type.countNum)
            }
            that.list.push(data)
          });
          that.drawEcharts()
        }
      }).catch(err => {
      })
    },
    drawEcharts() {
      var that = this
      window.addEventListener('resize', this.drawEcharts)
      let myChart = echarts.init(this.$refs.echarts)
      var option = {
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            "type": "wordCloud",
            "gridSize": 20,
            "sizeRange": [12, 25],
            "rotationRange": [0, 0],
            "shape": "circle",
            "autoSize": {
              "enable": true,
              "minSize": 14,
              "maxSize": 20
            },
            textStyle: {
              normal: {
                color: function () {
                  return that.colorList.sort((x, y) => {
                    return Math.random() > 0.5 ? -1 : 1;
                  }).slice(0, 1)
                },
                fontFamily: 'sans-serif',
                fontWeight: 'normal'
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: that.list
          }]
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
}
</style>