diff --git a/components/indexCom/atlasChild/index.js b/components/indexCom/atlasChild/index.js index 8272e8b..64ea8a6 100644 --- a/components/indexCom/atlasChild/index.js +++ b/components/indexCom/atlasChild/index.js @@ -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) }) diff --git a/components/indexCom/atlasChild/index.wxml b/components/indexCom/atlasChild/index.wxml index c5d1ffe..29b0891 100644 --- a/components/indexCom/atlasChild/index.wxml +++ b/components/indexCom/atlasChild/index.wxml @@ -3,16 +3,16 @@ 热门词云 - + 正面词云 - + 负面词云 - + \ No newline at end of file diff --git a/components/word-cloud/WordCloud.js b/components/word-cloud/WordCloud.js index bcfbcde..931ccd8 100644 --- a/components/word-cloud/WordCloud.js +++ b/components/word-cloud/WordCloud.js @@ -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, }; diff --git a/components/word-cloud/index.js b/components/word-cloud/index.js index 85316b1..d6c1d3d 100644 --- a/components/word-cloud/index.js +++ b/components/word-cloud/index.js @@ -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 + } }, /** diff --git a/components/word-cloud/index.wxml b/components/word-cloud/index.wxml index f01de20..ace84f1 100644 --- a/components/word-cloud/index.wxml +++ b/components/word-cloud/index.wxml @@ -1,6 +1,8 @@ - - - - {{ item.word }} - + + + + + {{ item.word }} + + \ No newline at end of file diff --git a/components/word-cloud/index.wxss b/components/word-cloud/index.wxss index 034c3d8..cff2cb6 100644 --- a/components/word-cloud/index.wxss +++ b/components/word-cloud/index.wxss @@ -6,7 +6,7 @@ .wc-main { position: relative; margin-left: -40%; - margin-top: 0px; + margin-top: -46px; } .wc-item { white-space: nowrap;