vue字符云

Chris__Wang
已于 2023-04-07 15:02:06 修改
阅读量1.4w
点赞数 2
分类专栏：个人总结文章标签： vue字符云 vue中自定义字符云自定义字符云形状
于 2019-01-02 18:41:47 首次发布
本文链接：https://blog.csdn.net/Chris__wang/article/details/85630628
版权
个人总结专栏收录该内容
78 篇文章 1 订阅
订阅专栏
老规矩，先上图
下面说一下如何自定义不同形状的字符云
比如这种
首先当然要先在项目中添加字符云，详见 vue 中添加字符云_前端字符云组件_Chris__Wang的博客-CSDN博客
首先要找图片，建议去IconFont里面去下载，地址：iconfont-阿里巴巴矢量图标库
登录后选择一个图标进行下载
然后就是要把下载的图片转成base64位编码了，网上有好多在线转编码的地址，我用的是 http://imgbase64.duoshitong.com/
复制转义后的编码，放到下面代码里面即可，我这里提供了几个
<template>
    <div id="wordCloud" :style="{width: '100%', height: '100%'}"></div>
</template>
<script>
export default {
    data(){
        return{
            
        }
    },
    mounted(){
        this.drawCloud()
    },
    methods:{
        drawCloud(){
            let wordCloud = this.$echarts.init(document.getElementById('wordCloud'));
            //图片base64编码
            let image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAPzklEQVR4Xu2dCdB/YxXHP4pJJDvZQtmyREJEiyWZaeyVLUtaLQ2RrVFaBkWShDZLKFL2pjKJEsq+ExXZyp5lZEk0X+47/b3+7/vee3/33uc85zln5h2G+zznnO95vr97n+2cGQgJBAKBCRGYIbAJBAKBiREIgsToCAQmQSAIEsMjEAiCxBgIBNohEG+QdrhFq0IQCIIUEuhwsx0CQZB2uEWrQhAIghQS6HCzHQJBkHa4RatCEAiCFBLocLMdAkGQdrhFq0IQCIIUEuhwsx0CQZB2uEWrQhAIghQS6HCzHQJBkHa4RatCEAiCFBLocLMdAkGQdrhFq0IQCIIUEuhwsx0CQZB2uEWrQhAIghQS6HCzHQJBkHa4RatCEAiCDBPo2YEVgOWBZYDlAP23Wcb9zVaZ8xjw72n+ngQeAq4HbgJurP59GOsL1hIE6Sf4cwKbVn8rAwv2o4YbgIuAM4Hf9qSj6G6DIN2Ffz5gc2Az4L3AjN11XasnvWHOAk4Hzgeeq9UqHpoUgSDI6ANkFWCf6m3x6tG766SH+4Ejge8A+lwLaYlAEKQdcMJtY2BPYK12XQzSSnOXY4FDgXsG0ehMSRCkeUA3AI4AlmreNGmL44C9gYeTWpGZ8iBI/YBpoq1PFk2+c5VHqs9BvVVeyNWJIe0OgkyNtibbewBfBGad+vEsnrgc+ChwcxbWJjQyCDI5+AsA5wJvTxijvlT/B9gdOLovBR76DYJMHMXVgXOAeT0EehIfTgI+Djzr3M9W7gVBpg/bLsDhwEytUM2v0VXAhsA/8zO9X4uDIK/E97BqztEv8vZ6v6/a4LzVnmnpLAqCvBz7fYGD04UjuWa9QdYE7khuiREDgiD/D8RWwE+MxCWlGXdXJNE/i5cgyEtDYH3gl4CVoyKpB6beIHqTFD8nCYLASsClwGtTj0pj+jVx1zmzoqV0gryuuluxaNGjYGLnjwJ2LRmb0gmifQ4tb4ZMjMAmwNmlAlQyQfTLqCPhIZMj8ATwVuDvJQJVKkEU8OtKDHhLn68AVmvZNutmJRJEPivgHs9X9TkYP1OdZu5Th7m+SyTITnFAr9U41KeW7sBox70YKY0gc1ff0lq9CmmOwGnAFs2b5duiNIKcDGyTb7hMWL5eSRlUSiJITMy74Zc2VbXLXoSURJAfAdsVEdX+ndRdmcv6V5NeQykEUc6qexPkqkof4X4sOKPKAdZP74Z6LYUgOsKuo+wh3SDwPLAkcHs33dntpQSC6BCiEqmN5b21G428LNNddt28dC0lEORTwHddRzGNc9oX0afr02nUD6O1BIL8CXjHMHAWp2V74ETPXnsnyOIlfCcnHKAXAusk1N+7au8EOQjYr3cUy1Wg7IwLA//wCoFngsg3JWzuqzaH1zHR1K8DgK80bZTL854JsjZwQS6ByNhOpS9VxSyX4pkghwB7uYyaPad0Zfkue2aNbpFnglwLrDg6RNFDDQSUulQZ492JV4Ion+4D7qJl1yG3x+C9EkRH2nW0PWQYBB4F5vJYc8QrQU4AtIkVMhwCqwJXDqduGE1eCaLMgIsNA2FoqRBQrRGVpnMlHgkyO6BXfsiwCOjIibu3tkeCrFvVCR92eIS2G4EVvMHgkSDa+9AeSMiwCOiOyMyASru5EY8EUQkDlTIIGR4Bd1dxPRLkFmCZ4cdGaAR2Bo7xhIRHgkT973Qj9NvAbunUd6/ZG0GWAP7SPUzRY00EVDJ7o5rPZvGYN4LEClbaYXdDlQk+rRUdavdGkB29HprrMOZ9dvUUMEufCobu2xtBdHHnC0ODGPpehoDyHz/iBRNvBInsielHpspKXJ3ejG4s8EYQ3SDUTcKQdAhokq7JugvxRpC4JJV+WCr/8UnpzejGAm8EiVO83YyLUXpxVYnKG0H+BcwxSnSj7cgI7A8cOHIvRjrwRpD/Aq8ygm2pZuig6D5enPdEECWnftxLYDL243vApzO2/2WmeyLIIl5Tz2Q22E71dJraE0HeBPwts8Hk0dxzgI29OOaJIG8E7vQSmIz9OA/YIGP73X5iKQevyqyFpEXAVcZ3T2+QSBaXlhhj2i8B1rJhyuhWeCLInJ4OyY0e2mQ9XAGslkx7x4o9ESSWeTseHC27uw5YqWVbc808EWQe4EFzCJdnkIrpLOTFbU8E2RU40ktgMvfjPcBFmfvwovmeCKLEZW4LuWQ22H4MfCQzm6drrheCrAFc6iEgTnx4BpgfeCx3f7wQ5Hhgh9yD4cx+F8msPRAkklXbZJYS+C1r07T6VnkgiC7oKGFZiD0E3gVcbM+s+hZ5IIgSxSlhXIg9BFTla1t7ZtW3KHeC6BfKxXJi/ZBl9WT2k/XcCaLlxK2zGjLlGbsHcHiubudMkNcDDwMz5gp+IXbfBiydq685E0S/TIflCnxhdmc7Wc+ZIDE5z4dlyniZ5T5VrgSJyXk+5JClmqwrZ++TeZmd71ksZe5zcdYntwEzgr27AEeP0D5J0xzfIHMB98fkPMl4GUXpTcDyo3SQom2OBFFSsq+lACt0joxAdpP13Agie5W5RDmwQvJDILtj8LkR5P3Ar/MbF2FxhYBqqM8HPJoLIrkR5KfAh3MBN+ycLgJZTdZzIoiOtevO+Uwx8LJG4Epg1Vw8yIkgcec8l1E1tZ1azdKqlnnJiSCX5/TLYz7yaQ38OrBvWhPqac+FIJGYul48c3nqbmBR4AXrBudCkCjvbH0kNbcvi9RAuRDkdmDx5jGIFoYRyKLQTg4EeSeghMghvhBQPUmlBtLeiFnJgSDHeCrpZXYkpDFsE+DsNKrrabVOEO15PBCVa+sFM8Onfg58yLLd1gmiSkW/sgxg2DYSAs9WP35PjdRLj42tE0T3B3bq0f/oOj0CWwI6QmRSrBNEqfQXMIlcGNUVAqY/sywT5G3A1V1FIfoxi8DTgC7BmfzMskyQLwEHmA1rGNYlApsDZ3TZYVd9WSbINZ5KeXUVMKf9mM16YpUgmndo/hFSBgIPVRepzJ3NskqQnYGjyhgb4WWFgE5M/NEaGlYJou/RTa2BFfb0isD+wIG9amjRuVWC6JzOHC38iSb5InA+8D5r5lskiGpsa4IeUhYCWu5VrfvnLLltkSC7Ad+yBFLYMhgC5uYhFglyOrDZYCEJRZYQ0DVcXcc1IxYJopof2lkNKQ+BXwAbWnLbGkGWAm61BFDYMigCWpwx9eNojSDK2K7M7SHlIvBmQFesTYg1gmhyrkl6SLkIKHPmz6y4b40gqlirDOAh5SJwMPB5K+5bI4iSGivFaFPRL47pq5tNHXLwvO6ab9zCj3NatmuhauomlgiyEHDP1Ca/4onvAxcCp7RoG036Q+AtgC5DLddQxV+BJRu26e1xSwRZF9BxgyZyVxWANaMsQhPYBnl2HmAxQMmqm4qZcWnGEOATgN4GTWR94DfAGsClTRrGs70jMDa2DgU+11CbUs3e0bBNL49bIshBwH4NvDwcUK10idbOtcEYYgMBlejWntaY3NCwPuE61Wdzcm8sEeREYNuaiPwZWBFQ2pgxUULkhWu2j8f6RUCLJtMWOloWuK5B4VXth6lcW3KxRBCVVlOJtTqihA7XjntQqx+mjinUccTpM/oSGF9oVUu3de97fNbKgVVLBLkMWK3GgNkL+MZ0nlOCByV6CEmPwNjccLwlFwNaUJlKvmwllpYIcjOgpcHJRMu5Wu2a3t3ltYA/TIV8/P/eEXim2svSP8eLPoE1H5nqMpwm9nv3bmkNBZYIovVvncOZSO6t5h2TTcYfry7d1HA9HukJgfMApYydSLR5eNYUur8J7NmTfY26tUQQrXwsMYn1ejVPtZQbd9kbhb+Xh+vMH6Y6c3cIsE8v1jXs1BJBrgJWnsD+HQDlTppKPgmoMEtIOgSWBm6roV5JySd600xvkl+jy+4fsUQQXZb5wHRcbHLLTN+2ulMQkgYBveHrTMJl3azVnFErkuNFy/0np3Hh5VotEeSwaTb+xqw8Ati9IVDajdeufMjwCGzd8EzcGwCd4B5/9moVQF8UycUSQT447h6A1tGb7KyPgakNxPF7JMmBLsCA+wEN+KYyH/B7YJmq4YNVlsWm/fTyvCWC6Ji7JurzVsQYv9HUBAAt92rZN2Q4BEbZuxCxTqvuAqmisZmk5ZYIolDq10R7HPoVGUXWBi4YpYNo2wiBRwAdMHysUatXPrw8cOOIfXTa3BpBunRuslWSLvVEXy/tWWjvwp14JsgK1VzkVe6iZsshbeCqhr3pcs5tIfNMEGFyPKA9lJD+ENgKOLW/7tP27J0guieiib+pXEtpQ96pds3zdDbOrXgniAKnNKZKZxrSLQI696bDpa4LHZVAEA0LfQJs0e34KL637QFdcnMtpRBkbkDH6bWMHDI6AucCG43ejf0eSiGIIqHjC7qw8xr7YTFt4S3A6oA+sdxLSQRRMFVuWLmaQtohoGKbOlzYJn9ZO42JW5VGEMGtWnhfTYx7jup1Q1DHd9rkucrR3xdtLpEg8vsEQJPMkPoIaDXwzPqP+3iyVIJod/0HwI4+wtirF89XK4BFfpqWSpCxt+cPgySTkkvk2M5KjqpefwYm6LxkggRJJh9xOlWtm30mErilIEfJc5AxvN8NbAnslCoAhvXqCLtuZx4LKONMkVLiG0TnsvTZIFJMmz+2yAFQ02klCNfnqC41FSUlEUQ7v9uMyxlbVLA7cFYJMXS8RBlmrumgP/NdlEAQncHS9V3VqgjpDgG9VZRd39QNwO7ce6knzwRRhnARQ5WrQvpDQEWP9Lnqcp7ikSCzVRuB2tgKGQ6BjwHHDaduGE3eCKJTu79rWKxlGKTL0KJjPHVLHGSBiDeC6Lt4vSyQ92ukzmtd4sU9TwRRkobrvQQmYz9EDjc5yTwRJI6y22CVruC6WRjxRJA5AV3mmd/GOCnWCp34dbNA4okgGpFKva/aEkVcBzVGQd0wPKWqDOXmtqE3gkw7ZpQKUwnNdANupSo15lhVXPmtHMC6o66Vr65FqVO166zzTNOWItMBQP133cx7oCpdraTP+iy5D7gTmBlYpHoTLlj9c5ZxBsrmeao/HZ1R2Qe9QfXXp8h2+SZbb6oS86mk2l2AEsi5E88EaRIsDTL9aYCpbkUTEekerf6Um/bJJo17eFZJwEUY/enfm2SWFIHlwxi5n+jBvqy6DIJkFa4wdmgEgiBDIx76skIgCJJVuMLYoREIggyNeOjLCoEgSFbhCmOHRiAIMjTioS8rBIIgWYUrjB0agSDI0IiHvqwQCIJkFa4wdmgEgiBDIx76skIgCJJVuMLYoREIggyNeOjLCoEgSFbhCmOHRiAIMjTioS8rBIIgWYUrjB0agSDI0IiHvqwQCIJkFa4wdmgEgiBDIx76skIgCJJVuMLYoREIggyNeOjLCoEgSFbhCmOHRuB/AJDW2BnA2lsAAAAASUVORK5CYII="
            let image2 = "data:image/png;base64,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"
            let image3 = "data:image/png;base64,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"
            let image4 = "data:image/png;base64,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"
            var maskImage = new Image();
            maskImage.src = image3

            function createRandomItemStyle() {
                return {
                    normal: {
                        color: 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')'
                    }
                };
            }
            let text = ['Sam','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Macys','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Schumer','Jurassic','Charter','Chick','Planet','Pitch Perfect','Express','Home','Depp','Lena','Lewis','KXAN','Mary','Farrah','Rita','Serena','NCAA tournament','Point','Macys','Schumer','Jurassic','Charter','Chick','Planet','Pitch Perfect','Express','Home','Depp','Lena','Lewis','KXAN','Mary','Farrah','Rita','Serena','NCAA tournament','Point']
            let data = [];
            for(var i = 0; i < text.length; i++){
                let obj = {};
                obj.name = text[i];
                obj.value = Math.random()*3;
                data.push(obj)
            }
            console.log(data)
            let option = {
                title: {
                    text: 'Google Trends',
                    link: ''
                },
                tooltip: {
                    show: true
                },
                series: [{
                    name: 'Google Trends',
                    type: 'wordCloud',
                    gridSize: 1,
                    sizeRange: [10, 20],
                    rotationRange: [-45, 0, 45, 90],
                    textPadding: 0,
                    maskImage:maskImage,
                    height:'900px',
                    width:'900px',
                    autoSize: {
                        enable: true,
                        minSize: 1
                    },
                     textStyle: {//文字样式设置
                        normal: {
                            color: function() {//颜色
                                return 'rgb(' + [//返回随机生成的颜色
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            }
                        },
                        emphasis: {//鼠标划入样式
                            shadowBlur: 10,//文字阴影模糊度
                            shadowColor: '#333'//文字阴影颜色
                        }
                    },
                    data:data
                }]
            }
            wordCloud.setOption(option)
        }
        
    }
}
</script>
注意，可以根据text数据的多少，和文字size调节字符云的显示，达到一个合适的范围，这个需要自己调节
【右上角点个赞，谢谢】
Chris__Wang
关注
2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
vue字符云

注意，可以根据text数据的多少，和文字size调节字符云的显示，达到一个合适的范围，这个需要自己调节。然后就是要把下载的图片转成base64位编码了，网上有好多在线转编码的地址，我用的是。复制转义后的编码，放到下面代码里面即可，我这里提供了几个。首先当然要先在项目中添加字符云，详见。下面说一下如何自定义不同形状的字符云。登录后选择一个图标进行下载。
复制链接

扫一扫