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 {
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',
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 - 词条样式