echarts3中使用字符云报错_在echarts3中使用字符云

echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载:

下载地址:https://github.com/ecomfe/echarts-wordcloud

使用方法:

1.依次引入echarts.min.js和echarts-wordcloud.min.js(文件位置:下载的压缩包下dist/echarts-wordcloud.min.js);

2.自己翻译的简易说明(供参考)

width—字符云画布宽度

height—字符云画布宽度

maskImage—剪影图像，白色区域将被排除在绘图文本之外,形状选项将继续应用为云的形状。

如:

var maskImage = new Image();

//var world_option = world_cloud(eval('(' + '${cloud}' + ')'),maskImage);

var world_option = world_cloud(data,maskImage);

maskImage.onload = function () {

world_option.series[0].maskImage

worldChart.setOption(world_option);

}

maskImage.src = 'img/ren1.png';

gridSize—字符之间的间距(int)

sizeRange—字符的范围(array) rotationRange—字符倾斜的角度(array)   3.实例:

var chart = echarts.init(document.getElementById('main'));

chart.setOption({

...

series: [{

type: 'wordCloud',

// The shape of the "cloud" to draw. Can be any polar equation represented as a

// callback function, or a keyword present. Available presents are circle (default),

// cardioid (apple or heart shape curve, the most known polar equation), diamond (

// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

shape: 'circle',

// A silhouette image which the white area will be excluded from drawing texts.

// The shape option will continue to apply as the shape of the cloud to grow.

maskImage: maskImage,

// 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',

width: '70%',

height: '80%',

right: null,

bottom: null,

// Text size range which the value in data will be mapped to.

// Default to have minimum 12px and maximum 60px size.

sizeRange: [12, 60],

// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

rotationRange: [-90, 90],

rotationStep: 45,

// size of the grid in pixels for marking the availability of the canvas

// the larger the grid size, the bigger the gap between words.

gridSize: 8,

// set to true to allow word being draw partly outside of the canvas.

// Allow word bigger than the size of the canvas to be drawn

drawOutOfBound: false,

// Global text style

textStyle: {

normal: {

fontFamily: 'sans-serif',

fontWeight: 'bold',

// Color can be a callback function or a color string

color: function () {

// Random color

return 'rgb(' + [

Math.round(Math.random() * 160),

Math.round(Math.random() * 160),

Math.round(Math.random() * 160)

].join(',') + ')';

}

},

emphasis: {

shadowBlur: 10,

shadowColor: '#333'

}

},

// Data is an array. Each array item must have name and value property.

data: [{

name: 'Farrah Abraham',

value: 366,

// Style of single text

textStyle: {

normal: {},

emphasis: {}

}

}]

}]

});

作者：李文杨