博客

先看效果

先装所需的依赖

npm i echarts
npm i echarts-wordcloud

这里我写成了一个组件，在项目多个地方使用

<template>
<div>
     <div
        id="main"
        style="width:300px;height:300px;"
    ></div>
</div>
   
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';
export default {
    name: 'wordCloud',
    props:{
        keywords:{
            type: [Array,String],
            default:() =>{[]}
        }
    },
    data(){
        return {
            keywordsList:[]
        }
    },
    watch:{
        keywords: {
            handler(val){
                if(!val) return
                // 这里是确保传进来的是数组 我这边有些页面没处理关键字，可能会传进来字符串，所以单独处理下
                if(!Array.isArray(val)){
                    val = val.split(',')
                }
                this.keywordsList = val.map(item => {
                    return {
                        name: item,
                        value: this.getRandomValue()
                    }
                });
                this.wordCloud();
            },
         	// 首次加载执行
            immediate: true
        }
    },

    methods: {
        jumpSearch(allsel){
        // 点击关键字的处理逻辑 我这里是跳转到对应的详情页
            var params = {
            allsel: allsel,
            isSearch: true
            };
         
          
            this.$router.push({
            name: 'resourceDownload',
            params: params
            })
        },
        // 计算随机数 随机生成每个关键字的 value 值
        getRandomValue(){
            return Number((Math.random() + 1).toFixed(1))
        },
        eConsole(param) {
            if(typeof param.seriesIndex != 'undefined') {
                this.jumpSearch(param.name)
            }
        },
        randomColor(){
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            // 拼接返回
            return `rgb(${r},${g},${b})`;
        },
        // 关键代码 生成词云图
        wordCloud() {
            let chart = echarts.init(document.getElementById('main'));
            chart.on('click', this.eConsole);
            chart.setOption({
                series: [
                    {
                        type: 'wordCloud',
                        sizeRange: [15, 50], // 关键字的字号大小范围 这里是15px 到 50px 要注意这个范围，如果你的关键字过长且字号太大，容器装不下，就不会展示了，要调整到你需要的合适大小
                        rotationRange: [-5, 10], // 关键字旋转角度
                        rotationStep: 45,
                        gridSize: 5,
                        shape: 'pentagon',
                        width: '100%',
                        height: '100%',
                        textStyle: {
                            color: function() {
                                let r = Math.floor(Math.random() * 256);
                                let g = Math.floor(Math.random() * 256);
                                let b = Math.floor(Math.random() * 256);
                                // 拼接返回
                                return `rgb(${r},${g},${b})`;
                            },
                            fontFamily: 'sans-serif',
                            fontWeight: 'normal',
                            emphasis: {
                                shadowBlur: 10,
                                shadowColor: '#333',
                            },
                        },
                        data: this.keywordsList,
                    },
                ],
            });
        },
    },
};
</script>

<style></style>

参考文章

https://www.modb.pro/db/481023

https://blog.csdn.net/Dan1374219106/article/details/115864750