echarts之词云图

最新推荐文章于 2025-03-10 15:32:00 发布

starlsy

最新推荐文章于 2025-03-10 15:32:00 发布

阅读量3.5k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/lisongyue123/article/details/104914331

版权

该博客介绍了如何在Vue项目中利用Echarts从后端获取数据并绘制词云图，包括数据获取、词云图绘制及展示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取后端数据

getChartCloud() {
      this.$http({
        method: "post",
        url: "/api/getCloud"
      })
        .then(response => {
          this.arrCloud = response.data;
          this.drawMyCloud();
        })
        .catch(function(error) {
          console.log(error);
        });
    },

画词云图

drawMyCloud() {
      let option = {
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            type: "wordCloud",
            //调整词之间的距离
            gridSize: 20,
            //用来调整字的大小范围
            sizeRange: [12, 50],
            //用来调整词的旋转方向，，[0,0]代表着没有角度，也就是词为水平方向需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [ 0,90],
            rotationRange: [-60, 60],
            shape: "pentagon",
            //词云图中的数据
            data: this.arrCloud,
            //随机生成字体颜色
            textStyle: {
              normal: {
                color: function() {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160)
                    ].join(",") +
                    ")"
                  );
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#333"
              }
            }
          }
        ]
      };
      this.cloud.setOption(option);
    },

效果图

在这里插入图片描述