Vue3+echarts + echarts-wordcloud 实现各种形状的词云图在数据可视化场景中，词云图是一种非

在数据可视化场景中，词云图是一种非常直观且吸引人的表现形式，尤其在需要统计词语出现频率或展示关键词权重时，词云图能够以形象化的方式呈现信息。本文将详细介绍如何使用 Vue3、ECharts 以及 ECharts-WordCloud 插件开发各种类型的词云图，从基础到高级功能，让你掌握词云图的开发技巧。

开发一个基础的词云图：

步骤一：创建一个Vue3项目

首先，我们需要创建一个 Vue3 项目，推荐使用 Vite 来快速搭建项目环境。可以通过以下命令创建项目：

pnpm create vite vue-echarts --template vue

cd vue-echarts

步骤二：安装echarts 和echarts-wordcloud

在项目目录下安装 ECharts 和 ECharts-WordCloud 插件：

pnpm i echarts echarts-wordcloud

步骤三: 运行项目

运行以下命令启动开发服务器：

pnpm run dev

步骤四：编写词云图组件WordCloudMap

<template>
  <div>
    <div class="echarts-wrap" ref="echartWord"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';

const props = defineProps({
  // 词云数据
  data: {
    type: Array,
    required: true,
    // 示例：
    // [
    //   { name: 'Vue', value: 1000 },
    //   { name: 'ECharts', value: 618 },
    //   // ...
    // ]
  },
  // 词云形状，可以是 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon' 等
  shape: {
    type: String,
    default: 'circle',
  },
});

const echartWord = ref(null);
let myChart = null;

const initChart = () => {
  if (echartWord.value) {
    myChart = echarts.init(echartWord.value);
    const option = {
      series: [{
        type: 'wordCloud',
        shape: props.shape,
        // 其他形状你可以使用形状路径
        // shape: 'circle', // 示例
        // 或者自定义路径
        gridSize: 2,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        // 字体
        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'
          }
        },
        // 设置词云数据
        data: props.data
      }]
    };
    myChart.setOption(option);
    window.addEventListener('resize', myChart.resize);
  }
};

onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  if (myChart) {
    window.removeEventListener('resize', myChart.resize);
    myChart.dispose();
  }
});
</script>

<style lang="scss" scoped>
.echarts-wrap{
  width: 1000px;
  height: 1000px;
}
</style>

步骤四：使用词云图组件

在项目中引入并使用 WordCloudMap 组件，传入词云数据和图形类型。

<template>
  <div>
    <WordCloudMap :data="data" :shape="circle" />
  </div>
</template>

<script setup>
import WordCloudMap from '@/components/WordCloudMap/index.vue'

