gitee地址 https://gitee.com/WEILINGLI/echarts-wordcloud
Install
Or
npm install echarts npm install echarts-wordcloud
import * as echarts from 'echarts'; import 'echarts-wordcloud';
最近在react在项目中遇到词云图，在echarts关于词云图demo以下是实现代码： import React, { Component } from "react"; import ReactEcharts from "echarts-for-react"; import { Row, Col } from "antd"; import * as echarts from "echarts"; import "echarts-wordcloud"; export default class Wordcloud extends Component { wordOption = () => { let maskImage = new Image(); // 这是词云图呈现形状的图片base64码，可选，可自定义图片 maskImage.src = "data:image/svg xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0 CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgNTQ4LjE3NiA1NDguMTc2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NDguMTc2IDU0OC4xNzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc Cgk8cGF0aCBkPSJNNTI0LjE4MywyOTcuMDY1Yy0xNS45ODUtMTkuODkzLTM2LjI2NS0zMi42OTEtNjAuODE1LTM4LjM5OWM3LjgxLTExLjk5MywxMS43MDQtMjUuMTI2LDExLjcwNC0zOS4zOTkgICBjMC0yMC4xNzctNy4xMzktMzcuNDAxLTIxLjQwOS01MS42NzhjLTE0LjI3My0xNC4yNzItMzEuNDk4LTIxLjQxMS01MS42NzUtMjEuNDExYy0xOC4yNzEsMC0zNC4wNzEsNS45MDEtNDcuMzksMTcuNzAzICAgYy0xMS4yMjUtMjcuMDI4LTI5LjA3NS00OC45MTctNTMuNTI5LTY1LjY2N2MtMjQuNDYtMTYuNzQ2LTUxLjcyOC0yNS4xMjUtODEuODAyLTI1LjEyNWMtNDAuMzQ5LDAtNzQuODAyLDE0LjI3OS0xMDMuMzUzLDQyLjgzICAgYy0yOC41NTMsMjguNTQ0LTQyLjgyNSw2Mi45OTktNDIuODI1LDEwMy4zNTFjMCwyLjg1NiwwLjE5MSw2Ljk0NSwwLjU3MSwxMi4yNzVjLTIyLjA3OCwxMC4yNzktMzkuODc2LDI1LjgzOC01My4zODksNDYuNjg2ICAgQzYuNzU5LDI5OS4wNjcsMCwzMjIuMDU1LDAsMzQ3LjE4YzAsMzUuMjExLDEyLjUxNyw2NS4zMzMsMzcuNTQ0LDkwLjM1OWMyNS4wMjgsMjUuMDMzLDU1LjE1LDM3LjU0OCw5MC4zNjIsMzcuNTQ4aDMxMC42MzYgICBjMzAuMjU5LDAsNTYuMDk2LTEwLjcxNSw3Ny41MTItMzIuMTIxYzIxLjQxMy0yMS40MTIsMzIuMTIxLTQ3LjI0OSwzMi4xMjEtNzcuNTE1ICAgQzU0OC4xNzIsMzM5Ljc1Nyw1NDAuMTc0LDMxNi45NTIsNTI0LjE4MywyOTcuMDY1eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c Cjwvc3ZnPgo="; let wordData = [ { name: "Sam S Club", value: 10000 }, { name: "Macys", value: 6181 }, { name: "Amy Schumer", value: 4386 }, { name: "Jurassic World", value: 4055 }, { name: "Charter Communications", value: 2467 }, { name: "Chick Fil A", value: 2244 }, { name: "Planet Fitness", value: 1898 }, { name: "Pitch Perfect", value: 1484 }, { name: "Express", value: 1112 }, { name: "Home", value: 965 }, { name: "Johnny Depp", value: 847 }, { name: "Lena Dunham", value: 582 }, { name: "Lewis Hamilton", value: 555 }, { name: "KXAN", value: 550 }, { name: "Point Break", value: 265 } ]; let option = { backgroundColor: "#fff", tooltip: { pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>" }, series: [ { type: "wordCloud", gridSize: 1, // Text size range which the value in data will be mapped to. // Default to have minimum 12px and maximum 60px size. sizeRange: [12, 55], // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45 rotationRange: [-45, 0, 45, 90], // 词语呈现的角度，翻转的角度 maskImage: maskImage, // 呈现形状图片， 可选 textStyle: { normal: { // 单词呈现的颜色 color: function() { return ( "rgb(" Math.round(Math.random() * 255) ", " +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
")"
);
}
}
},
// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
// Default to be put in the center and has 75% x 80% size.
left: "center",
top: "center",
right: null,
bottom: null,
width: "90%",
height: "110%",
data: wordData
}
]
};
return option;
};
render() {
return (
<div style={
{ marginTop: "50px", width: "82%" }}>
<Row>
<Col md={24}>
<ReactEcharts
// style={
{ "56%" }}
option={this.wordOption()}
theme="ThemeStyle"
/>
</Col>
</Row>
</div>
);
}
}Bug解决】echarts词云图设置随机颜色失效
echarts词云图设置随机颜色失效这个问题，我谷歌了很久都没有找到一个比较新的解决方案，那么就整理一下我遇到这个问题然后一个可以参考的解决方案：
使用词云图的方法可以参考这篇文章： https://segmentfault.com/a/1190000023022232
如果上面的方式echarts设置颜色依然失效，也就是这段代码： ———————————————— 版权声明：本文为CSDN博主「_陈同学_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/Dan1374219106/article/details/115864750
textStyle: {
normal: {
fontFamily: '微软雅黑',
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 250),
Math.round(Math.random() * 250),
Math.round(Math.random() * 250)
].join(',') + ')';
}
}
},
目前我使用的是最新的版本：
"echarts": "^5.0.2",
我通过查看控制台的警告信息，知道现在新版本的echarts设置textStyle不需要写在normal里面了，也就是将对文本的设置直接写在textStyle里：
textStyle: {
fontFamily: '微软雅黑',
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 250),
Math.round(Math.random() * 250),
Math.round(Math.random() * 250)
].join(',') + ')';
}
},
实际上新版本的echarts的设置都不需要用到normal字段，例如柱状图、饼状图的的itemStyle等等
这样修改以后，随机颜色就可以设置成功了！