在echarts3中使用字符雲

echarts2的官方API里是帶有字符雲的,但到了echarts3就被從官網上移除了,想要使用的話可以從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.自己翻譯的簡易說明(供參考)

 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: {} } }] }] });