You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
3.7 KiB
154 lines
3.7 KiB
// 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
|
|
}
|
|
}
|
|
}) |