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: [],
    },
    lvl: {
      type: [Number, String],
      value: 18
    },
    color: {
      type: String,
      value: 'random-dark'
    },
    canvasId: {
      type: String,
      value: 'myCanvas'
    }
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      const query = wx.createSelectorQuery()
      query.select('#' + this.data.canvasId)
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          this.setData({
            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;
      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": 375 * 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(arr1 = []) {
      if (arr1.length === 0) {
        return []
      }
      let list = this.doList(arr1);
      let arr = [];
      let maxVal = list[0][1];
      let minVal = list[list.length - 1][1];
      let l = list.length;
      let x = l / (375 * this.data.height)
      let fx = Math.sqrt(x);
      let max = fx * maxVal;
      let fy = maxVal / minVal;
      let fz = fy  >= 5 ? 5 : fy;
      let y = fz * 100/ max;
      list.forEach(ele => {
        let a = [ele[0], ele[1] * x * y ];
        arr.push(a)
      })
      return arr;
    },
    doList(arr = []) {
      let list = [];
      if(arr.length > 140) {
        list = arr.slice(139)
      } else {
        list = arr;
      }
      return list
    }
  }
})