echarts实现词云自定义形状

共计 3474 个字符，预计需要花费 9 分钟才能阅读完成。

需求：展示出云彩状的词云

安装

npm install echartsnpm install echarts-wordcloud

词云安装官网 https://github.com/ecomfe/ech…
引入到当前页面
import React from ‘react’;
import ‘echarts-wordcloud’;
import echarts from ‘echarts’;
class Wordcloudl extends React.Component{
componentDidMount() {
var myChart = echarts.init(document.getElementById(‘wordcloudl’));
var 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=’;

maskImage.onload = function(){
myChart.setOption({
backgroundColor:’#fff’,
tooltip: {
pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>’
},
series: [{
type: ‘wordCloud’,
gridSize: 1,
sizeRange: [12, 55],
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) + ‘)’
}
}
},
left: ‘center’,
top: ‘center’,
right: null,
bottom: null,
data:[
{
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
}]
}]
})
}
}
render () {
return(
<div>
<div id=’wordcloudl’ style={{height:400}}></div>
</div>
)
}
}
export default Wordcloudl;
如果没有看懂还有更多的地方可以参考：ecahrts 形状不一的词云：https://download.csdn.net/dow… 基于 ecahrts 的词云：https://blog.csdn.net/u013808…ecahrts 字符云：https://blog.csdn.net/shelbya…echarts 之词云随机颜色的配置：https://blog.csdn.net/IT_1692…