1,什么是词云图?
词云图,也叫文字云,是对网络文本中出现频率较高的“关键词”予以视觉上的突出,出现越多,显示的字体越大,越突出,这个关键词也就越重要。让浏览者通过词云图一眼就可以快速感知最突出的文字,迅速抓住重点,了解主旨。
2,绘制词云图
引入js文件
echarts.js echarts-wordcloud.min.js下载链接:
https://download.csdn.net/download/qq_42092076/16664047
一个简单的 ECharts 词云图示例代码:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入 ECharts 词云图组件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
series: [{
type: 'wordCloud',
gridSize: 20,
sizeRange: [12, 50],
rotationRange: [-90, 90],
textStyle: {
normal: {
color: function () {
return 'rgb(' +
Math.round(Math.random() * 255) + ',' +
Math.round(Math.random() * 255) + ',' +
Math.round(Math.random() * 255) + ')';
}
}
},
data: [
{name: 'Example', value: 10000},
{name: 'ECharts', value: 6181},
{name: 'Word Cloud', value: 4386},
{name: 'Open Source', value: 4055}
// ... 其他词云图数据
]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
实现
这段代码创建了一个简单的词云图,其中包含了四个词汇:"Example"、"ECharts"、"Word Cloud" 和 "Open Source",每个词汇的频率由它们的 value
属性表示。你可以根据需要添加更多的数据点来增加词的多样性和频率。
复杂词云图代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>词云图</title>
<!-- 引入ECharts文件 -->
<script type="text/javascript" src = "http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript" src="/js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 80%;height: 400px;border: 1px solid black"></div>
</body>
<script type="text/javascript">
// 使用模块化加载方式
require.config({
paths:{echarts:'http://echarts.baidu.com/build/dist'}
})
require(
[
'echarts',
'echarts/chart/wordCloud',
],
function(ec){
var myChart = ec.init(document.getElementById('main'));
function createRandomItemStyle(){//创建随机颜色
return{
normal:{
color:'rgb('+[
Math.round(Math.random()*255),
Math.round(Math.random()*255),
Math.round(Math.random()*255)
].join(',')+')'
}
};
}
option = {
title:{
text:'词云图',
link:'',
},
backgroundColor:'rgba(128,128,128,0.1)',
tooltip:{show:true},
series:[{
name:'p1',
type:'wordCloud',
sizeRange:[100,50000],//最大最小值
size:['95%','95%'],//词云图大小
textRotation:[0,45,90,135,-45,-90],//词的倾斜角度
textPadding:4,
autoSize:{enable:true,minSize:2},
data:[//词云名称,词云大小,颜色
{name:'热爱',value:16884,itemStyle:{normal:{color:'red'}}},
{name:'明媚',value:8844,itemStyle:createRandomItemStyle()},
{name:'耀眼',value:16644,itemStyle:createRandomItemStyle()},
{name:'阳光',value:2244,itemStyle:createRandomItemStyle()},
{name:'小红花',value:14844,itemStyle:createRandomItemStyle()},
{name:'希望',value:2244,itemStyle:createRandomItemStyle()},
{name:'永远',value:1688,itemStyle:createRandomItemStyle()},
{name:'散步',value:15552,itemStyle:createRandomItemStyle()},
{name:'美好',value:8848,itemStyle:createRandomItemStyle()},
{name:'芳草地',value:7788,itemStyle:createRandomItemStyle()},
{name:'爱自己',value:5240,itemStyle:createRandomItemStyle()},
{name:'祝福',value:12244,itemStyle:createRandomItemStyle()},
{name:'陪伴',value:7749,itemStyle:createRandomItemStyle()},
{name:'哈哈哈',value:2244,itemStyle:createRandomItemStyle()},
{name:'放弃',value:11044,itemStyle:createRandomItemStyle()},
{name:'天天开心',value:6749,itemStyle:createRandomItemStyle()},
{name:'顺心',value:814,itemStyle:createRandomItemStyle()},
{name:'拒绝',value:8349,itemStyle:createRandomItemStyle()},
{name:'和',value:7789,itemStyle:createRandomItemStyle()},
{name:'撕掉标签',value:6189,itemStyle:createRandomItemStyle()},
{name:'^_^',value:2782,itemStyle:createRandomItemStyle()},
{name:'嘻嘻',value:261,itemStyle:createRandomItemStyle()},
]
}]
};
myChart.setOption(option);
}
);
</script>