做数据分析时，免不了做各种各样的图表：柱状图，折线图，饼图，散点图……词云作为产品经理的心头好，经常的出现在各种报表中。今天我在做词云自定义形状的时候遇到了一个麻烦亟待解决~
写在前面的问题
自定义词云有的可以显示自定义图形有的却显示不了。经过研究发现是图片的原因。图片是base64格式，但是并不清楚哪些图片可以显示出来哪些图片显示不出来？希望各位大神不吝赐教~
绘制前的准备
在绘制前我们需要新建页面demo.html，而后在demo.html的中引入echarts.js控件。最后在demo.html中准备一个定义了高宽的 DOM 容器。
<head>
<script src="echarts.js"></script>
</head>
<body>
<div id="worldCloud" style="width:350px;height:350px;"></div>
</body>
开始绘制
基于准备好的dom,初始化echarts实例
var myWorldCloud = echarts.init(document.getElementById('worldCloud'));
指定图表的配置项和数据
title : {
text: '弹幕热词',
x:'10px',
top:'10px'
},
series : [
{
type : 'wordCloud', // 绘图类型为字符云
shape:'ellipse', // 整体字符云展现的图形,ellipse为椭圆形
gridSize : 1, // 文字间距
sizeRange : [ 10, 30 ], // 文字大小[最小，最大]
rotationRange: [-45, 0, 45, 90], // 旋转最大和最小角度
textStyle : {
normal : {
color : function() {
return 'rgb('
+ [ Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160) ]
.join(',') + ')';
}
},
emphasis : { // 鼠标划入样式
shadowBlur : 0, // 文字阴影模糊度
shadowColor : '#333' // 文字阴影颜色
}
},
data : data2.value // 数据
}
]
星形词云
通过配置我们得到了一个星形的词云。
之所以会出现星星形状，得益于配置项shape，shape的配置项有默认是 circle(圆形)，可选的参数有cardioid（心形） 、 diamond（菱形 正方形） 、 triangle-forward 、 triangle（三角形）、 star（星形）、pentagon （五边形）
这些形状都喜欢，如何自定义形状呢？
自定义词云
自带的配置项都不能满足要求，那么需要自己动手配置。 首先在data中定义需要的自定义图形。
图片需要base64格式，线上很多免费工具可用。
创建img对象，把自定义图片赋值给img.src。
var img = new Image();
img.src = data2.image;
再在series配置项中定义maskImage,maskImage指向新建的img对象。
series : [
{
type : 'wordCloud', // 绘图类型为字符云
// shape:'star', // 整体字符云展现的图形,ellipse为椭圆形
maskImage:img,//自定义图片
}
]
小花形状的自定义词云就出现啦~
help
那么到底什么样的图形不能正常显示呢？走过路过的大神教教小弟~
