carInsightSystem_wxapp/components/word-cloud/index.js

// components/word-cloud/index.js
import WordCloud from './WordCloud'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    width: {
      type: Number,
      value: 375
    },
    height: {
      type: Number,
      value: 450
    },
    bgColor: {
      type: String,
      value: 'transparent',
    },
    list: {
      type: Array,
      value: [],
    },
    color: {
        type: String,
        value: 'random-dark'
    },
    canvasId: {
        type: String,
        value: 'myCanvas'
    }
  },
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      const query = this.createSelectorQuery()
      query.select('#' + this.data.canvasId)
        .fields({ node: true, size: true })
        .exec((res) => {
          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 (!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
        }
      })
      setTimeout(()=>{
        if (this.data.canvas) {
          const wordCloud = new WordCloud(this.data.canvas, this.data.options)
          wordData = wordCloud.start()
          this.setData({
            wordData,
            width,
            height,
          })
        }
      }, 500)
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    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
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    bindWord(event) {
      const { detail }  = event.currentTarget.dataset
      this.triggerEvent('detail', detail);
    },
    doData(list = []) {
      if(list.length === 0) {
         return []
      }
      let arr = [];
      let max = 18;
      let maxVal = list[0][1];
      list.forEach(ele => {
        let a = [ele[0], ele[1] / maxVal * max];
        arr.push(a)
      })
      return arr;
    }
  }
})