echarts词云图echarts-wordcloud使用方法

1、echarts5.0以下的版本使用 echarts-wordcloud 1.0 的词云

1. 安装 wordCloud 1.0 依赖包npm install echarts-wordcloud@12. man.js 注入import 'echarts-wordcloud'

2、echarts5.0及以上的下载 echarts-wordcloud 2.0 版本

注意：npm install echarts-wordcloud 默认安装的是 2.0 版本

具体使用：

项目中引用：

import * as echarts from 'echarts';
import 'echarts-wordcloud';

echarts-wordcloud 基本配置

<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);}});