Die Kunst, Daten zu leben: Eine vollständige Anleitung zum Zeichnen interaktiver Wortwolken mit Vue und ECharts

       Erste Renderings

        1. Sie müssen die einfache Verwendung von Echarts und die Rolle jedes Konfigurationselements verstehen.

        2. Nach dem Herunterladen von Echarts müssen Sie auch Wordcloud herunterladen

npm install echarts-wordcloud --save

        3. Wordcloud vorstellen (meine Echarts sind auf dem Vue-Prototyp montiert, daher ist es nicht nötig, sie hier vorzustellen)

import 'echarts-wordcloud';

        4. Hauptcode (beachten Sie, dass dem Box-Container das Attribut ref="wordCloud" sowie die Breite und Höhe gegeben werden muss)

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;//自适应
}