const data = [
  { name: 'Vue', value: 1000 },
  { name: 'ECharts', value: 618 },
  { name: 'JavaScript', value: 438 },
  { name: 'HTML', value: 405 },
  { name: 'CSS', value: 248 },
  { name: 'TypeScript', value: 147 },
  { name: 'Webpack', value: 102 },
  { name: 'Babel', value: 86 },
  { name: 'Node.js', value: 62 },
  { name: 'NPM', value: 38 },
  { name: 'React', value: 300 },
  { name: 'Angular', value: 250 },
  { name: 'Svelte', value: 180 },
  { name: 'Backbone', value: 120 },
  { name: 'Ember', value: 95 },
  { name: 'jQuery', value: 400 },
  { name: 'Bootstrap', value: 350 },
  { name: 'Tailwind', value: 220 },
  { name: 'LESS', value: 110 },
  { name: 'SASS', value: 130 },
  { name: 'Git', value: 500 },
  { name: 'GitHub', value: 450 },
  { name: 'GitLab', value: 200 },
  { name: 'Bitbucket', value: 150 },
  { name: 'Docker', value: 320 },
  { name: 'Kubernetes', value: 280 },
  { name: 'AWS', value: 360 },
  { name: 'Azure', value: 340 },
  { name: 'GCP', value: 290 },
  { name: 'Firebase', value: 210 },
  { name: 'GraphQL', value: 190 },
  { name: 'REST', value: 410 },
  { name: 'API', value: 430 },
  { name: 'SQL', value: 370 },
  { name: 'NoSQL', value: 230 },
  { name: 'MongoDB', value: 260 },
  { name: 'PostgreSQL', value: 240 },
  { name: 'MySQL', value: 310 },
  { name: 'SQLite', value: 170 },
  { name: 'Redis', value: 160 },
  { name: 'Memcached', value: 140 },
  { name: 'Python', value: 520 },
  { name: 'Django', value: 340 },
  { name: 'Flask', value: 280 },
  { name: 'Ruby', value: 200 },
  { name: 'Rails', value: 220 },
  { name: 'Laravel', value: 180 },
  { name: 'PHP', value: 300 },
  { name: 'C#', value: 260 },
  { name: '.NET', value: 250 },
  { name: 'Java', value: 480 },
  { name: 'Spring', value: 220 },
  { name: 'Kotlin', value: 190 },
  { name: 'Swift', value: 210 },
  { name: 'Objective-C', value: 150 },
  { name: 'Go', value: 330 },
  { name: 'Rust', value: 170 },
  { name: 'C++', value: 360 },
  { name: 'C', value: 400 },
  { name: 'Perl', value: 90 },
  { name: 'Scala', value: 130 },
  { name: 'Haskell', value: 80 },
  { name: 'Elixir', value: 70 },
  { name: 'Erlang', value: 60 },
  { name: 'Lua', value: 100 },
  { name: 'Shell', value: 140 },
  { name: 'PowerShell', value: 120 },
  { name: 'Vim', value: 200 },
  { name: 'Emacs', value: 180 },
  { name: 'IntelliJ', value: 250 },
  { name: 'VSCode', value: 500 },
  { name: 'Sublime', value: 160 },
  { name: 'Atom', value: 130 },
  { name: 'WebStorm', value: 140 },
  { name: 'PyCharm', value: 210 },
  { name: 'NetBeans', value: 90 },
  { name: 'Eclipse', value: 100 },
  { name: 'Visual Studio', value: 300 },
  { name: 'Xcode', value: 220 },
  { name: 'Android Studio', value: 180 },
  { name: 'Bootstrap', value: 350 },
  { name: 'Tailwind CSS', value: 200 },
  { name: 'Material UI', value: 190 },
  { name: 'Ant Design', value: 170 },
  { name: 'Bulma', value: 150 },
  { name: 'Foundation', value: 140 },
  { name: 'Semantic UI', value: 130 },
  { name: 'Chakra UI', value: 120 },
  { name: 'Styled Components', value: 110 },
  { name: 'Emotion', value: 100 },
  { name: 'Redux', value: 280 },
  { name: 'MobX', value: 160 },
  { name: 'Vuex', value: 180 },
  { name: 'Pinia', value: 140 },
  { name: 'Nuxt.js', value: 200 },
  { name: 'Next.js', value: 220 },
  { name: 'Gatsby', value: 190 },
  { name: 'Gridsome', value: 80 },
  { name: 'Sapper', value: 60 },
  { name: 'Quasar', value: 50 },
  { name: 'TailwindUI', value: 40 },
  { name: 'Storybook', value: 170 },
  { name: 'Jest', value: 250 },
  { name: 'Mocha', value: 200 },
  { name: 'Chai', value: 150 },
  { name: 'Jasmine', value: 120 },
  { name: 'Cypress', value: 180 },
  { name: 'Puppeteer', value: 160 },
  { name: 'Playwright', value: 140 },
];
</script>

<style scoped>
</style>

通过以上步骤，一个基础的词云图就完成了。

查看项目运行结果

可以看到一个词云图就开发完成了。有几个重要的参数配置

词云图参数解释

1. shape

