vue项目 Echarts 实现词云效果

安装依赖

npm install echarts
npm install echarts-wordcloud

引用依赖

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

版本对应

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

/**
* @Author: 858834013@qq.com
* @Name: item1
* @Date: 2022-07-17
* @Desc:
*/
<template>
  <div class="duban">
    <itemTitle index="4" title="热搜关键词" e-title="Top search terms"></itemTitle>
    <div class="dubanbody">
      <div class="echarts1" ref="echarts1">

      </div>
    </div>
  </div>
</template>

<script>
import itemTitle from "@/components/itemTitle";

export default {
  name: "item1",
  components: {itemTitle},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
    }
  },
  watch: {},
  mounted() {
    this.getecharts1()
  },
  methods: {
    getecharts1() {
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      let myChart = this.$echarts.init(this.$refs.echarts1)
      var getname = ["新冠疫情", '防控新情况', '吉林新增', '表计故障', '遏制疫情', '新冠病毒', '终结新冠', '新增8人'];
      var getvalue = [10, 24, 13, 10, 15, 13, 23, 11, 19, 15];
      var data = [];
      for (var i = 0; i < getname.length; ++i) {
        data.push({
          name: getname[i],
          value: getvalue[i]
        });
      }
      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: {
              color: params => {
                var colorList = ['rgba(91, 224, 210, 1)', 'rgba(38, 218, 161, 1)', 'rgba(1, 193, 90, 1)', 'rgba(254, 209, 41, 1)', 'rgba(157, 180, 184, 1)', 'rgba(254, 209, 41, 1)', 'rgba(157, 180, 184, 1)'];
                let index = Math.floor(Math.random() * colorList.length);
                return colorList[index];
              }
            },
            data: data
          }]
      };
      myChart.clear();
      myChart.resize();
      myChart.setOption(
        option
      );
      // 热搜关键字二次渲染动画
      var active = 0
      var getname = ["新冠疫情", '防控新情况', '吉林新增', '表计故障', '遏制疫情', '新冠病毒', '终结新冠', '新增8人'];
      var getvalue = [10, 24, 13, 10, 15, 13, 23, 11, 19, 15];
      var data = [];
      var settime = window.setInterval(() => {
        if (active < getname.length - 1) {
          active = active + 1;
          data.push({
            name: getname[active],
            value: getvalue[active]
          });
          option.series[0].data = data;
          myChart.setOption(
            option
          );
        } else {
          clearInterval(settime)
        }
        console.log('测试更新')
      }, 2000)

    },
  }
}
</script>

<style lang="scss" scoped>
.duban {
  height: calc(33.33% - 20px);
  margin-bottom: 10px;
}

.dubanbody {
  position: relative;
  width: 100%;
  height: calc(100% - 43px);
  background: url("../../../assets/dubanbodybg.png") no-repeat;
  background-size: 100% 100%;
}
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 10px);
}
</style>