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

最新推荐文章于 2024-07-03 23:02:36 发布

热爱跑步的小前端

最新推荐文章于 2024-07-03 23:02:36 发布

阅读量4.8k

点赞数 13

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/ThreeKims/article/details/136344874

版权

前言

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

使用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.效果如下