echarts 词云图使用 + vue

介绍

根据自己定义Echarts词云图背景图，词云图可方便的对词组进行可视化的显示。

效果图

        

一 安装

        npm install echarts-wordcloud

        注意Echarts5.0的版本要对应echarts-wordcloud的2.0版本，注意Echarts4.0的版本要对应echarts-wordcloud的1.0版本。

二 使用

        1. 引入

                import "echarts-wordcloud/dist/echarts-wordcloud";

        2. 代码实现

                

// 初始化echarts
        initEcharts(arr) {
            let symbolUrl = 'data:image/png;base64,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';
            let myChart = this.$echarts.init(document.getElementById('cytEcharts'));
            let data = [];
            for(let i in arr) {
                let item = arr[i];
                data.push({
                    name: item.jg || item.nation,
                    value: item.perNum
                })
            }
            const colorList = [
                '#3a96f5',
                '#5faaf7',
                '#78bafe',
                '#1563f2',
                '#add2f8',
                '#e24bf4',
                '#1acaff',
                '#ffde00',
                '#89fda5'
            ];
            var maskImage = new Image();
            maskImage.src = symbolUrl;
            let option = {
                // backgroundColor: '#0A2E5D',
                tooltip: {
                    show: true
                },
                grid: {
                    left: 0,
                    bottom: 0,
                    top: 0,
                    right: 0,
                },
                xAxis: {
                    type: "category",
                    show: false
                },
                yAxis: {
                    max: 100,
                    show: false
                },
                series: [{
                        zlevel: -1,
                        type: 'pictorialBar',
                        name: 'pictorial',
                        silent: true,
                        symbol: 'image://' + symbolUrl, //按背景渲染云词
                        symbolSize: ['95.2%', '100%'],
                        symbolPosition: 'center',
                        barWidth: '100%',
                        barMaxWidth: '100%',
                        itemStyle: {
                            normal: {
                                opacity: 0 //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
                            }
                        },
                        data: [{
                            value: 100
                        }]
                    },
                    {
                        type: 'wordCloud',
                        sizeRange: [12, 42],
                        rotationRange: [0, 0],
                        maskImage: maskImage,
                        textPadding: 0,
                        gridSize: 10, //用于标记画布可用性的网格大小（以像素为单位）//字距越大，字距越大。
                        width: '95%',
                        height: '99.8%',
                        left: 'center',
                        top: 'center',
                        drawOutOfBound: false,
                        textStyle: {
                            normal: {
                                fontFamily: "sans-serif",
                                color: function() {
                                    let index = Math.floor(Math.random() * colorList.length);
                                    return colorList[index];
                                }
                            }
                        },
                        data: data
                    },
                ]
            }

            myChart.setOption(option);
            this.myChart = myChart;
            setTimeout(() => {
                window.addEventListener("resize", () => myChart.resize());
            }, 200);
        },

        

        3. 注意点

                a. 背景图必须是黑色的 这个只是限制文字的显示位置

                        

         b. 背景色可以不显示

                

itemStyle: {
      normal: {
             opacity: 0 //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
      }
},

        

        c. 加上自己的图片 设置背景就行

                

<div 
   class="fxypContent"
   v-loading="jzrsffxLoading"
   element-loading-text="拼命加载中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.8)"
>
   <div class="echartsbox">
       <div id="cytEcharts" style="width: 100%; height: 100%;"></div>
   </div>
</div>


<style scoped>
.echartsbox {
    width: 100%;
    height: 100%;
    background: url('../../../../assets/img/jzrsffx.png') no-repeat center center;
    background-size: 90% 90%;
}

</style>