echarts2的官方API里是帶有字符云的,但到了echarts3就被從官網(wǎng)上移除了,想要使用的話(huà)可以從github上下載:

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

使用方法:

1.依次引入echarts.min.js和echarts-wordcloud.min.js(文件位置:下載的壓縮包下dist/echarts-wordcloud.min.js); <script src="echarts.min.js"></script> <script src="echarts-wordcloud.min.js"></script>

2.自己翻譯的簡(jiǎn)易說(shuō)明(供參考)

?width---字符云畫(huà)布寬度

?height---字符云畫(huà)布寬度

maskImage---剪影圖像，白色區(qū)域?qū)⒈慌懦诶L圖文本之外,形狀選項(xiàng)將繼續(xù)應(yīng)用為云的形狀。

如:

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.實(shí)例: 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 drawndrawOutOfBound: false,// Global text style textStyle: {normal: {fontFamily: 'sans-serif',fontWeight: 'bold',// Color can be a callback function or a color stringcolor: function () {// Random colorreturn '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: {}}}]}] });

?

轉(zhuǎn)載于:https://www.cnblogs.com/Smiled/p/7146550.html

總結(jié)

以上是生活随笔為你收集整理的在echarts3中使用字符云的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。