dev
xiaowen 3 years ago
parent fda21127f2
commit 3b1f3f67ed

@ -4,11 +4,13 @@ Component({
data: {
showTu: false,
skey: {
34: 2000,
3: 20000,
20: 60000,
4: 20000
}
34: 6000,
3: 50000,
20: 180000,
4: 50000
},
showTu1: false,
showTu2: false
// words:
},
lifetimes: {
@ -32,9 +34,6 @@ Component({
icon: 'loading',
duration: 300000
}),
this.setData({
showTu: false
})
Promise.all([this.getData1(sTimeType, sStartTime, sEndTime),
this.getData2(sTimeType, sStartTime, sEndTime),
this.getData3(sTimeType, sStartTime, sEndTime)
@ -42,9 +41,6 @@ Component({
setTimeout(() => {
wx.hideToast();
}, 500)
this.setData({
showTu: true
})
})
// this.getData1(sTimeType, sStartTime, sEndTime),
// this.getData2(sTimeType, sStartTime, sEndTime),
@ -53,6 +49,9 @@ Component({
},
//热门
getData1(sTimeType, sStartTime, sEndTime) {
this.setData({
showTu: false
})
return new Promise((resolve, reject) => {
let obj = {
action: 'getHotWordHome',
@ -61,15 +60,23 @@ Component({
sStartTime: sStartTime,
sEndTime: sEndTime
}
let skey = {
34: 6000,
3: 50000,
20: 180000,
4: 50000
}
app.globalData.request(obj).then(res => {
const data = res
const arr1 = []
Object.keys(data).forEach(key => {
let o = [key, data[key] / this.data.skey[sTimeType]]
let o = [key, data[key] / skey[sTimeType]]
arr1.push(o)
})
const resArr = arr1.slice(0,50)
this.setData({
HotWords: arr1
HotWords: resArr,
showTu: true
})
resolve(true)
})
@ -77,6 +84,9 @@ Component({
},
// 正面
getData2(sTimeType, sStartTime, sEndTime) {
this.setData({
showTu1: false
})
return new Promise((resolve, reject) => {
let obj = {
action: 'getPositive0528',
@ -85,15 +95,23 @@ Component({
sStartTime: sStartTime,
sEndTime: sEndTime
}
let skey = {
34: 6000,
3: 50000,
20: 180000,
4: 50000
}
app.globalData.request(obj).then(res => {
const data = res
const arr2 = []
Object.keys(data).forEach(key => {
let list = [key, data[key] / this.data.skey[sTimeType]]
let list = [key, data[key] / skey[sTimeType]]
arr2.push(list)
})
const resArr = arr2.slice(0,50)
this.setData({
PositiveWords: arr2
PositiveWords: resArr,
showTu1: true
})
resolve(true)
})
@ -102,6 +120,9 @@ Component({
},
// 负面
getData3(sTimeType, sStartTime, sEndTime) {
this.setData({
showTu2: false
})
return new Promise((resolve, reject) => {
let obj = {
action: 'getNegative0528',
@ -110,15 +131,24 @@ Component({
sStartTime: sStartTime,
sEndTime: sEndTime
}
let skey = {
34: 1000,
3: 8000,
20: 30000,
4: 10000
}
console.log(skey[sTimeType])
app.globalData.request(obj).then(res => {
const data = res
const arr3 = []
Object.keys(data).forEach(key => {
let list = [key, data[key] / this.data.skey[sTimeType]]
let list = [key, data[key] / skey[sTimeType]]
arr3.push(list)
})
const resArr = arr3.slice(0,50)
this.setData({
NegativeWords: arr3
NegativeWords: resArr,
showTu2: true
})
resolve(true)
})

@ -3,16 +3,16 @@
<time-component bindchange="changeTime"></time-component>
<view class="brand">
<view class="text" bindtap="a">热门词云</view>
<word-cloud wx:if="{{showTu}}" list="{{HotWords}}" width="100%" height="200"></word-cloud>
<word-cloud canvasId="w1" wx:if="{{showTu}}" list="{{HotWords}}" width="100%" height="200" color="#FF1C20"></word-cloud>
</view>
<view class="brand">
<view class="text">正面词云</view>
<view>
<word-cloud wx:if="{{showTu}}" class="wordtext" list="{{PositiveWords}}" width="680rpx" height="130"></word-cloud>
<word-cloud canvasId="w2" wx:if="{{showTu1}}" list="{{PositiveWords}}" width="100%" height="200" color="#0284FF"></word-cloud>
</view>
</view>
<view class="brand">
<view class="text">负面词云</view>
<word-cloud wx:if="{{showTu}}" class="wordtext" list="{{NegativeWords}}" width="680rpx" height="130"></word-cloud>
<word-cloud canvasId="w3" wx:if="{{showTu2}}" list="{{NegativeWords}}" width="100%" height="200" color="#8D830F"></word-cloud>
</view>
</view>

@ -1,6 +1,6 @@
const DEFAULT_SETTING = {
width: 750,
height: 700,
width: 376,
height: 200,
list: [],
fontFamily: '"Trebuchet MS", "Heiti TC", "微軟正黑體", ' +
'"Arial Unicode MS", "Droid Fallback Sans", sans-serif',
@ -11,7 +11,7 @@ const DEFAULT_SETTING = {
clearCanvas: true,
backgroundColor: '#fff', // opaque white = rgba(255, 255, 255, 1)
gridSize: 8,
gridSize: 10,
drawOutOfBound: false,
origin: null,
@ -30,7 +30,7 @@ const DEFAULT_SETTING = {
shuffle: true,
rotateRatio: 0.1,
shape: 'circle',
shape: 'square',
ellipticity: 0.65,
};

@ -1,16 +1,5 @@
// components/word-cloud/index.js
import WordCloud from './wordcloud'
const options = {
"list": [],
"gridSize": 2, // size of the grid in pixels
"weightFactor": 8, // 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": '#FF1C20', // 'random-dark' or 'random-light'
"backgroundColor": 'transparent', // the color of canvas
"rotateRatio": 0.2, // probability for the word to rotate. 1 means always
}
Component({
/**
* 组件的属性列表
@ -31,13 +20,21 @@ Component({
list: {
type: Array,
value: [],
},
color: {
type: String,
value: 'random-dark'
},
canvasId: {
type: String,
value: 'myCanvas'
}
},
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
const query = this.createSelectorQuery()
query.select('.wc-canvas')
query.select('#' + this.data.canvasId)
.fields({ node: true, size: true })
.exec((res) => {
this.data.canvas = res[0].node
@ -47,7 +44,7 @@ Component({
observers: {
list(newVal) {
if(!newVal || !Array.isArray(newVal) || newVal.length === 0) return
let { width, height, list, wordData } = this.data
let { width, height, list, wordData, color } = this.data
list = newVal;
if (!width || isNaN(Number(width))) {
width = 375
@ -56,14 +53,25 @@ Component({
height = 450
}
const dpr = wx.getSystemInfoSync().pixelRatio
options.height = height * dpr
options.width = width * dpr
options.list = list
this.setData({
options: {
"list": 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, options)
const wordCloud = new WordCloud(this.data.canvas, this.data.options)
wordData = wordCloud.start()
console.log(wordData)
this.setData({
wordData,
width,
@ -79,6 +87,17 @@ Component({
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
}
},
/**

@ -1,6 +1,8 @@
<canvas type="2d" id="myCanvas" class="wc-canvas"></canvas>
<view class="wc-main" style="width: {{ width ? width + 'px' : '100%' }};height: {{ height }}px; background-color: {{bgColor || '#fff'}};">
<block wx:for="{{wordData}}" wx:key="index">
<text class="wc-item" style="top:{{item.top}}rpx;left:{{ item.left }}rpx; transform:{{item.transform}};lineHeight:{{item.fontSize}}rpx;font:{{item.font}};color:{{item.color}};" catchtap="bindWord" data-detail="{{item}}" >{{ item.word }} </text>
</block>
<view>
<canvas type="2d" id="{{canvasId}}" class="wc-canvas"></canvas>
<view class="wc-main" style="width: {{ width ? width + 'px' : '100%' }};height: {{ height }}px; background-color: {{bgColor || '#fff'}};">
<block wx:for="{{wordData}}" wx:key="index">
<text class="wc-item" style="top:{{item.top}}rpx;left:{{ item.left }}rpx; transform:{{item.transform}};lineHeight:{{item.fontSize}}rpx;font:{{item.font}};color:{{item.color}};" catchtap="bindWord" data-detail="{{item}}">{{ item.word }} </text>
</block>
</view>
</view>

@ -6,7 +6,7 @@
.wc-main {
position: relative;
margin-left: -40%;
margin-top: 0px;
margin-top: -46px;
}
.wc-item {
white-space: nowrap;

Loading…
Cancel
Save