项目背景
展示一些协议UI给的设计图是采用词云图实现，今echarts官网看了看，发现废弃了，于是百度查了一下，一下是个人使用总结。
页面最终展示效果
实现步骤如下：
1. 安装依赖，下载插件（由于代码比较老旧，所以我的echarts都不是最新的）， echarts-wordcloud是基于echarts的一个插件。
"echarts": "^4.9.0",
"echarts-wordcloud": "^1.1.3",
npm install echarts@4.9.0
npm install echarts-wordcloud@1.1.3
2. 项目中使用
import * as echarts from 'echarts';
import 'echarts-wordcloud';
3. echarts-worldcloud的基本配置项
<div ref="word-cloud" class="flex can-class" ></div>
// 这里和echarts的使用一样，先拿到容器元素
const myChart = echarts.init(this.$refs['word-cloud']);
window.addEventListener('resize', function() {
myChart.resize();
});
appProto().then(res => {
if (res.data.code === 200) {
// 因为UI设计规定了颜色，因此我就采用这几个颜色座位随机的颜色调整
const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA'];
var option = {
backgroundColor: '#fff',
series: [
{
type: 'wordCloud',
sizeRange: [15, 70], // 用来调整字的大小范围
rotationRange: [0, 0],// 每个词旋转的角度范围和旋转的步进
rotationStep: 45,
gridSize: 10, // 用来调整词之间的距离
shape: 'pentagon',// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
//位置的配置
width: '100%',
height: '100%',
drawOutOfBound: false,// 允许词太大的时候，超出画布的范围
layoutAnimation: true,// 布局的时候是否有动画
textStyle: {
normal: {
// 颜色可以用一个函数来返回字符串，这里是随机色
color: function(v) {
const index = Math.floor(Math.random() * color.length);
return color[index];
},
fontFamily: 'sans-serif',
fontWeight: '550'
}
},
//划过添加的阴影，因为我不需要，因此注释了
<!-- emphasis: {
focus: 'self',
textStyle: {
textShadowBlur: 10,
textShadowColor: '#333'
}
}, -->
//data格式是一个数组
data: res.data.data
}
]
};
myChart.setOption(option);
}
});