echarts词云图

echarts-wordcloud的git仓库地址
https://github.com/ecomfe/echarts-wordcloud

echarts官方文档
https://echarts.apache.org/zh/index.html

依赖版本号
“echarts”: “^5.0.1”,
“echarts-wordcloud”: “^2.0.0”,
版本号可以根据echarts-wordcloud依赖里面的版本号找到对应echarts的版本，否则很容易出现问题，echarts-wordcloud2.0 中使用textStyle 不可以加nomal 可以在上面的仓库里面看官方示例。
————————————————
版权声明：本文为CSDN博主「勿扰丶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46063007/article/details/120655150

// 封装成组件
<template>
  <div>
    <div id="chart" style="width: 500px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud";
// import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
  data() {
    return {
      wordList: [
        {
          name: "珍珠奶茶",
          value: 15000,
        },
        {
          name: "冰激凌红茶",
          value: 10081,
        },
        {
          name: "椰果奶茶",
          value: 9386,
        },
        {
          name: "波霸奶茶",
          value: 7500,
        },
        {
          name: "金桔柠檬",
          value: 7500,
        },
        {
          name: "乌龙奶茶",
          value: 6500,
        },
        {
          name: "芒果欧蕾",
          value: 6500,
        },
        {
          name: "仙草奶茶",
          value: 6000,
        },
        {
          name: "翡翠柠檬",
          value: 4500,
        },
        {
          name: "芒果养乐多",
          value: 3800,
        },
        {
          name: "柠檬养乐多",
          value: 3000,
        },
        {
          name: "波霸奶绿",
          value: 2500,
        },
        {
          name: "四季春茶",
          value: 2300,
        },
        {
          name: "茉莉绿茶",
          value: 2000,
        },
        {
          name: "阿萨姆红茶",
          value: 1900,
        },
        {
          name: "奶冻摇摇乐",
          value: 1800,
        },
        {
          name: "冻顶乌龙茶",
          value: 1700,
        },
        {
          name: "咖啡",
          value: 1600,
        },
        {
          name: "焦糖玛奇朵",
          value: 1500,
        },
        {
          name: "金桔柠檬",
          value: 1200,
        },
      ],
    };
  },
  mounted() {
    this.initchart();
  },
  methods: {
    initchart() {
      let myChart = echarts.init(document.querySelector("#chart"));
      myChart.setOption({
        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            //用来调整字的大小范围
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [14, 60],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [ 0,90],
            rotationRange: [0, 0],
            //随机生成字体颜色
            // maskImage: maskImage,
            textStyle: {
              color: function () {
                return (
                  "rgb(" +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ")"
                );
              },
            },
            //位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "200%",
            height: "200%",
            //数据
            data: this.wordList,
          },
        ],
      });
    },
  },
};
</script>


//页面中使用,引入组件并使用,宽高可以以当做参数做动态来写
    <wordcloud />