近期在项目里,有需要进行关键词的词云展示需求,在使用的过程中,遇到一些问题以及解决办法,仅做一下记录:
1.echart使用词云(暂时放弃)
因为项目里大部分用的都是echart的统计图表,因此优先查询echart词云的使用,并且找到
使用地址在:https://github.com/ecomfe/echarts-wordcloud
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./wordCloud_files/echarts.simple.js.下载"></script>
<script src="./wordCloud_files/echarts-wordcloud.js.下载"></script>
<!--不能包含echarts.js,一旦包含就会报错,缺少组件,但是对于日常开发来说,不可能仅使用词云,因此暂时舍弃,读者如果任务并不紧急,可以研究一下为什么,沟通一下--->
<!--<script src="./wordCloud_files/echarts.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,
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: 'Macys',
value: 6181
},
{
name: 'Amy Schumer',
value: 4386
},
{
name: 'Point Break',
value: 265
}
]
} ]
};
chart.setOption(option);
</script>
</body>
</html>
效果如图:
放弃原因是:不能包含echarts.js,一旦包含就会报错,缺少组件,但是对于日常开发来说,不可能仅使用词云,因此暂时舍弃,读者如果任务并不紧急,可以研究一下为什么,沟通一下
报错:
2.使用js2wordcloud.js
github地址:https://github.com/liangbizhi/js2wordcloud#js2wordcloudjs
效果如图:
相关使用可以参考相关的博客,写的很好,基本涵盖所有设置: