使用echarts生成各种形状的词云图

使用echarts生成各种形状的词云图

目前我是使用vue.js组件进行开发的，最近在做项目的时候，遇到了一个瓶颈。需要做一个词云图，并且词云只能是在一个人物里展现的。百度了很多画这种东西的方式，最终发现还是使用echarts的echarts-wordcloud插件进行绘制是最简洁方便的了，对于前端来说。

例如做这个词云图~

使用如下~~~~

一、引入词云插件

因为词云插件是基于echarts的，所以需要先引入echarts再引入词云插件。
1、使用npm命令引入

npm install echarts
npm install echarts-wordcloud

2、在页面中进行引入

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

二、前提准备

1. 让词云按一定形状展示，这里实际上就是使用的一张背景图，使得它会按照图片除白色地方进行展示。一般就是使用黑白图片，黑色是展示词云的地方，其它地方白色即可。
   例如这种图片
   
2. 有时候会出现词云展示很少的情况，则需要词云上再放一层图，防止数据只展示太少的一部分。只要把轮廓内弄成透明，加一条轮廓边即可。
   例如下面图片
   

三、使用示例

<template>
    <div id="wordColund" style="height:280px;width:280px" v-if="keywordsList.length>0" ></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud';
import cy from "@/assets/cy.png"
import wordColundBG from "@/assets/wordColundBG.png"
const maskImage = new Image();
const keywordsList = [];
const option = {
    backgroundColor: '#fff',
        // xAxis、yAxis这个配置主要是针对  pictorialBar 这个类型使用的
        xAxis: {
            axisLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
        },
        yAxis: {
            data: [0 , 900],
            show: false
        },
        grid: { //调整位置结合透明图
            top: '-50',
            left:'-70',
            height: 780
        },
        series: [
            {
                name: '',
                type: 'wordCloud',
                sizeRange: [8, 60],//字体尺寸范围
                rotationRange: [-30,30], //旋转角度 0, 0
                // shape: 'circle',
                maskImage: maskImage, //是否使用背景图进行勾勒
                textPadding: 0,
                gridSize: 0, //词间距 7
                width: '100%' , 
                height: 280 , 
                left: 'center',
                top: 'center',
                drawOutOfBound: false,//溢出是否显示
                // 布局的时候是否有动画
                layoutAnimation: true,
                autoSize: {
                    enable: true,
                    minSize: 4
                },
                textStyle: {
                        fontFamily: 'Arial',
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        },
                },          
                data: keywordsList
            },
            // 词云上再放一层透明层，防止数据只展示太少的一部分。
            {
                name: '',
                type: 'pictorialBar',//象形图，可用背景图代替
                // symbol: 'image://' + wordColundBG,
                symbolSize: ['80%', 280],  // 图片的宽、高
                symbolRepeat: false, // 复制
                data:  [{value: 1 , symbolOffset: ['32%' , '-140%'] }],//调整位置
                animation:false,
            },
        ]
}
export default {
    name: 'EchartsWordCloud',
    data() {
      return {
        cy,
        wordColundBG,
        option:option,
        maskImage,
        keywordsList,
      };
    },
     mounted(){
      this.init();
    //   this.init2();
    },
    methods: {
    async init () { 
       // let {data} = await myPortait();   
        this.keywordsList = [
            {
                name:"输出",
                value:34156
            },
            {
                name:"测评",
                value:22199
            },
            {
                name:"微控制器",
                value:10288
            },
            {
                name:"线网络",
                value:1206
            },
            {
                name:"机台",
                value:274470
            },
            {
                name:"无线",
                value:12311
            },
            {
                name:"输",
                value:2062
            },
            {
                name:"开端",
                value:4885
            },
            {
                name:"端",
                value:32294
            },
            {
                name:"换机器",
                value:18574
            },
            {
                name:"测评1",
                value:38929
            },
            {
                name:"模块",
                value:969
            },
            {
                name:"机",
                value:37517
            },
            {
                name:"接",
                value:12053
            },
            {
                name:"机器",
                value:57299
            },
            {
                name:"牛逼",
                value:15418
            },
            {
                name:"你好",
                value:22905
            },
            {
                name:"世界",
                value:5146
            },
            {
                name:"我",
                value:49487
            },
            {
                name:"是",
                value:33837
            },
            {
                name:"小世界",
                value:4500
            },
            {
                name:"大世界",
                value:5744
            },
            {
                name:"前端",
                value:4840
            },
            {
                name:"后端",
                value:2322
            },
        ];
        this.option.series[0].data = this.keywordsList;
        this.maskImage.src = this.cy;//第一张图片
        this.option.series[0].maskImage = this.maskImage;     
        this.option.series[1].symbol = 'image://' + this.wordColundBG;//第二张图片
        
        this.$nextTick(() => {        
        setTimeout(()=>{
            const myChart = echarts.init(document.getElementById('wordColund'));
            myChart.setOption(this.option);
            this.maskImage.onload = ()=> {
                myChart.setOption(this.option);
            };  
            window.onresize = function() {
                myChart.resize();
            };
        })
        })
    },
}
}
</script>

展示结果：