鲜活数据的艺术：使用Vue和ECharts绘制交互式词云图的完整指南

前端奇遇记

已于 2023-07-28 17:36:10 修改

阅读量1.3k

点赞数 1

文章标签：前端 echarts javascript

于 2021-12-16 13:48:35 首次发布

本文链接：https://blog.csdn.net/LaityMm/article/details/121972625

版权

首先效果图

1.你需要了解echarts的简单使用方法，以及各个配置项的作用。

2.在下载echarts后还需要下载wordcloud

npm install echarts-wordcloud --save

3.引入wordcloud（我的echarts是挂载到Vue原型上的，在此不需要再引入）

import 'echarts-wordcloud';

4.主要代码（注意要给盒子容器ref=“wordCloud”属性,并给定宽高）

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