Release 1.0

README.md

@@ -1,10 +1,10 @@
-# ECharts wordcloud extension based on wordcloud2.js
+# ECharts wordcloud extension based on [wordcloud2.js](https://github.com/timdream/wordcloud2.js)
 
 ### Install
 
 ```html
 <script src="echarts.min.js"></script>
-<script src="echarts-wordcloud.js"></script>
+<script src="echarts-wordcloud.min.js"></script>
 ```
 
 Or
@@ -21,13 +21,51 @@ require('echarts-wordcloud');
 ### Usage
 
 ```js
-
-...
+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: img,
+
+        // Folllowing left/top/width/height/right/bottom is used for positioning the area of 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,
+
+        // Data is an array. Each array item must has name and value property.
         data: [{
             name: 'Farrah Abraham',
             value: 366

dist/echarts-wordcloud.js

@@ -147,6 +147,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	                        || echarts.number.linearMap(value, valueExtent, sizeRange),
 	                    idx
 	                ];
+	            }).sort(function (a, b) {
+	                // Sort from large to small in case there is no more room for more words
+	                return b[1] - a[1];
 	            }),
 	            fontFamily: seriesModel.get('textStyle.normal.fontFamily')
 	                || seriesModel.get('textStyle.emphasis.fontFamily')
@@ -165,7 +168,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            rotateRatio: 1,
 
-	            rotationStep: seriesModel.get('rotationStep') * DEGREE_TO_RAD
+	            rotationStep: seriesModel.get('rotationStep') * DEGREE_TO_RAD,
+
+	            drawOutOfBound: false,
+
+	            shuffle: false
 	        });
 
 	        canvas.addEventListener('wordclouddrawn', function (e) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "echarts-wordcloud",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "ECharts wordcloud extension based on wordcloud2.js",
   "main": "index.js",
   "author": "",

src/wordCloud.js

@@ -85,6 +85,9 @@ echarts.registerLayout(function (ecModel, api) {
                         || echarts.number.linearMap(value, valueExtent, sizeRange),
                     idx
                 ];
+            }).sort(function (a, b) {
+                // Sort from large to small in case there is no more room for more words
+                return b[1] - a[1];
             }),
             fontFamily: seriesModel.get('textStyle.normal.fontFamily')
                 || seriesModel.get('textStyle.emphasis.fontFamily')
@@ -103,7 +106,11 @@ echarts.registerLayout(function (ecModel, api) {
 
             rotateRatio: 1,
 
-            rotationStep: seriesModel.get('rotationStep') * DEGREE_TO_RAD
+            rotationStep: seriesModel.get('rotationStep') * DEGREE_TO_RAD,
+
+            drawOutOfBound: false,
+
+            shuffle: false
         });
 
         canvas.addEventListener('wordclouddrawn', function (e) {

test/optionKeywords.html

@@ -1,7 +1,7 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <script src='https://cdn.bootcss.com/echarts/3.2.2/echarts.js'></script>
+        <script src='https://cdn.bootcss.com/echarts/3.2.2/echarts.simple.js'></script>
         <script src='../dist/echarts-wordcloud.js'></script>
     </head>
     <body>
@@ -388,7 +388,7 @@
                     },
                     data: data.sort(function (a, b) {
                         return b.value  - a.value;
-                    }).slice(0, 300)
+                    })
                 } ]
             };
 

test/wordCloud.html

@@ -1,7 +1,7 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <script src='https://cdn.bootcss.com/echarts/3.2.2/echarts.js'></script>
+        <script src='https://cdn.bootcss.com/echarts/3.2.2/echarts.simple.js'></script>
         <script src='../dist/echarts-wordcloud.js'></script>
     </head>
     <body>
@@ -21,8 +21,11 @@
                 series: [ {
                     type: 'wordCloud',
                     gridSize: 2,
-                    sizeRange: [12, 100],
-                    rotationRange: [0, 90],
+                    sizeRange: [12, 50],
+                    rotationRange: [-90, 90],
+                    shape: 'pentagon',
+                    width: 600,
+                    height: 400,
                     textStyle: {
                         normal: {
                             color: function () {