echarts制作词云图

本文主要是介绍echarts制作词云图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

词云图

由于echarts官网没有词云图的配置，网上太多也不全，这里写一份关于词云图配置的文章，包括自定义图形，透明度等

文章目录

词云图
一、用到的网站
二、全部代码
三、结果展示

一、用到的网站

1、阿里巴巴图标库
2、图片转base64网站
3、echarts-wordcloud.min.js文件
4、echarts.min.js文件

二、全部代码

如果要使用自定义图案需要注意：
1、创建图片：var maskImage = new Image();
2、设置图片地址：maskImage.src = url;
3、载入配置：maskImage: maskImage;
4、待图片加载好以后再配置option：maskImage.onload

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/echarts.min.js"></script><script src="./js/echarts-wordcloud.min.js"></script><style>#main {width: 700px;height: 500px;box-shadow: 0 0 15px 3px aqua;margin: 100px auto 50px;border-radius: 15px;}</style></head><body><div id="main"></div></body><script>var myChart = echarts.init(document.getElementById('main'));// 数据源var keyWords = [{name: '腾越街道',value: 1,},{name: '西源街道',value: 11,},{name: '固东镇',value: 12,},{name: '滇滩镇',value: 12,},{name: '猴桥镇',value: 18,},{name: '和顺镇',value: 13,},{name: '界头镇',value: 14,},{name: '曲石镇',value: 21,},{name: '明光镇',value: 18,},{name: '中和镇',value: 22,},{name: '芒棒镇',value: 26,},{name: '荷花镇',value: 24,},{name: '北海镇',value: 15,},{name: '清水镇',value: 18,},{name: '明光镇',value: 18,},{name: '中和镇',value: 22,},{name: '芒果镇',value: 26,},{name: '荷花镇',value: 24,},{name: '北海镇',value: 15,},{name: '清水镇',value: 18,},{name: '马站乡',value: 15,},{name: '五合乡',value: 10,},{name: '新华乡',value: 17,},{name: '蒲川乡',value: 15,},{name: '团田乡',value: 16,},{name: '北海乡',value: 1,},{name: '腾越镇',value: 6,},{name: '清水乡',value: 7,},{name: '马站乡',value: 15,},{name: '五合乡',value: 10,},{name: '新华乡',value: 17,},{name: '蒲川乡',value: 15,},{name: '团田乡',value: 16,},{name: '北海乡',value: 1,},{name: '腾越镇',value: 6,},{name: '清水乡',value: 7,}]// 求出最大值用来计算透明度var max = 0// 方法一for (let item of keyWords) {if(item.value > max){max = item.value}}// 方法二，利用map方法// max = Math.max(...keyWords.map(item=>item.value))// 自定义图片var maskImage = new Image();// 图片在iconfont上找，图片的黑色区域表示被填充maskImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAFBtJREFUeF7tnQn0ddUYxp8kQ0KpDGWKBpKZQqaEkpRKiKSIBoooypQSSoNkKJEiSaNWZJZUCMmwIlaGkgxFZsm8fjk397vfHfbeZ9rnnOdd66z7/9a39z7vfvZ5ztnDOywjixEwAjMRWMbYGAEjMBsBE8RPhxGYg4AJ4sfDCJggfgaMQBoC/oKk4eZaA0HABBnIQLubaQiYIGm4udZAEDBBBjLQ7mYaAiZIGm6uNRAETJCBDLS7mYaACZKGm2sNBAETZCAD7W6mIWCCpOHmWgNBwAQZyEC7m2kImCBpuLnWQBAwQQYy0O5mGgImSBpurjUQBEyQgQy0u5mGgAmShptrDQQBE2QgA+1upiFggqTh5loDQcAEGchAu5tpCJggabi51kAQMEEGMtDuZhoCJkgabq41EARMkIEMtLuZhoAJkoabaw0EARNkIAPtbqYhYIKk4eZaA0HABBnIQLubaQiYIGm4udZAEDBBBjLQ7mYaAiZIGm6uNRAETJCBDLS7mYaACZKGm2sNBAETZCAD7W6mIWCCpOHmWgNBwAQZyEBn1M2NJe0p6XaFTp+V9E1J/JaVt0haXdKdJZ0s6TRJfynTqAlSBj3XjUXgfZJ2nlHpw5KeF9vgWPlTJW07Uf8KSVtJ+nZquyZIKnKuF4vAmyW9ZkGlAyS9MbZhSR+aQ66PS9oioc0bq5ggccgtK2mV4lpV0l/HruvH/v5HXLO9L/10SR8L7OVTJH06sCzF9pZ06ILyfFlOj2jzpqImyGzU1i/ePI+XBBkgxh0CQb5c0jnFvPpCSX8KrNfHYmB3rqT1Ajt3sKT9Ass+WdJnAsoeJmmfgHJLFTFBloSEt9foWjMF0Cl1+Jp8ShJE4UFhQTokOVrSrhEdPk/SRgHl71S8gB4QUPYCSY8NKGeCTAFpZUm7S9pBUlWkmDcWx0v6QEGYlDHrUp3tJZ0YqXAoQeatOyZveYOk20viN0qG/AVZXtJuBTnuFYVaNYU/Kuk4SZ+vprnsWuFlw9btGpGasT37nAV1QtYdk03wVYJ8UTJUgvDF4LpfFFr1FD6rIMon6mm+tVY/WUxXYxVY9CA/TdLZsY0W6xrWN1EyNII8UtJBkp4QhVIzhdkGfV0zt6r9Lkwhd0q4C+u0x8yp9/BiHbdCQtuQasvYekMiyF6SeAhvHQtSg+XZ3txX0ncavGfVtzpc0isSG32RpPfPqHtXSd8oTslTmr9IEi/IKBkCQdYuvhqTp6xRQDVY+NqCJLyFuyYc8u2fqPSRkniJTZObS7qs5CYKL50HxerWd4JsIwngeft0Td4j6SUdUroMOThE3HpOXzEVeWBJLDib4mUZJX0myGaSWAAvF4VIXoXZynx+XipN1aYMOThEvaOkv83oJ+uSDSvA4OqUF2VfCcLpN2+lFSsAtu0m3llYv7atx6z7lyEHbd5d0lUzGmdadZ+KOv67CEuIm27ZR4JgInJmYfZcEbatN/PWAEO/NpScZkEbo8fDZlgW8GL7rqS7xTS2oCyHhLeKba9vBOFcA3JEzzVjgWuhPOYa723hvrNu+UVJfKlThIefurzVJ4WtXM6EmHZVKf+WhLFplPSNIJg2bx6FQHcK/14SxnlsdbYp9y3My3n7pwimJ5j1TBPG7qQxZ6qU9mfV+bOk28Y22CeCvLbYzo3FoEvleWs/SdK/WlIa26oDE8xHUJdF8iGSWFNNk2cU5LhFTX1j+zz6q9QXgnAy/oWagM2tWQ7isEVqUjBZhxgxVrnj+jE1hBw/naL0XQoLAkx/6pQrJd0z9gZ9IAgn45Aj+pQ0FqyMyu8h6V0N6YOz05si/DnG1WKLFmLMsjNjC5sv/1oN9OUHkpgeRkkfCHLEnBPYKDA6VpjdurrWI0xz8A9nSpWyEP+eJA46uaYJDyrEeG6DmF8i6aGx9+s6QejwxbGd7kn53xZejlV2B9P07QpiRL9tJREkYUSMadFEMBlhKoVRJtO2JuXLkh4de8OuE4S57YtjO92j8qHORYu6zDQKsxyuFGNOXlJMoyAHi+FJwVUZ694dE6dqi/QP+f/BWfMO+esx/kCkkITT6wcXxnvsHoX6i4/fl2kUfvcQA5fWacIXCVJwcc82hTUba7co6fIXZOhfj0mS4IX3yzmjz3wff3ssWlMdxZimfK3wFJwXLIF7jIiBq2sO8mpJb4tVpKsE8ddj6ZEmGATRQD434yHAZmqdsQuX40XCwpZAE+dL+rqkX8+pAOk2KQ4z+c1NWFvh5hwlXSWIvx6zh5mpBG/KWQaAo5ojsmAM+HdJ1xTrB9YQXPx7UXwvXlScfuMGG71DFPWkli/MAp0vYJR0kSApX48/SPpWgcxqPbXVGh/464pQQ4Qb4uLfZYRtX3a1uNYtfh8lCSy7IvOshmf2oYsECQlhOeowgQPYvZg08uOtx+4Xb76+C/4WnJfgcsr06zeS2CLmF+vWlWZcxJ0akeLePQAp6VlPqtQyWJcGLjLZ3dl0QSwktiUJ/WPpNwJYWjwxpYtdI8hT55gtjPcfEhHB4icBoBAk4IUB5Vykuwhwak9qhGjpGkGOlUTki0WyiyTKhgimFFjJWvqLwCOK7enoHnaJIJzG4oK5yGSZOfcoOUsoIEQ3JLGLpX8IYP4SG93xJhS6RBBMFUJC4aScLJO8pUnDuf49hvn26ITEIHY39qhLBCFCSUhkvBSC4PNNwDZL/xB4tqRTUrvVFYJwyDPL3mey7ykE4aR4XsjLVHxdr10EflSc2yw68JypZVcIgkEcO1ihQi6IUEJxoowzjaV/CJB56lVlutUFgnBOMcvxZlbfz5CElWqIYJrRpQiGIX1ymf8hgJcpB6TJkjtBsBPCajTFVDrEvJmMq2RetfQPAYwsS+9M5kwQcl1jGpHiqzAabuq/YcpbBHsuTE2G7GzVP0os2SNmHseU7WSuBMFGiCgUi848QvvPYo1sR8RFIghySF670LZdLj8EGG/GmSzEpSRHghAG5heleuXKQ0eAWQORWEpLbgTBypboiBYjkIoAESjxaGQGUlraIgj2T5MJFctGCS8NhhvoBQKVRsNvgyCjiOAHSIIUiE09evFstt4J1hwcKo+c40or1DRBCBqAExPy4yKlFvvUG5TuiRswAtL4S7cSPOogCOnOyOuAL8akk//kNApXUKx0LUagLAJ8Nfh6lN65GlekaoJM5owgDwQ+0e8oQtJ4nVH2MXD9WQgkRS1ZBGfVBCFCH6nPpglrD9Ich5isL9Lb/28ExhEgnA8EqVyqJggKkm4ZMliMQBMIcGbG2pbZSuVSB0FQ8v6SiPRH3o7V5+QLxPuPi+w//JIYZhVJK0vKJSJf5aC7wUoR4IV8eqUtjjVWF0Em9cXYkGvSBP16SbMi/GEWQr46LtJ9hVrn1oWV280PAaLEEwaqNmmKIHSAeeKzpvQkND2vDQxreww62XAjOeSbIshxkl4wZxiYRzIVCxGIsv9Agr6F4DHEMgTQZt0xLUtupXg0QZCjAsPOc24SE8EPH3IM0kjKYhkOAqRdeKak7zfR5boJEhsMgc7H+H/gWou3YWo4/yYw9j2qQ4AYy8QEboQcqF0nQVhApZgcE8Y/Jgc3wZTZVjZJqnsQc22JMW6MHHUSZC9JJNdMFaKMPC6iskkSAVZHizZOjroIghvrZDT1lDHBVzzGJRYvQfzXcdW19AsBQjKRUrpxqXqKRXRCTNerEr5ER0Y0VvX9I27tojUgcHVxDjYvtVwNt/1/k1UShKiHZ0q6WcUax0bGi90YqFhdN1cRAsRCaz1/S1UEIfcC5OD0uw4haNzIjySkfdx2cd+1dBMBNnfwK29dqiAIwbkgR91z/5h5KNESWY/co3WErUAMAjjR7TPHIjymrUrKliUIC2PIEXPAl6o4B4lbS/pOYAPb1GnEFqiDi4UjgJsE5IAk2UgZgjCd4i3NF6QpIRUx0y3y64WIHbRCUGq/TOWuslV1qQxB2krFTCh7Fu6hco6kzUILu1yjCGQ3pZrsfSpB9pCEjVVbwk7VawJvToQ9MkjhZ2LJB4HDClfsn+ej0tKapBBko8J1ltzZbQqHiKGBp8lrGJqzsM0+DeXeWOLifp29xBKEtzDrjodk0LMbivUIKX5DJDQBaEhbLpOOwNGSdk+v3mzNWIJ8UNIOzao4924kvmHRHpLuGXIz1WLKZWkHAQKIb9LOrdPuGkOQV0pi3pibcIAYmn2KxTqLdks7CFQaFrSJLoQShHUH7M/VOekgSa8PBMxbv4FA1VAM351OZfMKIQg5x0lEs34NgFXZZMzCb5Z/fJX6uK2lEYj19WkdwxCCsKjatXVNFytwcRFmiPBBi4QcJOyiOJHOIqSq//9durSjuIggXdseJcTpywPHlJhdkGS5wPIuVg0CnfqKzCMIW7lMrboWXBqH/tMCx5L5MMk+Lc0iwEYJu6EEL89a5hEEcmDG3jX5YTHVCk3j5jTQ7YwwHoI75macOAnFLIK8VBJbcl0VAmS/MFB5plhMtZhyWZpF4NLCgjfbU/VpBGHXisBc5CjvsuCNhldaiBBLGCcr+4+EoFV9mdpDiKaqPI0gGAHWGu80VdnIejzwW0TU2bQg1LIRdVy0OgQYL6a7nLdlI5MEITMUXw+2QfsgMV8R+rtzhAFkH/DJsQ8nFkTB96d1mSTIwZJe3bpW1SkQ+xXhzj5prw7/Mi3xNeFi06U1GScIgbn4etymNW3quXHsVwQtvLNVz1jEtkqoUTaLTmhrt2ucIF05MY8FOeUrwj1sjhKLdH3l/1lsojCWZ0v6bX23WrLlEUE4DLy8g4eCoThhxUsy0VjB18Tbv7Go1VseckASyMIFeWqTEUH6HpHwGEm7JaJ4RhFNJbG6q9WIAD7tXynyE35bEgv7P1Z5vxFBCBcKSfoqhLDkXIdciCnS1+lnCha51yGZ5yUFWSANFhWMf9KXBoJwMPjTHk+vRgNKUtGTS4zugRE+JyVu46o1IXDNGFkgzSJTJL5OJ0IQXCCzPeqvEKzYaPHTbu0t4AoHpANNnQZBhjLofG4fXMGgDAWvCqDqfhMQ5CJJG3S/K0E9YDoZ4lC1qDGTZBFC/fj/AyDIf/rRl6Be4Ft/XlDJxYXI2kvukroi2i/WwCXqQoAFPc6CJwyNIIT8YZejKtmwIElMTsWq7u126kGA80CCEt74Ih0aQe5abPlVCS3xtt4uafsqG3VbrSCAJTE+81eM7j40giwv6fqaoE/N6luTOm42EgGCsS8VnGRIBIEYEKRO2baYcq1W503cdqUI/F4S6Rem5sKEIMzJ8ajru3CayhSrbiGUEF8TyGLJG4GzCnJwBDBVIMhJkjhl7rvwImgyLu9ORYqGNfsObAf7N/erMd4fCLKvJPJt9F3YlWCbt0khbyMuzORTseSBwMKvxiRBCPwcGtwgjy6mabFni5FaCIu6nyQSkVraQYAMAEdIenfM7fmC3FLS32IqdbRsHVu8sVBAEr4oK8RWdPlkBDj0gxhcv45tZWTufmrPF5VfkvT4WHBqKo89GAdRxO1y2NOaQC6axSsUYnwj9TYjgmA2cVxqIx2o9ypJh2amJzuHRFGBKH2LA9A21F8tiHF6WUVGBFkjMEtT2fu1VX8tST9q6+YL7rtOQRLIslKmOnZFLU7Ccf4jdFAlMh604fgiVmolDWfUCDkVCQqXu/CS4msCUe6Uu7KZ6QchIEblQefGCfJYSczV+yY8cF2aPnIKv13hB/+ovg1Ghf1hwQ0xuKo0QF1CxcnAcczZtqmwE203FZO/sG1dp92fc5utCrKsnqOCDevUePifSYJsXoRSabjftd1uY0nn1tZ6cw3j6LV1cREIb2jCGI7C/OAr3phMC159iCR2fbouHAiRxqFvgq0XZGH6xdXXHTBIcUERA4soJa3INIKwN0/AtC6f+v5SEs5MRGvps3DgyNrx0WOE6erZyq+KFN08e+fX4LeT9BzMSqADOVC0q2DvLenwJES6XYnxgjCji3jLq2baJcLwcIBH8lVMnfjNTmYRBEWZZjHd6pqQn5A8hZb/IQBBIMq6E79NEodAGZBhRAh+r+zCAM0jCPqf0rGHzeQIf+pGxMFlmL+5Zv1NqzcUF3Z7o7/Hf6+VxNSWgGyTv40Fmw7vfljJRQShla4cIJocYWPuUhEIhBCE5nLPl2FyRAy6i4YjEEoQWsTYj8VvbmJy5DYiPdInhiB0O7cAzkdJelmPxsNdyQyBWIKgPoZ/uOk+rsW+XCbpDZJKmzO32AffugMIpBBk1C22gfGQW7Hhfh4raX9JHCxZjECtCJQhCIqtV5CkiagoRLvjq1GZrX+tyLrxXiBQliAjEDDr2ELSlpJwAKpK/lUk0yS/INd1VTXsdoxACAJVEWT8Xvh+EzSNK/W0FjP1j5gUIUPoMnUiUAdBxvUlksjaYxeur6N/XyXpZ5Imfy/0l6LOIXfbMQjUTZAYXVzWCGSHgAmS3ZBYoZwQMEFyGg3rkh0CJkh2Q2KFckLABMlpNKxLdgiYINkNiRXKCQETJKfRsC7ZIWCCZDckVignBEyQnEbDumSHgAmS3ZBYoZwQMEFyGg3rkh0CJkh2Q2KFckLABMlpNKxLdgiYINkNiRXKCQETJKfRsC7ZIWCCZDckVignBEyQnEbDumSHgAmS3ZBYoZwQMEFyGg3rkh0CJkh2Q2KFckLABMlpNKxLdgiYINkNiRXKCQETJKfRsC7ZIWCCZDckVignBEyQnEbDumSHgAmS3ZBYoZwQMEFyGg3rkh0CJkh2Q2KFckLABMlpNKxLdgiYINkNiRXKCQETJKfRsC7ZIWCCZDckVignBEyQnEbDumSHgAmS3ZBYoZwQMEFyGg3rkh0CJkh2Q2KFckLABMlpNKxLdgiYINkNiRXKCYH/AgR3uRD99Qa9AAAAAElFTkSuQmCC"var option = {backgroundColor: '#fff',tooltip: {show: true},series: [{type: 'wordCloud',// 单词间隔的大小gridSize: 0, // 字体大小范围sizeRange: [8, 38],// 文字旋转角度范围rotationRange: [-45, 45],// 自定义词云图形状maskImage: maskImage,// 形状有(circle)圆形(默认)、(cardioid)心形，(diamond)菱形，// (triangle-forward)三角形向前，(triangle)三角形，(pentagon)五边形和(star)星形。*/shape: 'star',textStyle: {color: function(e) {var a = [Math.round(Math.random() * 255),Math.round(Math.random() * 255),Math.round(Math.random() * 255),(e.data.value / max) < 0.3 ? 0.3 : e.data.value]return 'rgba(' + a.join(',') + ')'}},//设置显示区域的位置以及大小left: 'center',top: 'center',width: '100%',height: '100%',// 源数据data: keyWords,// 鼠标放上样式emphasis: {textStyle: {fontWeight: 'bold',color: '#ff0000',}}}]}// myChart.setOption(option)// 图片加载好以后再设置配置maskImage.onload = function() {myChart.setOption(option)}</script>
</html>