Echarts词云图（echarts-wordcloud）使用详解，可自定义图案

工作中看到了一个一堆五颜六色的词汇堆积在一块跟云朵似的，看着挺好看的，突发奇想就要试试这种怎么做，然后就寻到了方法。

使用echarts搭配echarts-wordcloud库实现词云图

具体使用步骤（Vue3）

1.首先安装echarts包，然后再安装echarts-wordcloud的包

npm install echarts
 
npm install echarts-wordcloud

2.在项目中引入

import * as echarts from "echarts"
 
import 'echarts-wordcloud'

3.写一个div容器

 <div id="container" class="wordcloud-wrapper"></div>

4.配置项

<script setup lang="ts">
 
import * as echarts from "echarts"
 
import 'echarts-wordcloud'
 
import { ref,onMounted} from "vue"
 
 // 词汇数据
 
  const fruits = ref([
    { name: '互联网服务', value: 1000 },
    { name: '交通运输', value: 850 },
    { name: '公司', value: 800 },
    { name: '军工', value: 600 },
    { name: '医药', value: 900 },
    { name: '商务服务', value: 600 },
    { name: '城乡规划', value: 800 },
    { name: '家政服务', value: 400 },
    { name: '安防', value: 850 },
    { name: '医疗服务', value: 200 },
    { name: '电子科技', value: 8000 },
    { name: '航空航天', value: 1500 },
    { name: '食品饮料', value: 1500 },
    { name: '能源', value: 800 },
    { name: '教育培训', value: 200 },
    { name: '金融', value: 100 },
    { name: '文化娱乐', value: 250 },
    { name: '电力', value: 1200 },
    { name: '石油化工', value: 300 },
    { name: '电子商务', value: 900 },
    { name: '建筑', value: 700 },
    { name: '旅游', value: 550 },
    { name: '环保', value: 750 },
    { name: '地产', value: 1100 },
    { name: '体育', value: 300 },
    { name: '通信', value: 950 },
    { name: '科研', value: 1200 },
    { name: '物流', value: 1300 },
    { name: '咨询', value: 600 },
    { name: '游戏', value: 850 },
    { name: '人力资源', value: 500 },
    { name: '水务', value: 300 },
    { name: '舞蹈艺术', value: 150 },
    { name: '汽车制造', value: 1100 },
    { name: '电影制作', value: 350 },
    { name: '游乐园', value: 250 },
    { name: '新能源', value: 900 },
    { name: '服装设计', value: 400 },
    { name: '采矿', value: 700 },
    { name: '信息安全', value: 800 },
    { name: '化妆品', value: 600 },
    { name: '音乐产业', value: 750 },
    { name: '物联网', value: 1200 },
    { name: '绿色建筑', value: 850 },
    { name: '社交媒体', value: 950 },
    { name: '人工智能', value: 1000 },
    { name: '水产养殖', value: 320 },
    { name: '医学研究', value: 1800 },
    { name: '动物保护', value: 130 },
    { name: '航海', value: 1000 }
    ]);
 
function initCharts(){
 
    const chart = echarts.init(document.getElementById('container') as HTMLDivElement);
 
    chart.setOption( {
 
    title: {
 
        text: '',
 
        link: 'http://www.google.com/trends/hottrends'
 
    },
 
    tooltip: {
 
        show: true
 
    },
 
       grid: {
 
            left: '5%',
 
            right: '5%',
 
            bottom: '5%',
 
            top: '5%',
 
            containLabel: true
 
        },
 
    series: [{
 
            type: 'wordCloud',
 
            gridSize: 8, // 控制词云图的网格大小，值越大词语之间的间距越大
 
            sizeRange: [10, 80], // 控制词语的大小范围
 
            rotationRange: [0, 0], // 控制词语的旋转角度范围
 
            rotationStep: 45, // 控制词语旋转的步长
 
            shape: 'circle', // 控制词云图的形状，可选值为 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
 
            drawOutOfBound: false, // 控制词云图是否允许词语超出绘制区域
 
            // 布局的时候是否有动画
 
            layoutAnimation: true,
 
            // 图的位置
 
            left: 'center',
 
            top: 'center',
 
            textStyle: {
 
                    fontFamily: 'sans-serif',
 
                    // fontWeight: 'bold',
 
                    color: function () {
 
                        return 'rgb(' + [
 
                            Math.round(Math.random() * 160),
 
                            Math.round(Math.random() * 160),
 
                            Math.round(Math.random() * 160)
 
                        ].join(',') + ')';
 
                    }
 
                },  
 
        data: fruits,
 
        emphasis: {
 
                focus: 'self',
 
                textStyle: {
 
                    fontSize: 20 // 点击的词放大
 
                }
 
            }
 
    }]
 
}),
 
    // 添加词的点击事件处理函数
 
    chart.on('click', function () {
 
    });
 
    // 监听词云图中词语的鼠标移入事件
 
    chart.on('mouseover', function () {
 
    });
 
}
 
onMounted(() => {
 
    initCharts()
 
    })
 
