1.
Word cloud of belonging to an expanded echarts. If you want to draw with echarts word cloud, the need to introduce additional
echarts-wordcloud.min.js. Echarts can be downloaded from the official website - "Extended Download found.
Point into that character clouds github repository, download it here echarts-wordcloud.min.js
Example:
<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>
Property description:
of the type - the value 'wordCloud' word cloud represents the painting
the Shape - word cloud gathering entry form (untold, Figure it), the options are: circle, cardioid, diamond, triangle -forward, triangle
maskImage - specified word cloud shape, there is a need to transfer the shape of the picture. Icon library address https://www.iconfont.cn/
the Data - data array of word cloud
rotationRange and rotationStep - entries rotation range and step size
GridSize - the size of the gap between the entries, the greater the value, the larger the spacing.
Top, bottom, left, right - word cloud location
width, height - word cloud account the size of the container
textStyle - style entries