The Art of Living Data: A Complete Guide to Drawing Interactive Word Clouds with Vue and ECharts

       First renderings

        1. You need to understand the simple use of echarts and the role of each configuration item.

        2. After downloading echarts, you also need to download wordcloud

npm install echarts-wordcloud --save

        3. Introduce wordcloud (my echarts is mounted on the Vue prototype, so there is no need to introduce it here)

import 'echarts-wordcloud';

        4. Main code (note that the box container must be given the ref="wordCloud" attribute and the width and height must be given)

getChart() {
      this.worldCloudChart = this.$echarts.init(this.$refs.wordCloud);
      this.option = {
        tooltip: {
          show: true,
          position: "top",
          formatter: (params) => {
            return `${params.marker}${params.name} : 热度${params.value}`;
          },
          textStyle: {
            fontSize: 14,
          },
        },
        series: [
          {
            type: "wordCloud",
            // 网格大小，各项之间间距
            gridSize: 15,
            // 形状 circle 圆，cardioid  心， diamond 菱形，triangle-forward 、triangle 三角，star五角星
            shape: "circle",
            // 字体大小范围
            sizeRange: [16, 40],
            // 文字旋转角度范围
            rotationRange: [0, 50],
            // 旋转步值
            rotationStep: 40,
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            // 画布的宽
            // width: "90%",
            // 画布的高
            // height: "90%",
            // 是否渲染超出画布的文字
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 255),
                      Math.round(Math.random() * 255),
                      Math.round(Math.random() * 255),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#2ac",
              },
            },
            geo: {
              zoom: 1,
              scaleLimit: {
                min: 0.5,
                max: 2,
              },
            },
            data: [
              {
                name: "Hidden Cobra(Trend Micro)",
                value: 100,
              },
              { ...//数据自己加，value值越大，字体显示越大
               }
            ],
          },
        ],
      };
      this.wordCloudChart.setOption(this.option);
      window.onresize = this.wordCloudChart.resize;//自适应
}