cxw-010203

components/word-cloud/index.js

@@ -22,60 +22,63 @@ Component({
       value: [],
     },
     lvl: {
-        type: [Number, String],
-        value: 18
+      type: [Number, String],
+      value: 18
     },
     color: {
-        type: String,
-        value: 'random-dark'
+      type: String,
+      value: 'random-dark'
     },
     canvasId: {
-        type: String,
-        value: 'myCanvas'
+      type: String,
+      value: 'myCanvas'
     }
   },
   lifetimes: {
-    attached: function() {
+    attached: function () {
       // 在组件实例进入页面节点树时执行
       const query = this.createSelectorQuery()
       query.select('#' + this.data.canvasId)
-        .fields({ node: true, size: true })
+        .fields({
+          node: true,
+          size: true
+        })
         .exec((res) => {
           this.setData({
-             canvas: res[0].node 
+            canvas: res[0].node
           })
-        //   this.data.canvas = res[0].node
+          //   this.data.canvas = res[0].node
         })
     },
   },
   observers: {
-    list(newVal)  {
-      if(!newVal || !Array.isArray(newVal) || newVal.length === 0) return
-      let { width, height, list,  wordData, color } = this.data
+    list(newVal) {
+      if (!newVal || !Array.isArray(newVal) || newVal.length === 0) return
+      let {
+        width,
+        height,
+        list,
+        wordData,
+        color
+      } = this.data
       list = newVal;
-      if (!width || isNaN(Number(width))) {
-        width = 375
-      } 
-      if (!height || isNaN(Number(height))) {
-        height = 450
-      }
       const dpr = wx.getSystemInfoSync().pixelRatio
       this.setData({
         options: {
-            "list": this.doData(list),
-            "gridSize": 10, // size of the grid in pixels
-            "weightFactor": 4, // number to multiply for size of each word in the list
-            "fontWeight": 'normal', // 'normal', 'bold' or a callback
-            "fontFamily": 'Times, serif', // font to use
-            "color": color, // 'random-dark' or 'random-light'
-            "backgroundColor": 'transparent', // the color of canvas
-            "rotateRatio": 0.2, // probability for the word to rotate. 1 means always 
-            "relativeScaling": 0.1,
-            "height": height * dpr,
-            "width": width * dpr
+          "list": this.doData(list),
+          "gridSize": 10, // size of the grid in pixels
+          "weightFactor": 4, // number to multiply for size of each word in the list
+          "fontWeight": 'normal', // 'normal', 'bold' or a callback
+          "fontFamily": 'Times, serif', // font to use
+          "color": color, // 'random-dark' or 'random-light'
+          "backgroundColor": 'transparent', // the color of canvas
+          "rotateRatio": 0.2, // probability for the word to rotate. 1 means always 
+          "relativeScaling": 0.1,
+          "height": height * dpr,
+          "width": 375 * dpr
         }
       })
-      setTimeout(()=>{
+      setTimeout(() => {
         if (this.data.canvas) {
           const wordCloud = new WordCloud(this.data.canvas, this.data.options)
           wordData = wordCloud.start()
@@ -95,15 +98,15 @@ Component({
     wordData: [],
     canvas: null,
     options: {
-        "list": [],
-        "gridSize": 10, // size of the grid in pixels
-        "weightFactor": 4, // number to multiply for size of each word in the list
-        "fontWeight": 'normal', // 'normal', 'bold' or a callback
-        "fontFamily": 'Times, serif', // font to use
-        "color": 'random-dark', // 'random-dark' or 'random-light'
-        "backgroundColor": 'transparent', // the color of canvas
-        "rotateRatio": 0.2, // probability for the word to rotate. 1 means always 
-        "relativeScaling": 0.1
+      "list": [],
+      "gridSize": 10, // size of the grid in pixels
+      "weightFactor": 4, // number to multiply for size of each word in the list
+      "fontWeight": 'normal', // 'normal', 'bold' or a callback
+      "fontFamily": 'Times, serif', // font to use
+      "color": 'random-dark', // 'random-dark' or 'random-light'
+      "backgroundColor": 'transparent', // the color of canvas
+      "rotateRatio": 0.2, // probability for the word to rotate. 1 means always 
+      "relativeScaling": 0.1
     }
   },
 
@@ -112,18 +115,23 @@ Component({
    */
   methods: {
     bindWord(event) {
-      const { detail }  = event.currentTarget.dataset
+      const {
+        detail
+      } = event.currentTarget.dataset
       this.triggerEvent('detail', detail);
     },
     doData(list = []) {
-      if(list.length === 0) {
-         return []
+      if (list.length === 0) {
+        return []
       }
       let arr = [];
-      let max = this.data.lvl;
       let maxVal = list[0][1];
+      let l = list.length;
+      let x = l / (375 * this.data.height)
+      let max = x * maxVal;
+      let y = 23 / max;
       list.forEach(ele => {
-        let a = [ele[0], ele[1] / maxVal * max];
+        let a = [ele[0], ele[1] * x * y];
         arr.push(a)
       })
       return arr;

components/word-cloud/index.wxss

@@ -6,7 +6,7 @@
 .wc-canvas {
     display: none;
     position: absolute;
-    width: 100%;
+    width: 375px;
     height: 100%;
     z-index: -1;
   }