最近有用到echarts的一个插件：echarts-wordcloud；中文名是词云。它的作用是用一组热词生成的一个用canvas绘制的echarts散点图，支持彩色、旋转、图片形状内定制词云排布，非常的银杏，那就让我们一起来学习学习吧！
一、安装依赖
在 react 项目中安装 echarts 和 echarts-wordcloud
npm install echarts
/*注意版本号，echarts5.0.0对应的echarts-woedcloud2.0.0版本*/
npm install echarts-wordcloud@2.0.0二、引用词云
导入echarts和echarts-wordcloud
import * as echarts from 'echarts';
import 'echarts-wordcloud';三、使用
1.官方echartsReact组件
使用react自带的echartsReact组件使用 只需配置option即可使用
1.1 安装依赖
npm install echarts-for-react
1.2 引用插件
import EChartsReact from 'echarts-for-react';
1.3 组件中使用
<EChartsReact option={wordOption()}/>
1.4 wordOption配置项函数的配置
const wordOption = () => {
let option = {
backgroundColor: '#fff', // canvas背景颜色
// canvas标题配置项
// title: {
// text: '我是标题',
// top: '0%',
// left: '-1%',
// textStyle: {
// fontSize: 14,
// color: '#3B3E41',
// fontWeight: 'normal',
// },
// },
series: [
{
type: 'wordCloud',
left: 'center', // X轴偏移量
top: 'center', // Y轴偏移量
width: '100%', // canvas宽度大小
height: '100%', // canvas高度大小
sizeRange: [6, 30], // 词典字体大小范围配置
rotationRange: [0, 0], // 词典字体旋转角度配置，默认不旋转
gridSize: 5, // 词典字体间距配置
layoutAnimation: true, // 为false词典过度会阻塞
textStyle: {
// 词典样式配置
color: function () {
let colors = [
'#31a398',
'#d7797d',
'#798368',
'#66d184',
'#8990bb',
'#66e264',
'#e8d277',
'#e684a5',
'#b39d8e',
'#d8c5de',
'#96c6c6',
];
return colors[parseInt(Math.random() * 10)];
},
},
// 渲染词典数据
data: [
{
value: '6', // 词典大小配置
name: '墙裂推荐', // 词典名称配置
},
{ value: '40', name: '实用' },
{ value: '29', name: '专业' },
{ value: '28', name: '非常好' },
{ value: '57', name: '受益匪浅' },
{ value: '26', name: '高大上' },
{ value: '25', name: '值得推荐' },
{ value: '24', name: '超值' },
{ value: '23', name: '很棒' },
{ value: '22', name: '技巧 ' },
{ value: '21', name: '必须五星' },
{ value: '20', name: '节约时间' },
{ value: '16', name: '细致' },
{ value: '14', name: '五星好评' },
{ value: '13', name: '良心产品' },
{ value: '12', name: '内容丰富' },
{ value: '10', name: '可操作性强' },
{ value: '29', name: '理念' },
{ value: '48', name: '耐心' },
{ value: '5', name: '太专业' },
{ value: '16', name: '经典实用' },
{ value: '5', name: '现学现卖' },
{ value: '5', name: '帮助很大' },
{ value: '5', name: '职业人' },
{ value: '4', name: '一直追随 ' },
{ value: '21', name: '很不错' },
{ value: '5', name: '好好学习' },
{ value: '8', name: '太直' },
{ value: '7', name: '良心卖家' },
{ value: '13', name: '打开了视野' },
{ value: '12', name: '很喜欢' },
{ value: '9', name: '通俗易懂' },
{ value: '9', name: '思想开启' },
{ value: '8', name: '帮助巨大' },
{ value: '7', name: '一如既往地好用' },
{ value: '7', name: '升值必备' },
{ value: '6', name: '大大赞一个' },
{ value: '6', name: '不能错过' },
{ value: '5', name: '深入浅出' },
{ value: '5', name: '朴实 ' },
{ value: '5', name: '加分' },
{ value: '5', name: '大气' },
{ value: '5', name: '死忠粉' },
{ value: '9', name: '看的进' },
{ value: '8', name: '优秀' },
{ value: '7', name: '高级' },
{ value: '6', name: '收货满满' },
],
},
],
};
return option;
};2.DOM使用
直接用盒子来包裹词云，不想装依赖，用这种方法也不错噢
2.1 引用一下useRef或createRef，这里用useRef演示
import { useRef } from 'react';
2.2 创建一个ref对象
const wordCloudRef = useRef()
2.3 将 ref对象绑定到dom元素上
tip: 页面方法中会通过 echarts.init(wordCloudRef.current)方法获取到ref绑定为wordCloudRef的DOM节点，然后通过echarts的内部机制将echarts视图以canvas的形式展现在页面上
<div ref="wordCloudRef" class="block-up-login"></div>
2.4 调用方法触发绘制
useEffect(()=>{
wordInit()
},[])
const wordInit = () => {
// 获取到ref绑定为wordCloudRef的DOM节点，以canvas的形式展现在视图层
let myChart = echarts.init(wordCloudRef.current);
// echarts参数设置
myChart.setOption({
backgroundColor: '#fff', // canvas背景颜色
// canvas标题配置项
title: {
text: '我是标题',
top: '0%',
left: '-1%',
textStyle: {
fontSize: 14,
color: '#3B3E41',
fontWeight: 'normal',
},
},
series: [
{
type: 'wordCloud',
left: '-5%', // X轴偏移量
top: '20%', // Y轴偏移量
width: '100%', // canvas宽度大小
height: '100%', // canvas高度大小
sizeRange: [12, 50], // 词典字体大小范围配置
rotationRange: [0, 0], // 词典字体旋转角度配置，默认不旋转
gridSize: 25, // 词典字体间距配置
layoutAnimation: true, // 为false词典过度会阻塞
textStyle: {
// 词典样式配置
normal: {
color: function () {
// Random color
return (
'rgb(' +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
].join(',') +
')'
);
},
},
},
// 渲染词典数据
data: [
{ value: '40', name: '实用' },
{ value: '29', name: '专业' },
{ value: '28', name: '非常好' },
{ value: '57', name: '受益匪浅' },
{ value: '26', name: '高大上' },
{ value: '25', name: '值得推荐' },
{ value: '24', name: '超值' },
{ value: '23', name: '很棒' },
{ value: '22', name: '技巧 ' },
{ value: '21', name: '必须五星' },
{ value: '20', name: '节约时间' },
{ value: '16', name: '细致' },
{ value: '14', name: '五星好评' },
{ value: '13', name: '良心产品' },
{ value: '12', name: '内容丰富' },
{ value: '10', name: '可操作性强' },
{ value: '29', name: '理念' },
{ value: '48', name: '耐心' },
{ value: '5', name: '太专业' },
{ value: '16', name: '经典实用' },
{ value: '5', name: '现学现卖' },
{ value: '5', name: '帮助很大' },
{ value: '5', name: '职业人' },
{ value: '4', name: '一直追随 ' },
{ value: '21', name: '很不错' },
{ value: '5', name: '好好学习' },
{ value: '8', name: '太直' },
{ value: '7', name: '良心卖家' },
{ value: '13', name: '打开了视野' },
{ value: '12', name: '很喜欢' },
{ value: '9', name: '通俗易懂' },
{ value: '9', name: '思想开启' },
{ value: '8', name: '帮助巨大' },
{ value: '7', name: '一如既往地好用' },
{ value: '7', name: '升值必备' },
{ value: '6', name: '大大赞一个' },
{ value: '6', name: '不能错过' },
{ value: '5', name: '深入浅出' },
{ value: '5', name: '朴实 ' },
{ value: '5', name: '加分' },
{ value: '5', name: '大气' },
{ value: '5', name: '死忠粉' },
{ value: '9', name: '看的进' },
{ value: '8', name: '优秀' },
{ value: '7', name: '高级' },
{ value: '6', name: '收货满满' },
],
},
],
});
};四、配置项详解
left top right bottom ：词云的位置，默认是 center；
shape ：词云的形状，默认是 circle(圆形)，可选的参数有cardioid（心形） 、 diamond（菱形 正方形） 、 triangle-forward 、 triangle（三角形）、 star（星形）、pentagon （五边形）；
width height ：词云的宽高，默认是 75% 80%。
sizeRange ：词云的文字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例， value 最小的渲染为 12px ，最大的渲染为 60px ，中间的值按比例计算相应的数值。
rotationRange rotationStep ：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep ，这个值越小，词云里出现的角度种类就越多。以上面参数为例，可能旋转的角度就是 -90 -45 0 45 90 。
gridSize ：词云中每个词的间距。
drawOutOfBound ：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠。
textStyle ：词云中文字的样式， normal 是初始的样式， emphasis 是鼠标移到文字上的样式。
maskImage： 词云轮廓图，白色区域将被排除在绘图文本之外,形状选项将继续应用为云的形状，如下图所示。
目前有两种方式(时间问题未尝试，亲们自己动手哈)
（1） 可以在iconfont中下载（最好是填充的）图案，转为base64，就可以用来生成有图案的词云了。
// 小鸟图片
image："data:image/png;base64,iVBORW0SDFAFASDFSAGASIWFW1J1I12I12I1I2NR1OI2R12R"
let myChart = echarts.init(document.getElementById('echartWordcolud'))
// tip:image 不宜过大；否则firefox会不兼容 iconfont上面的图标大小就可以
let maskImage = new Image()
maskImage.src = data.iamge(2)
let maskImage = new Image();
let world_option = world_cloud(data,maskImage);
maskImage.onload = function () {
world_option.series[0].maskImage
worldChart.setOption(world_option);
}
maskImage.src = 'img/ren1.png';五、踩过的坑
1.颜色不生效
在配置不同的颜色时，可以看到网上有很多都是这样配置的
textStyle: {
normal: {
color: function() {
return (
"rgb(" + Math.round(Math.random() * 255)
+ ", " + Math.round(Math.random() * 255)
+", " +Math.round(Math.random() * 255) +")"
);
}
}
}这样配置导致随机颜色不会生效，问题在于把color配置在了normal中，现在官方推荐不使用normal了，所以如果有随机颜色没有生效的，就要注意是不是配置在了normal中
正确写法：
textStyle: {
color: function() {
return (
"rgb(" + Math.round(Math.random() * 255)
+ ", " + Math.round(Math.random() * 255)
+", " +Math.round(Math.random() * 255) +")"
);
}
}2.使用词云报错
如果页面报错 Component series.wordCloud not exists. Load it first.
原因：echarts插件中没有wordCloud依赖包，这是一个坑，虽然官网有阐述，但是位置不醒目，一般根本不知道
tip: 此时如果你百度，会出现很多让你引用第三方js库，也就是echarts-wordcloud.min.js文件，既然项目都安装了echaert，还去引用外部wordclou.js文件，不仅增加了项目的打包体积，更是多此一举，最后报错依旧不能解决，所以一下解决方案重中之重！
解决办法：
1. 安装 wordCloud 1.0 依赖包
npm install echarts-wordcloud@1
2. 组件注入
import 'echarts-wordcloud'
tip: 必须安装这个版本，不能执行官网npm install echarts-wordcloud，因为echarts5.0以下的版本使用1.0的词云 默认安装是2.0，否则会报错：
TypeError: babel_runtime_helpers_defineProperty_WEBPACK_IMPORTED_MODULE_0__default(...) is not a function六、总结
在使用词云时，会有些配置项或者安装依赖的问题踩过一次的坑，下次就知道怎么解决啦~
综上就是关于Echarts词云图使用方法，以及关于如何配置Echarts词云图。希望可以能帮助到大家，也欢迎大家与我交流，咱们共同学习0.0!
