1.
词云图属于 echarts 的扩展。如果想用 echarts 画词云图,需要另外引入
echarts-wordcloud.min.js。可以从 echarts 官网的下载-》扩展下载中找到。
点进去就是字符云的 github 库,在这里下载 echarts-wordcloud.min.js
示例:
<html> <head> <meta charset="utf-8"> <script src=‘https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js‘></script> <script src=‘dist/echarts-wordcloud.js‘></script> </head> <body> <style> html, body, #main { width: 100%; height: 100%; margin: 0; } </style> <div id=‘main‘></div> <script> var chart = echarts.init(document.getElementById(‘main‘)); var option = { tooltip: {}, series: [ { type: ‘wordCloud‘, gridSize: 2, sizeRange: [12, 50], rotationRange: [-90, 90], shape: ‘pentagon‘, width: 600, height: 400, drawOutOfBound: true, 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: [ { name: ‘Sam S Club‘, value: 10000, textStyle: { normal: { color: ‘black‘ }, emphasis: { color: ‘red‘ } } }, { name: ‘Macys‘, value: 6181 }, { name: ‘Amy Schumer‘, value: 4386 }, { name: ‘Jurassic World‘, value: 4055 }, { name: ‘Charter Communications‘, value: 2467 }, { name: ‘Chick Fil A‘, value: 2244 }, { name: ‘Planet Fitness‘, value: 1898 }, { name: ‘Pitch Perfect‘, value: 1484 }, { name: ‘Express‘, value: 1112 }, { name: ‘Home‘, value: 965 }, { name: ‘Johnny Depp‘, value: 847 }, { name: ‘Lena Dunham‘, value: 582 }, { name: ‘Lewis Hamilton‘, value: 555 }, { name: ‘KXAN‘, value: 550 }, { name: ‘Mary Ellen Mark‘, value: 462 }, { name: ‘Farrah Abraham‘, value: 366 }, { name: ‘Rita Ora‘, value: 360 }, { name: ‘Serena Williams‘, value: 282 }, { name: ‘NCAA baseball tournament‘, value: 273 }, { name: ‘Point Break‘, value: 265 } ] } ] }; chart.setOption(option); window.onresize = chart.resize; </script> </body> </html>
属性介绍:
type - 值为 ‘wordCloud‘ 表示画词云图
shape - 词云图词条聚集的形状(难以表述,看图吧),可选项有:circle、cardioid、diamond、triangle-forward、triangle
maskImage - 指定词云图的外形,这里需要传一个形状图片。图标库地址 https://www.iconfont.cn/
data - 词云图的数据数组
rotationRange 和 rotationStep - 词条旋转范围和步长
gridSize - 词条间的空隙大小,数值越大,间隔越大。
top, bottom, left, right - 词云图的位置
width, height - 词云图占容器的大小
textStyle - 词条样式
原文地址:https://www.cnblogs.com/liujinxin123/p/12283404.html
时间: 2024-10-13 21:11:47