配置词云图的形状，支持值包括 circle, cardioid, diamond, triangle-forward, triangle,等。以triangle 为例，看下效果：

可以看到词云图就变成了一个三角形。其他形状可以自行去尝试。

2. gridSize

控制词语在图中的紧密程度。值越大，词语之间的距离越大。比如现在我们将2改成20，查看效果

可以看到词语之间的举例变稀松了许多。

3. sizeRange

设置字体大小的范围，格式为 [最小值, 最大值]。

现在我们将sizeRange改成[0, 100]查看效果：

可以看到词语大小的差距变得更加明显了，大的更大，小的更小

4. rotationRange 控制词语的旋转角度范围，格式为 [最小角度, 最大角度]。

示例：设置为 [0, 0]，所有词语将保持水平。

可以看到词语都不旋转了。

词云图高级功能，自定义形状。

在实际使用中，我们可能需要让词云图的形状更加个性化，比如根据特定的图片轮廓生成词云图。

1. 准备图片

选择一个合适的图片作为词云图的形状模板。可以从 iconfonticonfont(www.iconfont.cn/) 或其他素材网站下载图标。

搜索想要的图形

这里我选择一个空心问号图形：

2.将图片转换为base64

将图片转换为 Base64 格式，可以使用在线工具如图片转Base64图片转Base64(tool.chinaz.com/tools/imgto…)。

上传刚才下载的图片，在右侧就能看到转换的base64 图片了

3. 修改 WordCloudMap 组件

<template>
  <div>
    <div class="echarts-wrap" ref="echartWord"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';

const maskImage = new Image()
maskImage.src = 'data:image/png;base64,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'

const props = defineProps({
  // 词云数据
  data: {
    type: Array,
    required: true,
    // 示例：
    // [
    //   { name: 'Vue', value: 1000 },
    //   { name: 'ECharts', value: 618 },
    //   // ...
    // ]
  },
  // 词云形状，可以是 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon' 等
  shape: {
    type: String,
    default: 'triangle-forward',
  },
});

const echartWord = ref(null);
let myChart = null;

const initChart = () => {
  if (echartWord.value) {
    myChart = echarts.init(echartWord.value);
    const option = {
      renderer: 'canvas', // 强制使用 Canvas 渲染器
      series: [{
        type: 'wordCloud',
        shape: props.shape,
        // 其他形状你可以使用形状路径
        // shape: 'circle', // 示例
        // 或者自定义路径
        gridSize: 2,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        maskImage: maskImage,
        // 字体
        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'
          }
        },
        // 设置词云数据
        data: props.data
      }]
    };
    maskImage.onload = function () {
      myChart.setOption(option, true);
    }
    
    window.addEventListener('resize', myChart.resize);
  }
};

onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  if (myChart) {
    window.removeEventListener('resize', myChart.resize);
    myChart.dispose();
  }
});
</script>

<style lang="scss" scoped>
.echarts-wrap{
  width: 800px;
  height: 800px;
}
</style>

主要增加了3行代码：

const maskImage = new Image()
maskImage.src = 'data:image/png;base64,iVBORw0...'

maskImage: maskImage,

查看运行效果：

这样一个空心问号词云图就被绘制出来了。

四、总结与扩展

通过本文的讲解，我们已经掌握了如何使用 Vue3、ECharts 和 ECharts-WordCloud 开发各种类型的词云图，包括基础词云图和自定义形状的高级词云图。以下是一些扩展思路：

动态数据更新

可以通过 Vue 的响应式数据机制，实现词云图的动态更新。
交互功能

利用 ECharts 提供的事件监听功能，为词云图添加点击、鼠标悬浮等交互效果。
多种样式组合

结合不同的字体、颜色和动画效果，打造更加炫酷的词云图。

通过不断探索和实践，相信你可以开发出更加丰富多彩的词云图，为数据可视化增添更多亮点！

Vue3+echarts + echarts-wordcloud 实现各种形状的词云图