</script>

5.效果图展示

自定义展示形状

1.下载图片
首先需要下载一个矢量图，尽量为黑色填充；可以在阿里iconfont图标库下载；

我下载了一个五角星的png图片，如下图

2.转化图片为base64

需要把图片转成base64，可以使用Base64图片转换 免费转换

3.添加配置项

跟上述方法一样 多了一个maskImage属性

<script setup lang="ts">
 
import * as echarts from "echarts"
 
import 'echarts-wordcloud'
 
import { ref,onMounted} from "vue"
 
 // 词汇数据
 
   const fruits = ref([
    { name: '互联网服务', value: 1000 },
    { name: '交通运输', value: 850 },
    { name: '公司', value: 800 },
    { name: '军工', value: 600 },
    { name: '医药', value: 900 },
    { name: '商务服务', value: 600 },
    { name: '城乡规划', value: 800 },
    { name: '家政服务', value: 400 },
    { name: '安防', value: 850 },
    { name: '医疗服务', value: 200 },
    { name: '电子科技', value: 8000 },
    { name: '航空航天', value: 1500 },
    { name: '食品饮料', value: 1500 },
    { name: '能源', value: 800 },
    { name: '教育培训', value: 200 },
    { name: '金融', value: 100 },
    { name: '文化娱乐', value: 250 },
    { name: '电力', value: 1200 },
    { name: '石油化工', value: 300 },
    { name: '电子商务', value: 900 },
    { name: '建筑', value: 700 },
    { name: '旅游', value: 550 },
    { name: '环保', value: 750 },
    { name: '地产', value: 1100 },
    { name: '体育', value: 300 },
    { name: '通信', value: 950 },
    { name: '科研', value: 1200 },
    { name: '物流', value: 1300 },
    { name: '咨询', value: 600 },
    { name: '游戏', value: 850 },
    { name: '人力资源', value: 500 },
    { name: '水务', value: 300 },
    { name: '舞蹈艺术', value: 150 },
    { name: '汽车制造', value: 1100 },
    { name: '电影制作', value: 350 },
    { name: '游乐园', value: 250 },
    { name: '新能源', value: 900 },
    { name: '服装设计', value: 400 },
    { name: '采矿', value: 700 },
    { name: '信息安全', value: 800 },
    { name: '化妆品', value: 600 },
    { name: '音乐产业', value: 750 },
    { name: '物联网', value: 1200 },
    { name: '绿色建筑', value: 850 },
    { name: '社交媒体', value: 950 },
    { name: '人工智能', value: 1000 },
    { name: '水产养殖', value: 320 },
    { name: '医学研究', value: 1800 },
    { name: '动物保护', value: 130 },
    { name: '航海', value: 1000 }
    ]);
 
function initCharts(){
 
    const chart = echarts.init(document.getElementById('container') as HTMLDivElement);
 
    var maskImage = new Image();
 
     maskImage.src = 'data:image/png;base64,iVBORw...'
 
    chart.setOption( {
 
    title: {
 
        text: '',
 
        link: 'http://www.google.com/trends/hottrends'
 
    },
 
    tooltip: {
 
        show: true
 
    },
 
       grid: {
 
            left: '5%',
 
            right: '5%',
 
            bottom: '5%',
 
            top: '5%',
 
            containLabel: true
 
        },
 
    series: [{
 
            type: 'wordCloud',
 
           maskImage: maskImage, //自定义形状
 
            gridSize: 8, // 控制词云图的网格大小，值越大词语之间的间距越大
 
            sizeRange: [10, 80], // 控制词语的大小范围
 
            rotationRange: [0, 0], // 控制词语的旋转角度范围
 
            rotationStep: 45, // 控制词语旋转的步长
 
            shape: 'circle', // 控制词云图的形状，可选值为 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
 
            drawOutOfBound: false, // 控制词云图是否允许词语超出绘制区域
 
            // 布局的时候是否有动画
 
            layoutAnimation: true,
 
            // 图的位置
 
            left: 'center',
 
            top: 'center',
           // 词汇样式
 
            textStyle: {
 
                    fontFamily: 'sans-serif',
 
                    // fontWeight: 'bold',
 
                    color: function () {
 
                        return 'rgb(' + [
 
                            Math.round(Math.random() * 160),
 
                            Math.round(Math.random() * 160),
 
                            Math.round(Math.random() * 160)
 
                        ].join(',') + ')';
 
                    }
 
                },  
 
        data: fruits,
 
        emphasis: {
 
                focus: 'self',
 
                textStyle: {
 
                    fontSize: 20 // 点击的词放大
 
                }
 
            }
 
    }]
 
}),
 
    // 添加词的点击事件处理函数
 
    chart.on('click', function () {
 
    });
 
    // 监听词云图中词语的鼠标移入事件
 
    chart.on('mouseover', function () {
 
    });
 
}
 
onMounted(() => {
 
    initCharts()
 
    })
 
</script>

4.效果如下

至此，一个漂漂亮亮的词云图就完成啦！