echarts 字符云

import * as echarts from "echarts";
import "echarts-wordcloud";
const mask = require("@/assets/image/logo.png");

import keywords from "./keywords.js";

export default {
  name: "WordCloud",
  mounted() {
    this.initEcharts();
  },
  data() {
    return {};
  },
  methods: {
    initEcharts() {
      const chart = echarts.init(this.$refs.cloud);
      const maskImage = new Image();
      maskImage.src = mask;
      const data = this.initData();
      const options = {
        series: [
          {
            type: "wordCloud",

            // 词云形状。可以是任何极坐标方程表示的回调函数，或预定义形状关键字。
            // 可选形状有：圆形(默认)、心形曲线(最著名的极坐标方程)、
            // 菱形(正方形别名)、正三角形、五边形和星形。

            shape: "circle",

            // 保持遮罩图像宽高比或形状的1:1比例
            // 此选项从echarts-wordcloud@2.1.0开始支持
            keepAspect: true,

            // 遮罩图像，白色区域将不绘制文字。
            // shape选项仍将作为词云生长的基本形状。
            maskImage: maskImage,
            // 以下left/top/width/height/right/bottom用于定位词云
            // 默认居中显示，大小为75% x 80%

            left: "center",
            top: "center",
            width: "70%",
            height: "80%",
            right: null,
            bottom: null,

            // 文字大小范围，数据中的value值将映射到此范围
            // 默认最小12px，最大60px

            sizeRange: [12, 60],

            // 文字旋转角度范围和步长。文字将在[-90, 90]范围内按45度步长随机旋转

            rotationRange: [-90, 90],
            rotationStep: 30,

            // 网格像素大小，用于标记画布可用区域
            // 网格越大，文字间距越大

            gridSize: 2,

            // 设为true允许文字部分绘制在画布外
            // 允许绘制比画布大的文字
            // 此选项从echarts-wordcloud@2.1.0开始支持
            drawOutOfBound: false,

            // 如果文字过大无法显示，是否缩小文字
            // 设为false则不渲染，设为true则自动缩小
            // 此选项从echarts-wordcloud@2.1.0开始支持
            shrinkToFit: true,

            // 是否执行布局动画
            // 注意：禁用此选项在文字多时会导致UI阻塞
            layoutAnimation: true,

            // Global text style
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              // Color can be a callback function or a color string
              color: function () {
                // Random color
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              focus: "self",
              textStyle: {
                textShadowBlur: 10,
                textShadowColor: "#333",
              },
            },

            // Data is an array. Each array item must have name and value property.
            data: data,
          },
        ],
      };
      maskImage.onload = () => {
        chart.setOption(options);
      };
    },
    initData() {
      const data = [];
      for (const name in keywords) {
        data.push({
          name: name,
          value: Math.sqrt(keywords[name]),
        });
      }
      return data;
    },
  },
};

注意:

1. 遮罩层的使用

2. 使用遮罩层是需要在图片加载完成以后再渲染图表