注意:echarts在使用echarts-wordcloud时,会出现一个版本问题,echarts5版本以下的需要下载echarts-wordcloud1.0版本,echarts5及以上的下载echarts-wordcloud2.0版本
这个是通过js进行实现的需要引入两个文件,echarts的版本是5以下的,echarts-wordcloud用的是1.2的
下载地址:
词云2.0版本: https://github.com/ecomfe/echarts-wordcloud
词云1.2版本:https://github.com/ecomfe/echarts-wordcloud/tree/1.1.2
<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>
实现的主要代码
//修改成特定颜色
let colorList = [
'#CF4645','#B580B2','#8956FF','#70C9A8','#1890ff','#ffa940',
'#ffadad','#48cae4','#97d2fb','#83bcff','#91e5f6','#9381ff'];
var option = {
series: [{
type: 'wordCloud',//类型
sizeRange: [15, 60],// data 中的值将映射到的文本大小范围,默认为最小12px,最大60px。
rotationRange: [0, 0],//文本旋转范围[-90,90]
rotationStep: 45,//旋转步长
gridSize: 8,//每个词的间距
shape: 'pentagon',//词云形状,默认circle,可选参数cardioid 、 diamond 、 triangle-forward 、 triangle 、 star
width: '100%',
height: '100%',
//drawOutOfBound :是否允许词云在边界外渲染,直接使用默认参数 false 就可以,否则容易造成词重叠。
textStyle: {
normal: {
//随机颜色
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
//color: function(a){return colorList[a.dataIndex]},//显示特定颜色
}
}
},
data: keywords,//数据源[]
}]
};