Echart 之词云 setOption配置说明

本文主要是介绍Echart 之词云 setOption配置说明，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用

还是正常的引入, 其他一切和Echart一样, 照旧

<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>

配置说明

chart.setOption({...series: [{type: 'wordCloud',/*绘制词云的形状, 值为回调函数 或 关键字, 默认 circle关键字:circle  圆形cardioid 心形diamond  菱形 正方形triangle-forward, triangle  三角形  pentagon 五边形star 星形*/shape: 'circle',// The shape option will continue to apply as the shape of the cloud to grow.//词云轮廓图，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串, 不包含白色区域; 可选选项// shape选项将随着云的形状增长而继续应用。maskImage: maskImage,// 词云整个图表放置的位置 和 尺寸大小left: 'center',top: 'center',width: '70%',height: '80%',right: null,bottom: null,//词云文本大小范围,  默认为最小12像素，最大60像素。sizeRange: [12, 60],// 词云文字旋转范围和步长。 文本将通过旋转在[-90，90]范围内随机旋转步骤45// 如果都设置为 0 , 则是水平显示rotationRange: [-90, 90],rotationStep: 45,// 词云文本之间的距离, 距离越大，单词之间的间距越大, 单位像素gridSize: 8,//设置为true可以使单词部分在画布之外绘制, 允许绘制大于画布大小的单词drawOutOfBound: false,// 文本样式textStyle: {normal: {fontFamily: 'sans-serif',fontWeight: 'bold',// 回调函数 或 颜色值color: function () {// 默认 随机颜色return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},// 鼠标hover的特效样式emphasis: {shadowBlur: 10,shadowColor: '#333'}},// data 数组格式, 必须有name和value属性, data: [{name: 'Farrah Abraham',value: 366,// 单独设置文本样式textStyle: {normal: {},emphasis: {}}}]}]
});