diff --git a/src/assets/images/carRound.png b/src/assets/images/carRound.png
new file mode 100644
index 0000000..ddd8114
Binary files /dev/null and b/src/assets/images/carRound.png differ
diff --git a/src/lycomponents/iHeaderBrand/index.vue b/src/lycomponents/iHeaderBrand/index.vue
index 536893c..5a08efd 100644
--- a/src/lycomponents/iHeaderBrand/index.vue
+++ b/src/lycomponents/iHeaderBrand/index.vue
@@ -24,13 +24,13 @@
菜单
-
+
{{ item.value }}
-
+
@@ -84,6 +84,8 @@ export default {
sStartTime: "",
sEndTime: "",
},
+ timeRange: [],
+ sTimeType: "",
selDatas: [],
//offsetDays: 86400000 * 30, //最多选择7天
timeShow: true
@@ -107,6 +109,12 @@ export default {
this.selTime = [this.form.sStartTime, this.form.sEndTime]
}
this.getSelect();
+ if(this.getCtime2.sTimeType) {
+ this.form.sTimeType = this.getCtime2.sTimeType;
+ if(this.getCtime2.sTimeType == 4) {
+ this.timeRange = [this.getCtime2.sStartTime, this.getCtime2.sEndTime]
+ }
+ }
},
mounted() {
this.intDt = self.setInterval(() => {
@@ -173,6 +181,7 @@ export default {
obj.key === "eventInsight"
) {
this.setHeaderType(3);
+
} else {
this.setHeaderType(1);
}
diff --git a/src/lycomponents/iSwitchEvent/index.vue b/src/lycomponents/iSwitchEvent/index.vue
index 739453a..4327bfc 100644
--- a/src/lycomponents/iSwitchEvent/index.vue
+++ b/src/lycomponents/iSwitchEvent/index.vue
@@ -75,7 +75,7 @@ export default {
height: auto;
background: #010b19;
.ec-footer {
- padding: 40px 0px;
+ padding: 10px 0px;
img {
width: 480px;
height: 80px;
@@ -84,7 +84,7 @@ export default {
}
.ec-d1 {
width: 100%;
- height: 190px;
+ height: 222px;
border: 2px solid #0f2a4d;
.ec-d1-inner {
width: 100%;
diff --git a/src/utils/gol/bubbleWord.js b/src/utils/gol/bubbleWord.js
index 3343dd2..2abd678 100644
--- a/src/utils/gol/bubbleWord.js
+++ b/src/utils/gol/bubbleWord.js
@@ -1,188 +1,74 @@
-/*
- * @Author: your name
- * @Date: 2021-10-21 11:36:36
- * @LastEditTime: 2021-11-25 11:07:14
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /data-show/src/utils/gol/bubbleWord.js
- */
-import { compare } from "./dataTool"
-import * as echarts from "echarts";
+require("./bubbleWord/echarts-wordcloud");
+
+let maskImage = new Image();
+maskImage.src = require('@/assets/images/carRound.png')
+let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
+
// 将后台数据转成数组
function doWordCloud(data) {
let arr1 = [];
for (let key in data) {
- let obj = { key: key, value: data[key] };
+ let obj = { name: key, value: data[key] };
arr1.push(obj);
}
return arr1;
}
-// 气泡大小算法
-function bubbleDivide(val, maxVal, size) {
- let percent = val / maxVal * 1.00;
- if (0.15 {
- temp.push(item[format[1]]);
- });
- maxValue = Math.max.apply(null, temp);
- // 气泡颜色数组
- let color = [
- {
- key: '#047ddc',
- fontColor: '#8ec0ea',
- value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(4, 60, 135, 1)'
- },
- {
- offset: 1,
- color: 'rgba(1, 11, 25, 1)'
- }
- ], false)
- },
- {
- key: '#a3951f',
- fontColor: '#a4a27f',
- value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(120, 124, 14, 1)'
- },
- {
- offset: 1,
- color: 'rgba(1, 11, 25, 1)'
- }
- ], false)
- },
- {
- key: '#01aa87',
- fontColor: '#99e5d5',
- value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(25, 137, 129, 1)'
- },
- {
- offset: 1,
- color: 'rgba(1, 11, 25, 1)'
- }
- ], false)
- }
-
- ];
- // 气泡颜色备份
- let bakeColor = [...color];
- // 气泡数据
- let bubbleData = [];
- let basicSize = 20; //基础大小
- let repulsion = 90; //斥力因子
- // 填充气泡数据数组bubbleData
- for (let item of data) {
- // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
- if (!bakeColor.length) bakeColor = [...color];
- let colorSet = new Set(bakeColor);
- let curIndex = Math.round(Math.random() * (colorSet.size - 1));
- let borderColor = bakeColor[curIndex].key;
- let curColor = bakeColor[curIndex].value;
- let fontColor = bakeColor[curIndex].fontColor;
- colorSet.delete(curColor);
- bakeColor = [...colorSet];
- // 气泡大小设置
- //let size = (item[format[1]] * basicSize * 2) / maxValue;
- let size = bubbleDivide(item[format[1]],maxValue,basicSize);
-
- bubbleData.push({
- name: item[format[0]],
- value: item[format[1]],
- symbolSize: size,
- draggable: true,
- label: {
- show: true,
- color: fontColor,
- fontSize: 12
- },
- itemStyle: {
- normal: {
- color: curColor,
- opacity: 0.8,
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowColor: "rgba(0,0,0,0.3)",
- borderType : 'solid',
- borderColor: borderColor,
- borderWidth: 1
- },
- },
- });
- }
- return {
- bubbleData,
- repulsion,
- };
-}
-
-// 创建词云图
-export default function createWordCloud(obj) {
- let bubble = null;
- if (Array.isArray(obj)) {
- bubble = bubbleChart(obj, ['key', 'value']);
+//创建词云
+export default function createWordCloud(data) {
+ let showData = null;
+ if (Array.isArray(data)) {
+ let words = [];
+ data.forEach(e => {
+ let o = {
+ name: e.key,
+ value: e.value
+ }
+ words.push(o)
+ })
+ showData = words;
} else {
- let words = doWordCloud(obj);
- words.sort(compare('value'));
- bubble = bubbleChart(words, ['key', 'value']);
+ let words = doWordCloud(data);
+ showData = words;
}
return {
- animationEasingUpdate: 'bounceIn',
- tooltip: {
- backgroundColor: "#08182F",
- color: "#fff",
- borderColor: "#3373CC",
+ tooltip: {},
+ series: [{
+ type: 'wordCloud',
+ gridSize: 5,
+ sizeRange: [8, 60],
+ rotationRange: [0, 0],
+ //shape: 'circle',
+ maskImage: maskImage,
+ width: 600,
+ height: 390,
+ left: 'center',
+ top: 'center',
+ right: null,
+ bottom: null,
+ drawOutOfBound: true,
textStyle: {
- color: "#fff", //设置文字颜色
+ fontFamily: 'sans-serif',
+ fontWeight: 'bold',
+ color: function () {
+ return colors[Math.floor((Math.random() * 8) + 0)];
+ // return 'rgb(' + [
+ // Math.round(Math.random() * 255),
+ // Math.round(Math.random() * 255),
+ // Math.round(Math.random() * 255)
+ // ].join(',') + ')';
+ }
},
- extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
- formatter: function (param) {
- let data = param.data;
- return `${data.name}
${data.value}`
- }
- },
- series: [{
- type: 'graph',
- layout: 'force',
- force: {
- gravity: 0.2,
- repulsion: bubble.repulsion,
- edgeLength: 10
+ emphasis: {
+ textStyle: {
+ shadowBlur: 100,
+ shadowColor: '#333'
+ }
},
- // 是否开启鼠标缩放和平移漫游
- roam: true,
- data: bubble.bubbleData
+ data: showData
+ // {
+ // name: 'Sam S Club',
+ // value: 10000,
+ // }
}]
}
}
\ No newline at end of file
diff --git a/src/utils/gol/bubbleWord/echarts-wordcloud.js b/src/utils/gol/bubbleWord/echarts-wordcloud.js
new file mode 100644
index 0000000..7e0dd0a
--- /dev/null
+++ b/src/utils/gol/bubbleWord/echarts-wordcloud.js
@@ -0,0 +1,1592 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+ if(typeof exports === 'object' && typeof module === 'object')
+ module.exports = factory(require("echarts"));
+ else if(typeof define === 'function' && define.amd)
+ define(["echarts"], factory);
+ else if(typeof exports === 'object')
+ exports["echarts-wordcloud"] = factory(require("echarts"));
+ else
+ root["echarts-wordcloud"] = factory(root["echarts"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE_echarts_lib_echarts__) {
+return /******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ({
+
+/***/ "./index.js":
+/*!******************************!*\
+ !*** ./index.js + 4 modules ***!
+ \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXTERNAL MODULE: external "echarts"
+var external_echarts_ = __webpack_require__("echarts/lib/echarts");
+;// CONCATENATED MODULE: ./src/WordCloudSeries.js
+
+
+external_echarts_.extendSeriesModel({
+
+ type: 'series.wordCloud',
+
+ visualStyleAccessPath: 'textStyle',
+ visualStyleMapper: function (model) {
+ return {
+ fill: model.get('color')
+ };
+ },
+ visualDrawType: 'fill',
+
+ optionUpdated: function () {
+ var option = this.option;
+ option.gridSize = Math.max(Math.floor(option.gridSize), 4);
+ },
+
+ getInitialData: function (option, ecModel) {
+ var dimensions = external_echarts_.helper.createDimensions(option.data, {
+ coordDimensions: ['value']
+ });
+ var list = new external_echarts_.List(dimensions, this);
+ list.initData(option.data);
+ return list;
+ },
+
+ // Most of options are from https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md
+ defaultOption: {
+
+ maskImage: null,
+
+ // Shape can be 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
+ shape: 'circle',
+
+ left: 'center',
+
+ top: 'center',
+
+ width: '70%',
+
+ height: '80%',
+
+ sizeRange: [12, 60],
+
+ rotationRange: [-90, 90],
+
+ rotationStep: 45,
+
+ gridSize: 8,
+
+ drawOutOfBound: false,
+
+ textStyle: {
+ fontWeight: 'normal'
+ }
+ }
+});
+
+;// CONCATENATED MODULE: ./src/WordCloudView.js
+
+
+external_echarts_.extendChartView({
+
+ type: 'wordCloud',
+
+ render: function (seriesModel, ecModel, api) {
+ var group = this.group;
+ group.removeAll();
+
+ var data = seriesModel.getData();
+
+ var gridSize = seriesModel.get('gridSize');
+
+ seriesModel.layoutInstance.ondraw = function (text, size, dataIdx, drawn) {
+ var itemModel = data.getItemModel(dataIdx);
+ var textStyleModel = itemModel.getModel('textStyle');
+
+ var textEl = new external_echarts_.graphic.Text({
+ style: external_echarts_.helper.createTextStyle(textStyleModel),
+ scaleX: 1 / drawn.info.mu,
+ scaleY: 1 / drawn.info.mu,
+ x: (drawn.gx + drawn.info.gw / 2) * gridSize,
+ y: (drawn.gy + drawn.info.gh / 2) * gridSize,
+ rotation: drawn.rot
+ });
+ textEl.setStyle({
+ x: drawn.info.fillTextOffsetX,
+ y: drawn.info.fillTextOffsetY + size * 0.5,
+ text: text,
+ verticalAlign: 'middle',
+ fill: data.getItemVisual(dataIdx, 'style').fill,
+ fontSize: size
+ });
+
+ group.add(textEl);
+
+ data.setItemGraphicEl(dataIdx, textEl);
+
+ textEl.ensureState('emphasis').style = external_echarts_.helper.createTextStyle(itemModel.getModel(['emphasis', 'textStyle']), {
+ state: 'emphasis'
+ });
+ textEl.ensureState('blur').style = external_echarts_.helper.createTextStyle(itemModel.getModel(['blur', 'textStyle']), {
+ state: 'blur'
+ });
+
+ external_echarts_.helper.enableHoverEmphasis(
+ textEl,
+ itemModel.get(['emphasis', 'focus']),
+ itemModel.get(['emphasis', 'blurScope'])
+ );
+
+ textEl.stateTransition = {
+ duration: seriesModel.get('animation') ? seriesModel.get(['stateAnimation', 'duration']) : 0,
+ easing: seriesModel.get(['stateAnimation', 'easing'])
+ };
+ // TODO
+ textEl.__highDownDispatcher = true;
+ };
+
+ this._model = seriesModel;
+ },
+
+ remove: function () {
+ this.group.removeAll();
+
+ this._model.layoutInstance.dispose();
+ },
+
+ dispose: function () {
+ this._model.layoutInstance.dispose();
+ }
+});
+
+;// CONCATENATED MODULE: ./src/layout.js
+/*!
+ * wordcloud2.js
+ * http://timdream.org/wordcloud2.js/
+ *
+ * Copyright 2011 - 2013 Tim Chien
+ * Released under the MIT license
+ */
+
+
+
+// setImmediate
+if (!window.setImmediate) {
+ window.setImmediate = (function setupSetImmediate() {
+ return window.msSetImmediate ||
+ window.webkitSetImmediate ||
+ window.mozSetImmediate ||
+ window.oSetImmediate ||
+ (function setupSetZeroTimeout() {
+ if (!window.postMessage || !window.addEventListener) {
+ return null;
+ }
+
+ var callbacks = [undefined];
+ var message = 'zero-timeout-message';
+
+ // Like setTimeout, but only takes a function argument. There's
+ // no time argument (always zero) and no arguments (you have to
+ // use a closure).
+ var setZeroTimeout = function setZeroTimeout(callback) {
+ var id = callbacks.length;
+ callbacks.push(callback);
+ window.postMessage(message + id.toString(36), '*');
+
+ return id;
+ };
+
+ window.addEventListener('message', function setZeroTimeoutMessage(evt) {
+ // Skipping checking event source, retarded IE confused this window
+ // object with another in the presence of iframe
+ if (typeof evt.data !== 'string' ||
+ evt.data.substr(0, message.length) !== message/* ||
+ evt.source !== window */) {
+ return;
+ }
+
+ evt.stopImmediatePropagation();
+
+ var id = parseInt(evt.data.substr(message.length), 36);
+ if (!callbacks[id]) {
+ return;
+ }
+
+ callbacks[id]();
+ callbacks[id] = undefined;
+ }, true);
+
+ /* specify clearImmediate() here since we need the scope */
+ window.clearImmediate = function clearZeroTimeout(id) {
+ if (!callbacks[id]) {
+ return;
+ }
+
+ callbacks[id] = undefined;
+ };
+
+ return setZeroTimeout;
+ })() ||
+ // fallback
+ function setImmediateFallback(fn) {
+ window.setTimeout(fn, 0);
+ };
+ })();
+}
+
+if (!window.clearImmediate) {
+ window.clearImmediate = (function setupClearImmediate() {
+ return window.msClearImmediate ||
+ window.webkitClearImmediate ||
+ window.mozClearImmediate ||
+ window.oClearImmediate ||
+ // "clearZeroTimeout" is implement on the previous block ||
+ // fallback
+ function clearImmediateFallback(timer) {
+ window.clearTimeout(timer);
+ };
+ })();
+}
+
+ // Check if WordCloud can run on this browser
+ var isSupported = (function isSupported() {
+ var canvas = document.createElement('canvas');
+ if (!canvas || !canvas.getContext) {
+ return false;
+ }
+
+ var ctx = canvas.getContext('2d');
+ if (!ctx.getImageData) {
+ return false;
+ }
+ if (!ctx.fillText) {
+ return false;
+ }
+
+ if (!Array.prototype.some) {
+ return false;
+ }
+ if (!Array.prototype.push) {
+ return false;
+ }
+
+ return true;
+ }());
+
+ // Find out if the browser impose minium font size by
+ // drawing small texts on a canvas and measure it's width.
+ var minFontSize = (function getMinFontSize() {
+ if (!isSupported) {
+ return;
+ }
+
+ var ctx = document.createElement('canvas').getContext('2d');
+
+ // start from 20
+ var size = 20;
+
+ // two sizes to measure
+ var hanWidth, mWidth;
+
+ while (size) {
+ ctx.font = size.toString(10) + 'px sans-serif';
+ if ((ctx.measureText('\uFF37').width === hanWidth) &&
+ (ctx.measureText('m').width) === mWidth) {
+ return (size + 1);
+ }
+
+ hanWidth = ctx.measureText('\uFF37').width;
+ mWidth = ctx.measureText('m').width;
+
+ size--;
+ }
+
+ return 0;
+ })();
+
+ // Based on http://jsfromhell.com/array/shuffle
+ var shuffleArray = function shuffleArray(arr) {
+ for (var j, x, i = arr.length; i;
+ j = Math.floor(Math.random() * i),
+ x = arr[--i], arr[i] = arr[j],
+ arr[j] = x) {}
+ return arr;
+ };
+
+ var WordCloud = function WordCloud(elements, options) {
+ if (!isSupported) {
+ return;
+ }
+
+ if (!Array.isArray(elements)) {
+ elements = [elements];
+ }
+
+ elements.forEach(function(el, i) {
+ if (typeof el === 'string') {
+ elements[i] = document.getElementById(el);
+ if (!elements[i]) {
+ throw 'The element id specified is not found.';
+ }
+ } else if (!el.tagName && !el.appendChild) {
+ throw 'You must pass valid HTML elements, or ID of the element.';
+ }
+ });
+
+ /* Default values to be overwritten by options object */
+ var settings = {
+ list: [],
+ fontFamily: '"Trebuchet MS", "Heiti TC", "微軟正黑體", ' +
+ '"Arial Unicode MS", "Droid Fallback Sans", sans-serif',
+ fontWeight: 'normal',
+ color: 'random-dark',
+ minSize: 0, // 0 to disable
+ weightFactor: 1,
+ clearCanvas: true,
+ backgroundColor: '#fff', // opaque white = rgba(255, 255, 255, 1)
+
+ gridSize: 8,
+ drawOutOfBound: false,
+ origin: null,
+
+ drawMask: false,
+ maskColor: 'rgba(255,0,0,0.3)',
+ maskGapWidth: 0.3,
+
+ layoutAnimation: true,
+
+ wait: 0,
+ abortThreshold: 0, // disabled
+ abort: function noop() {},
+
+ minRotation: - Math.PI / 2,
+ maxRotation: Math.PI / 2,
+ rotationStep: 0.1,
+
+ shuffle: true,
+ rotateRatio: 0.1,
+
+ shape: 'circle',
+ ellipticity: 0.65,
+
+ classes: null,
+
+ hover: null,
+ click: null
+ };
+
+ if (options) {
+ for (var key in options) {
+ if (key in settings) {
+ settings[key] = options[key];
+ }
+ }
+ }
+
+ /* Convert weightFactor into a function */
+ if (typeof settings.weightFactor !== 'function') {
+ var factor = settings.weightFactor;
+ settings.weightFactor = function weightFactor(pt) {
+ return pt * factor; //in px
+ };
+ }
+
+ /* Convert shape into a function */
+ if (typeof settings.shape !== 'function') {
+ switch (settings.shape) {
+ case 'circle':
+ /* falls through */
+ default:
+ // 'circle' is the default and a shortcut in the code loop.
+ settings.shape = 'circle';
+ break;
+
+ case 'cardioid':
+ settings.shape = function shapeCardioid(theta) {
+ return 1 - Math.sin(theta);
+ };
+ break;
+
+ /*
+ To work out an X-gon, one has to calculate "m",
+ where 1/(cos(2*PI/X)+m*sin(2*PI/X)) = 1/(cos(0)+m*sin(0))
+ http://www.wolframalpha.com/input/?i=1%2F%28cos%282*PI%2FX%29%2Bm*sin%28
+ 2*PI%2FX%29%29+%3D+1%2F%28cos%280%29%2Bm*sin%280%29%29
+ Copy the solution into polar equation r = 1/(cos(t') + m*sin(t'))
+ where t' equals to mod(t, 2PI/X);
+ */
+
+ case 'diamond':
+ case 'square':
+ // http://www.wolframalpha.com/input/?i=plot+r+%3D+1%2F%28cos%28mod+
+ // %28t%2C+PI%2F2%29%29%2Bsin%28mod+%28t%2C+PI%2F2%29%29%29%2C+t+%3D
+ // +0+..+2*PI
+ settings.shape = function shapeSquare(theta) {
+ var thetaPrime = theta % (2 * Math.PI / 4);
+ return 1 / (Math.cos(thetaPrime) + Math.sin(thetaPrime));
+ };
+ break;
+
+ case 'triangle-forward':
+ // http://www.wolframalpha.com/input/?i=plot+r+%3D+1%2F%28cos%28mod+
+ // %28t%2C+2*PI%2F3%29%29%2Bsqrt%283%29sin%28mod+%28t%2C+2*PI%2F3%29
+ // %29%29%2C+t+%3D+0+..+2*PI
+ settings.shape = function shapeTriangle(theta) {
+ var thetaPrime = theta % (2 * Math.PI / 3);
+ return 1 / (Math.cos(thetaPrime) +
+ Math.sqrt(3) * Math.sin(thetaPrime));
+ };
+ break;
+
+ case 'triangle':
+ case 'triangle-upright':
+ settings.shape = function shapeTriangle(theta) {
+ var thetaPrime = (theta + Math.PI * 3 / 2) % (2 * Math.PI / 3);
+ return 1 / (Math.cos(thetaPrime) +
+ Math.sqrt(3) * Math.sin(thetaPrime));
+ };
+ break;
+
+ case 'pentagon':
+ settings.shape = function shapePentagon(theta) {
+ var thetaPrime = (theta + 0.955) % (2 * Math.PI / 5);
+ return 1 / (Math.cos(thetaPrime) +
+ 0.726543 * Math.sin(thetaPrime));
+ };
+ break;
+
+ case 'star':
+ settings.shape = function shapeStar(theta) {
+ var thetaPrime = (theta + 0.955) % (2 * Math.PI / 10);
+ if ((theta + 0.955) % (2 * Math.PI / 5) - (2 * Math.PI / 10) >= 0) {
+ return 1 / (Math.cos((2 * Math.PI / 10) - thetaPrime) +
+ 3.07768 * Math.sin((2 * Math.PI / 10) - thetaPrime));
+ } else {
+ return 1 / (Math.cos(thetaPrime) +
+ 3.07768 * Math.sin(thetaPrime));
+ }
+ };
+ break;
+ }
+ }
+
+ /* Make sure gridSize is a whole number and is not smaller than 4px */
+ settings.gridSize = Math.max(Math.floor(settings.gridSize), 4);
+
+ /* shorthand */
+ var g = settings.gridSize;
+ var maskRectWidth = g - settings.maskGapWidth;
+
+ /* normalize rotation settings */
+ var rotationRange = Math.abs(settings.maxRotation - settings.minRotation);
+ var minRotation = Math.min(settings.maxRotation, settings.minRotation);
+ var rotationStep = settings.rotationStep;
+
+ /* information/object available to all functions, set when start() */
+ var grid, // 2d array containing filling information
+ ngx, ngy, // width and height of the grid
+ center, // position of the center of the cloud
+ maxRadius;
+
+ /* timestamp for measuring each putWord() action */
+ var escapeTime;
+
+ /* function for getting the color of the text */
+ var getTextColor;
+ function random_hsl_color(min, max) {
+ return 'hsl(' +
+ (Math.random() * 360).toFixed() + ',' +
+ (Math.random() * 30 + 70).toFixed() + '%,' +
+ (Math.random() * (max - min) + min).toFixed() + '%)';
+ }
+ switch (settings.color) {
+ case 'random-dark':
+ getTextColor = function getRandomDarkColor() {
+ return random_hsl_color(10, 50);
+ };
+ break;
+
+ case 'random-light':
+ getTextColor = function getRandomLightColor() {
+ return random_hsl_color(50, 90);
+ };
+ break;
+
+ default:
+ if (typeof settings.color === 'function') {
+ getTextColor = settings.color;
+ }
+ break;
+ }
+
+ /* function for getting the classes of the text */
+ var getTextClasses = null;
+ if (typeof settings.classes === 'function') {
+ getTextClasses = settings.classes;
+ }
+
+ /* Interactive */
+ var interactive = false;
+ var infoGrid = [];
+ var hovered;
+
+ var getInfoGridFromMouseTouchEvent =
+ function getInfoGridFromMouseTouchEvent(evt) {
+ var canvas = evt.currentTarget;
+ var rect = canvas.getBoundingClientRect();
+ var clientX;
+ var clientY;
+ /** Detect if touches are available */
+ if (evt.touches) {
+ clientX = evt.touches[0].clientX;
+ clientY = evt.touches[0].clientY;
+ } else {
+ clientX = evt.clientX;
+ clientY = evt.clientY;
+ }
+ var eventX = clientX - rect.left;
+ var eventY = clientY - rect.top;
+
+ var x = Math.floor(eventX * ((canvas.width / rect.width) || 1) / g);
+ var y = Math.floor(eventY * ((canvas.height / rect.height) || 1) / g);
+
+ return infoGrid[x][y];
+ };
+
+ var wordcloudhover = function wordcloudhover(evt) {
+ var info = getInfoGridFromMouseTouchEvent(evt);
+
+ if (hovered === info) {
+ return;
+ }
+
+ hovered = info;
+ if (!info) {
+ settings.hover(undefined, undefined, evt);
+
+ return;
+ }
+
+ settings.hover(info.item, info.dimension, evt);
+
+ };
+
+ var wordcloudclick = function wordcloudclick(evt) {
+ var info = getInfoGridFromMouseTouchEvent(evt);
+ if (!info) {
+ return;
+ }
+
+ settings.click(info.item, info.dimension, evt);
+ evt.preventDefault();
+ };
+
+ /* Get points on the grid for a given radius away from the center */
+ var pointsAtRadius = [];
+ var getPointsAtRadius = function getPointsAtRadius(radius) {
+ if (pointsAtRadius[radius]) {
+ return pointsAtRadius[radius];
+ }
+
+ // Look for these number of points on each radius
+ var T = radius * 8;
+
+ // Getting all the points at this radius
+ var t = T;
+ var points = [];
+
+ if (radius === 0) {
+ points.push([center[0], center[1], 0]);
+ }
+
+ while (t--) {
+ // distort the radius to put the cloud in shape
+ var rx = 1;
+ if (settings.shape !== 'circle') {
+ rx = settings.shape(t / T * 2 * Math.PI); // 0 to 1
+ }
+
+ // Push [x, y, t]; t is used solely for getTextColor()
+ points.push([
+ center[0] + radius * rx * Math.cos(-t / T * 2 * Math.PI),
+ center[1] + radius * rx * Math.sin(-t / T * 2 * Math.PI) *
+ settings.ellipticity,
+ t / T * 2 * Math.PI]);
+ }
+
+ pointsAtRadius[radius] = points;
+ return points;
+ };
+
+ /* Return true if we had spent too much time */
+ var exceedTime = function exceedTime() {
+ return ((settings.abortThreshold > 0) &&
+ ((new Date()).getTime() - escapeTime > settings.abortThreshold));
+ };
+
+ /* Get the deg of rotation according to settings, and luck. */
+ var getRotateDeg = function getRotateDeg() {
+ if (settings.rotateRatio === 0) {
+ return 0;
+ }
+
+ if (Math.random() > settings.rotateRatio) {
+ return 0;
+ }
+
+ if (rotationRange === 0) {
+ return minRotation;
+ }
+
+ return minRotation + Math.round(Math.random() * rotationRange / rotationStep) * rotationStep;
+ };
+
+ var getTextInfo = function getTextInfo(word, weight, rotateDeg) {
+ // calculate the acutal font size
+ // fontSize === 0 means weightFactor function wants the text skipped,
+ // and size < minSize means we cannot draw the text.
+ var debug = false;
+ var fontSize = settings.weightFactor(weight);
+ if (fontSize <= settings.minSize) {
+ return false;
+ }
+
+ // Scale factor here is to make sure fillText is not limited by
+ // the minium font size set by browser.
+ // It will always be 1 or 2n.
+ var mu = 1;
+ if (fontSize < minFontSize) {
+ mu = (function calculateScaleFactor() {
+ var mu = 2;
+ while (mu * fontSize < minFontSize) {
+ mu += 2;
+ }
+ return mu;
+ })();
+ }
+
+ var fcanvas = document.createElement('canvas');
+ var fctx = fcanvas.getContext('2d', { willReadFrequently: true });
+
+ fctx.font = settings.fontWeight + ' ' +
+ (fontSize * mu).toString(10) + 'px ' + settings.fontFamily;
+
+ // Estimate the dimension of the text with measureText().
+ var fw = fctx.measureText(word).width / mu;
+ var fh = Math.max(fontSize * mu,
+ fctx.measureText('m').width,
+ fctx.measureText('\uFF37').width) / mu;
+
+ // Create a boundary box that is larger than our estimates,
+ // so text don't get cut of (it sill might)
+ var boxWidth = fw + fh * 2;
+ var boxHeight = fh * 3;
+ var fgw = Math.ceil(boxWidth / g);
+ var fgh = Math.ceil(boxHeight / g);
+ boxWidth = fgw * g;
+ boxHeight = fgh * g;
+
+ // Calculate the proper offsets to make the text centered at
+ // the preferred position.
+
+ // This is simply half of the width.
+ var fillTextOffsetX = - fw / 2;
+ // Instead of moving the box to the exact middle of the preferred
+ // position, for Y-offset we move 0.4 instead, so Latin alphabets look
+ // vertical centered.
+ var fillTextOffsetY = - fh * 0.4;
+
+ // Calculate the actual dimension of the canvas, considering the rotation.
+ var cgh = Math.ceil((boxWidth * Math.abs(Math.sin(rotateDeg)) +
+ boxHeight * Math.abs(Math.cos(rotateDeg))) / g);
+ var cgw = Math.ceil((boxWidth * Math.abs(Math.cos(rotateDeg)) +
+ boxHeight * Math.abs(Math.sin(rotateDeg))) / g);
+ var width = cgw * g;
+ var height = cgh * g;
+
+ fcanvas.setAttribute('width', width);
+ fcanvas.setAttribute('height', height);
+
+ if (debug) {
+ // Attach fcanvas to the DOM
+ document.body.appendChild(fcanvas);
+ // Save it's state so that we could restore and draw the grid correctly.
+ fctx.save();
+ }
+
+ // Scale the canvas with |mu|.
+ fctx.scale(1 / mu, 1 / mu);
+ fctx.translate(width * mu / 2, height * mu / 2);
+ fctx.rotate(- rotateDeg);
+
+ // Once the width/height is set, ctx info will be reset.
+ // Set it again here.
+ fctx.font = settings.fontWeight + ' ' +
+ (fontSize * mu).toString(10) + 'px ' + settings.fontFamily;
+
+ // Fill the text into the fcanvas.
+ // XXX: We cannot because textBaseline = 'top' here because
+ // Firefox and Chrome uses different default line-height for canvas.
+ // Please read https://bugzil.la/737852#c6.
+ // Here, we use textBaseline = 'middle' and draw the text at exactly
+ // 0.5 * fontSize lower.
+ fctx.fillStyle = '#000';
+ fctx.textBaseline = 'middle';
+ fctx.fillText(word, fillTextOffsetX * mu,
+ (fillTextOffsetY + fontSize * 0.5) * mu);
+
+ // Get the pixels of the text
+ var imageData = fctx.getImageData(0, 0, width, height).data;
+
+ if (exceedTime()) {
+ return false;
+ }
+
+ if (debug) {
+ // Draw the box of the original estimation
+ fctx.strokeRect(fillTextOffsetX * mu,
+ fillTextOffsetY, fw * mu, fh * mu);
+ fctx.restore();
+ }
+
+ // Read the pixels and save the information to the occupied array
+ var occupied = [];
+ var gx = cgw, gy, x, y;
+ var bounds = [cgh / 2, cgw / 2, cgh / 2, cgw / 2];
+ while (gx--) {
+ gy = cgh;
+ while (gy--) {
+ y = g;
+ singleGridLoop: {
+ while (y--) {
+ x = g;
+ while (x--) {
+ if (imageData[((gy * g + y) * width +
+ (gx * g + x)) * 4 + 3]) {
+ occupied.push([gx, gy]);
+
+ if (gx < bounds[3]) {
+ bounds[3] = gx;
+ }
+ if (gx > bounds[1]) {
+ bounds[1] = gx;
+ }
+ if (gy < bounds[0]) {
+ bounds[0] = gy;
+ }
+ if (gy > bounds[2]) {
+ bounds[2] = gy;
+ }
+
+ if (debug) {
+ fctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ fctx.fillRect(gx * g, gy * g, g - 0.5, g - 0.5);
+ }
+ break singleGridLoop;
+ }
+ }
+ }
+ if (debug) {
+ fctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
+ fctx.fillRect(gx * g, gy * g, g - 0.5, g - 0.5);
+ }
+ }
+ }
+ }
+
+ if (debug) {
+ fctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ fctx.fillRect(bounds[3] * g,
+ bounds[0] * g,
+ (bounds[1] - bounds[3] + 1) * g,
+ (bounds[2] - bounds[0] + 1) * g);
+ }
+
+ // Return information needed to create the text on the real canvas
+ return {
+ mu: mu,
+ occupied: occupied,
+ bounds: bounds,
+ gw: cgw,
+ gh: cgh,
+ fillTextOffsetX: fillTextOffsetX,
+ fillTextOffsetY: fillTextOffsetY,
+ fillTextWidth: fw,
+ fillTextHeight: fh,
+ fontSize: fontSize
+ };
+ };
+
+ /* Determine if there is room available in the given dimension */
+ var canFitText = function canFitText(gx, gy, gw, gh, occupied) {
+ // Go through the occupied points,
+ // return false if the space is not available.
+ var i = occupied.length;
+ while (i--) {
+ var px = gx + occupied[i][0];
+ var py = gy + occupied[i][1];
+
+ if (px >= ngx || py >= ngy || px < 0 || py < 0) {
+ if (!settings.drawOutOfBound) {
+ return false;
+ }
+ continue;
+ }
+
+ if (!grid[px][py]) {
+ return false;
+ }
+ }
+ return true;
+ };
+
+ /* Actually draw the text on the grid */
+ var drawText = function drawText(gx, gy, info, word, weight,
+ distance, theta, rotateDeg, attributes) {
+
+ var fontSize = info.fontSize;
+ var color;
+ if (getTextColor) {
+ color = getTextColor(word, weight, fontSize, distance, theta);
+ } else {
+ color = settings.color;
+ }
+
+ var classes;
+ if (getTextClasses) {
+ classes = getTextClasses(word, weight, fontSize, distance, theta);
+ } else {
+ classes = settings.classes;
+ }
+
+ var dimension;
+ var bounds = info.bounds;
+ dimension = {
+ x: (gx + bounds[3]) * g,
+ y: (gy + bounds[0]) * g,
+ w: (bounds[1] - bounds[3] + 1) * g,
+ h: (bounds[2] - bounds[0] + 1) * g
+ };
+
+ elements.forEach(function(el) {
+ if (el.getContext) {
+ var ctx = el.getContext('2d');
+ var mu = info.mu;
+
+ // Save the current state before messing it
+ ctx.save();
+ ctx.scale(1 / mu, 1 / mu);
+
+ ctx.font = settings.fontWeight + ' ' +
+ (fontSize * mu).toString(10) + 'px ' + settings.fontFamily;
+ ctx.fillStyle = color;
+
+ // Translate the canvas position to the origin coordinate of where
+ // the text should be put.
+ ctx.translate((gx + info.gw / 2) * g * mu,
+ (gy + info.gh / 2) * g * mu);
+
+ if (rotateDeg !== 0) {
+ ctx.rotate(- rotateDeg);
+ }
+
+ // Finally, fill the text.
+
+ // XXX: We cannot because textBaseline = 'top' here because
+ // Firefox and Chrome uses different default line-height for canvas.
+ // Please read https://bugzil.la/737852#c6.
+ // Here, we use textBaseline = 'middle' and draw the text at exactly
+ // 0.5 * fontSize lower.
+ ctx.textBaseline = 'middle';
+ ctx.fillText(word, info.fillTextOffsetX * mu,
+ (info.fillTextOffsetY + fontSize * 0.5) * mu);
+
+ // The below box is always matches how s are positioned
+ /* ctx.strokeRect(info.fillTextOffsetX, info.fillTextOffsetY,
+ info.fillTextWidth, info.fillTextHeight); */
+
+ // Restore the state.
+ ctx.restore();
+ } else {
+ // drawText on DIV element
+ var span = document.createElement('span');
+ var transformRule = '';
+ transformRule = 'rotate(' + (- rotateDeg / Math.PI * 180) + 'deg) ';
+ if (info.mu !== 1) {
+ transformRule +=
+ 'translateX(-' + (info.fillTextWidth / 4) + 'px) ' +
+ 'scale(' + (1 / info.mu) + ')';
+ }
+ var styleRules = {
+ 'position': 'absolute',
+ 'display': 'block',
+ 'font': settings.fontWeight + ' ' +
+ (fontSize * info.mu) + 'px ' + settings.fontFamily,
+ 'left': ((gx + info.gw / 2) * g + info.fillTextOffsetX) + 'px',
+ 'top': ((gy + info.gh / 2) * g + info.fillTextOffsetY) + 'px',
+ 'width': info.fillTextWidth + 'px',
+ 'height': info.fillTextHeight + 'px',
+ 'lineHeight': fontSize + 'px',
+ 'whiteSpace': 'nowrap',
+ 'transform': transformRule,
+ 'webkitTransform': transformRule,
+ 'msTransform': transformRule,
+ 'transformOrigin': '50% 40%',
+ 'webkitTransformOrigin': '50% 40%',
+ 'msTransformOrigin': '50% 40%'
+ };
+ if (color) {
+ styleRules.color = color;
+ }
+ span.textContent = word;
+ for (var cssProp in styleRules) {
+ span.style[cssProp] = styleRules[cssProp];
+ }
+ if (attributes) {
+ for (var attribute in attributes) {
+ span.setAttribute(attribute, attributes[attribute]);
+ }
+ }
+ if (classes) {
+ span.className += classes;
+ }
+ el.appendChild(span);
+ }
+ });
+ };
+
+ /* Help function to updateGrid */
+ var fillGridAt = function fillGridAt(x, y, drawMask, dimension, item) {
+ if (x >= ngx || y >= ngy || x < 0 || y < 0) {
+ return;
+ }
+
+ grid[x][y] = false;
+
+ if (drawMask) {
+ var ctx = elements[0].getContext('2d');
+ ctx.fillRect(x * g, y * g, maskRectWidth, maskRectWidth);
+ }
+
+ if (interactive) {
+ infoGrid[x][y] = { item: item, dimension: dimension };
+ }
+ };
+
+ /* Update the filling information of the given space with occupied points.
+ Draw the mask on the canvas if necessary. */
+ var updateGrid = function updateGrid(gx, gy, gw, gh, info, item) {
+ var occupied = info.occupied;
+ var drawMask = settings.drawMask;
+ var ctx;
+ if (drawMask) {
+ ctx = elements[0].getContext('2d');
+ ctx.save();
+ ctx.fillStyle = settings.maskColor;
+ }
+
+ var dimension;
+ if (interactive) {
+ var bounds = info.bounds;
+ dimension = {
+ x: (gx + bounds[3]) * g,
+ y: (gy + bounds[0]) * g,
+ w: (bounds[1] - bounds[3] + 1) * g,
+ h: (bounds[2] - bounds[0] + 1) * g
+ };
+ }
+
+ var i = occupied.length;
+ while (i--) {
+ var px = gx + occupied[i][0];
+ var py = gy + occupied[i][1];
+
+ if (px >= ngx || py >= ngy || px < 0 || py < 0) {
+ continue;
+ }
+
+ fillGridAt(px, py, drawMask, dimension, item);
+ }
+
+ if (drawMask) {
+ ctx.restore();
+ }
+ };
+
+ /* putWord() processes each item on the list,
+ calculate it's size and determine it's position, and actually
+ put it on the canvas. */
+ var putWord = function putWord(item) {
+ var word, weight, attributes;
+ if (Array.isArray(item)) {
+ word = item[0];
+ weight = item[1];
+ } else {
+ word = item.word;
+ weight = item.weight;
+ attributes = item.attributes;
+ }
+ var rotateDeg = getRotateDeg();
+
+ // get info needed to put the text onto the canvas
+ var info = getTextInfo(word, weight, rotateDeg);
+
+ // not getting the info means we shouldn't be drawing this one.
+ if (!info) {
+ return false;
+ }
+
+ if (exceedTime()) {
+ return false;
+ }
+
+ // If drawOutOfBound is set to false,
+ // skip the loop if we have already know the bounding box of
+ // word is larger than the canvas.
+ if (!settings.drawOutOfBound) {
+ var bounds = info.bounds;
+ if ((bounds[1] - bounds[3] + 1) > ngx ||
+ (bounds[2] - bounds[0] + 1) > ngy) {
+ return false;
+ }
+ }
+
+ // Determine the position to put the text by
+ // start looking for the nearest points
+ var r = maxRadius + 1;
+
+ var tryToPutWordAtPoint = function(gxy) {
+ var gx = Math.floor(gxy[0] - info.gw / 2);
+ var gy = Math.floor(gxy[1] - info.gh / 2);
+ var gw = info.gw;
+ var gh = info.gh;
+
+ // If we cannot fit the text at this position, return false
+ // and go to the next position.
+ if (!canFitText(gx, gy, gw, gh, info.occupied)) {
+ return false;
+ }
+
+ // Actually put the text on the canvas
+ drawText(gx, gy, info, word, weight,
+ (maxRadius - r), gxy[2], rotateDeg, attributes);
+
+ // Mark the spaces on the grid as filled
+ updateGrid(gx, gy, gw, gh, info, item);
+
+ return {
+ gx: gx,
+ gy: gy,
+ rot: rotateDeg,
+ info: info
+ };
+ };
+
+ while (r--) {
+ var points = getPointsAtRadius(maxRadius - r);
+
+ if (settings.shuffle) {
+ points = [].concat(points);
+ shuffleArray(points);
+ }
+
+ // Try to fit the words by looking at each point.
+ // array.some() will stop and return true
+ // when putWordAtPoint() returns true.
+ for (var i = 0; i < points.length; i++) {
+ var res = tryToPutWordAtPoint(points[i]);
+ if (res) {
+ return res;
+ }
+ }
+
+ // var drawn = points.some(tryToPutWordAtPoint);
+ // if (drawn) {
+ // // leave putWord() and return true
+ // return true;
+ // }
+ }
+ // we tried all distances but text won't fit, return null
+ return null;
+ };
+
+ /* Send DOM event to all elements. Will stop sending event and return
+ if the previous one is canceled (for cancelable events). */
+ var sendEvent = function sendEvent(type, cancelable, detail) {
+ if (cancelable) {
+ return !elements.some(function(el) {
+ var evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent(type, true, cancelable, detail || {});
+ return !el.dispatchEvent(evt);
+ }, this);
+ } else {
+ elements.forEach(function(el) {
+ var evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent(type, true, cancelable, detail || {});
+ el.dispatchEvent(evt);
+ }, this);
+ }
+ };
+
+ /* Start drawing on a canvas */
+ var start = function start() {
+ // For dimensions, clearCanvas etc.,
+ // we only care about the first element.
+ var canvas = elements[0];
+
+ if (canvas.getContext) {
+ ngx = Math.ceil(canvas.width / g);
+ ngy = Math.ceil(canvas.height / g);
+ } else {
+ var rect = canvas.getBoundingClientRect();
+ ngx = Math.ceil(rect.width / g);
+ ngy = Math.ceil(rect.height / g);
+ }
+
+ // Sending a wordcloudstart event which cause the previous loop to stop.
+ // Do nothing if the event is canceled.
+ if (!sendEvent('wordcloudstart', true)) {
+ return;
+ }
+
+ // Determine the center of the word cloud
+ center = (settings.origin) ?
+ [settings.origin[0]/g, settings.origin[1]/g] :
+ [ngx / 2, ngy / 2];
+
+ // Maxium radius to look for space
+ maxRadius = Math.floor(Math.sqrt(ngx * ngx + ngy * ngy));
+
+ /* Clear the canvas only if the clearCanvas is set,
+ if not, update the grid to the current canvas state */
+ grid = [];
+
+ var gx, gy, i;
+ if (!canvas.getContext || settings.clearCanvas) {
+ elements.forEach(function(el) {
+ if (el.getContext) {
+ var ctx = el.getContext('2d');
+ ctx.fillStyle = settings.backgroundColor;
+ ctx.clearRect(0, 0, ngx * (g + 1), ngy * (g + 1));
+ ctx.fillRect(0, 0, ngx * (g + 1), ngy * (g + 1));
+ } else {
+ el.textContent = '';
+ el.style.backgroundColor = settings.backgroundColor;
+ el.style.position = 'relative';
+ }
+ });
+
+ /* fill the grid with empty state */
+ gx = ngx;
+ while (gx--) {
+ grid[gx] = [];
+ gy = ngy;
+ while (gy--) {
+ grid[gx][gy] = true;
+ }
+ }
+ } else {
+ /* Determine bgPixel by creating
+ another canvas and fill the specified background color. */
+ var bctx = document.createElement('canvas').getContext('2d');
+
+ bctx.fillStyle = settings.backgroundColor;
+ bctx.fillRect(0, 0, 1, 1);
+ var bgPixel = bctx.getImageData(0, 0, 1, 1).data;
+
+ /* Read back the pixels of the canvas we got to tell which part of the
+ canvas is empty.
+ (no clearCanvas only works with a canvas, not divs) */
+ var imageData =
+ canvas.getContext('2d').getImageData(0, 0, ngx * g, ngy * g).data;
+
+ gx = ngx;
+ var x, y;
+ while (gx--) {
+ grid[gx] = [];
+ gy = ngy;
+ while (gy--) {
+ y = g;
+ singleGridLoop: while (y--) {
+ x = g;
+ while (x--) {
+ i = 4;
+ while (i--) {
+ if (imageData[((gy * g + y) * ngx * g +
+ (gx * g + x)) * 4 + i] !== bgPixel[i]) {
+ grid[gx][gy] = false;
+ break singleGridLoop;
+ }
+ }
+ }
+ }
+ if (grid[gx][gy] !== false) {
+ grid[gx][gy] = true;
+ }
+ }
+ }
+
+ imageData = bctx = bgPixel = undefined;
+ }
+
+ // fill the infoGrid with empty state if we need it
+ if (settings.hover || settings.click) {
+
+ interactive = true;
+
+ /* fill the grid with empty state */
+ gx = ngx + 1;
+ while (gx--) {
+ infoGrid[gx] = [];
+ }
+
+ if (settings.hover) {
+ canvas.addEventListener('mousemove', wordcloudhover);
+ }
+
+ if (settings.click) {
+ canvas.addEventListener('click', wordcloudclick);
+ canvas.addEventListener('touchstart', wordcloudclick);
+ canvas.addEventListener('touchend', function (e) {
+ e.preventDefault();
+ });
+ canvas.style.webkitTapHighlightColor = 'rgba(0, 0, 0, 0)';
+ }
+
+ canvas.addEventListener('wordcloudstart', function stopInteraction() {
+ canvas.removeEventListener('wordcloudstart', stopInteraction);
+
+ canvas.removeEventListener('mousemove', wordcloudhover);
+ canvas.removeEventListener('click', wordcloudclick);
+ hovered = undefined;
+ });
+ }
+
+ i = 0;
+ var loopingFunction, stoppingFunction;
+ var layouting = true;
+ if (!settings.layoutAnimation) {
+ loopingFunction = function (cb) {
+ cb();
+ }
+ stoppingFunction = function () {
+ layouting = false;
+ }
+ }
+ else if (settings.wait !== 0) {
+ loopingFunction = window.setTimeout;
+ stoppingFunction = window.clearTimeout;
+ } else {
+ loopingFunction = window.setImmediate;
+ stoppingFunction = window.clearImmediate;
+ }
+
+ var addEventListener = function addEventListener(type, listener) {
+ elements.forEach(function(el) {
+ el.addEventListener(type, listener);
+ }, this);
+ };
+
+ var removeEventListener = function removeEventListener(type, listener) {
+ elements.forEach(function(el) {
+ el.removeEventListener(type, listener);
+ }, this);
+ };
+
+ var anotherWordCloudStart = function anotherWordCloudStart() {
+ removeEventListener('wordcloudstart', anotherWordCloudStart);
+ stoppingFunction(timer);
+ };
+
+ addEventListener('wordcloudstart', anotherWordCloudStart);
+
+ // At least wait the following code before call the first iteration.
+ var timer = (settings.layoutAnimation ? loopingFunction : setTimeout)(function loop() {
+ if (!layouting) {
+ return;
+ }
+ if (i >= settings.list.length) {
+ stoppingFunction(timer);
+ sendEvent('wordcloudstop', false);
+ removeEventListener('wordcloudstart', anotherWordCloudStart);
+
+ return;
+ }
+ escapeTime = (new Date()).getTime();
+ var drawn = putWord(settings.list[i]);
+ var canceled = !sendEvent('wordclouddrawn', true, {
+ item: settings.list[i], drawn: drawn });
+ if (exceedTime() || canceled) {
+ stoppingFunction(timer);
+ settings.abort();
+ sendEvent('wordcloudabort', false);
+ sendEvent('wordcloudstop', false);
+ removeEventListener('wordcloudstart', anotherWordCloudStart);
+ return;
+ }
+ i++;
+ timer = loopingFunction(loop, settings.wait);
+ }, settings.wait);
+ };
+
+ // All set, start the drawing
+ start();
+ };
+
+ WordCloud.isSupported = isSupported;
+ WordCloud.minFontSize = minFontSize;
+
+ /* harmony default export */ const layout = (WordCloud);
+;// CONCATENATED MODULE: ./src/wordCloud.js
+
+
+
+
+
+
+
+if (!layout.isSupported) {
+ throw new Error('Sorry your browser not support wordCloud');
+}
+
+// https://github.com/timdream/wordcloud2.js/blob/c236bee60436e048949f9becc4f0f67bd832dc5c/index.js#L233
+function updateCanvasMask(maskCanvas) {
+ var ctx = maskCanvas.getContext('2d');
+ var imageData = ctx.getImageData(
+ 0, 0, maskCanvas.width, maskCanvas.height);
+ var newImageData = ctx.createImageData(imageData);
+
+ var toneSum = 0;
+ var toneCnt = 0;
+ for (var i = 0; i < imageData.data.length; i += 4) {
+ var alpha = imageData.data[i + 3];
+ if (alpha > 128) {
+ var tone = imageData.data[i]
+ + imageData.data[i + 1]
+ + imageData.data[i + 2];
+ toneSum += tone;
+ ++toneCnt;
+ }
+ }
+ var threshold = toneSum / toneCnt;
+
+ for (var i = 0; i < imageData.data.length; i += 4) {
+ var tone = imageData.data[i]
+ + imageData.data[i + 1]
+ + imageData.data[i + 2];
+ var alpha = imageData.data[i + 3];
+
+ if (alpha < 128 || tone > threshold) {
+ // Area not to draw
+ newImageData.data[i] = 0;
+ newImageData.data[i + 1] = 0;
+ newImageData.data[i + 2] = 0;
+ newImageData.data[i + 3] = 0;
+ }
+ else {
+ // Area to draw
+ // The color must be same with backgroundColor
+ newImageData.data[i] = 255;
+ newImageData.data[i + 1] = 255;
+ newImageData.data[i + 2] = 255;
+ newImageData.data[i + 3] = 255;
+ }
+ }
+
+ ctx.putImageData(newImageData, 0, 0);
+}
+
+external_echarts_.registerLayout(function (ecModel, api) {
+ ecModel.eachSeriesByType('wordCloud', function (seriesModel) {
+ var gridRect = external_echarts_.helper.getLayoutRect(
+ seriesModel.getBoxLayoutParams(), {
+ width: api.getWidth(),
+ height: api.getHeight()
+ }
+ );
+ var data = seriesModel.getData();
+
+ var canvas = document.createElement('canvas');
+ canvas.width = gridRect.width;
+ canvas.height = gridRect.height;
+
+ var ctx = canvas.getContext('2d');
+ var maskImage = seriesModel.get('maskImage');
+ if (maskImage) {
+ try {
+ ctx.drawImage(maskImage, 0, 0, canvas.width, canvas.height);
+ updateCanvasMask(canvas);
+ }
+ catch (e) {
+ console.error('Invalid mask image');
+ console.error(e.toString());
+ }
+ }
+
+ var sizeRange = seriesModel.get('sizeRange');
+ var rotationRange = seriesModel.get('rotationRange');
+ var valueExtent = data.getDataExtent('value');
+
+ var DEGREE_TO_RAD = Math.PI / 180;
+ var gridSize = seriesModel.get('gridSize');
+ layout(canvas, {
+ list: data.mapArray('value', function (value, idx) {
+ var itemModel = data.getItemModel(idx);
+ return [
+ data.getName(idx),
+ itemModel.get('textStyle.fontSize', true)
+ || external_echarts_.number.linearMap(value, valueExtent, sizeRange),
+ idx
+ ];
+ }).sort(function (a, b) {
+ // Sort from large to small in case there is no more room for more words
+ return b[1] - a[1];
+ }),
+ fontFamily: seriesModel.get('textStyle.fontFamily')
+ || seriesModel.get('emphasis.textStyle.fontFamily')
+ || ecModel.get('textStyle.fontFamily'),
+ fontWeight: seriesModel.get('textStyle.fontWeight')
+ || seriesModel.get('emphasis.textStyle.fontWeight')
+ || ecModel.get('textStyle.fontWeight'),
+
+ gridSize: gridSize,
+
+ ellipticity: gridRect.height / gridRect.width,
+
+ minRotation: rotationRange[0] * DEGREE_TO_RAD,
+ maxRotation: rotationRange[1] * DEGREE_TO_RAD,
+
+ clearCanvas: !maskImage,
+
+ rotateRatio: 1,
+
+ rotationStep: seriesModel.get('rotationStep') * DEGREE_TO_RAD,
+
+ drawOutOfBound: seriesModel.get('drawOutOfBound'),
+
+ layoutAnimation: seriesModel.get('layoutAnimation'),
+
+ shuffle: false,
+
+ shape: seriesModel.get('shape')
+ });
+
+ function onWordCloudDrawn(e) {
+ var item = e.detail.item;
+ if (e.detail.drawn && seriesModel.layoutInstance.ondraw) {
+ e.detail.drawn.gx += gridRect.x / gridSize;
+ e.detail.drawn.gy += gridRect.y / gridSize;
+ seriesModel.layoutInstance.ondraw(
+ item[0], item[1], item[2], e.detail.drawn
+ );
+ }
+ }
+
+ canvas.addEventListener('wordclouddrawn', onWordCloudDrawn);
+
+ if (seriesModel.layoutInstance) {
+ // Dispose previous
+ seriesModel.layoutInstance.dispose();
+ }
+
+ seriesModel.layoutInstance = {
+ ondraw: null,
+
+ dispose: function () {
+ canvas.removeEventListener('wordclouddrawn', onWordCloudDrawn);
+ // Abort
+ canvas.addEventListener('wordclouddrawn', function (e) {
+ // Prevent default to cancle the event and stop the loop
+ e.preventDefault();
+ });
+ }
+ };
+ });
+});
+
+external_echarts_.registerPreprocessor(function (option) {
+ var series = (option || {}).series;
+ !external_echarts_.util.isArray(series) && (series = series ? [series] : []);
+
+ var compats = ['shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'];
+
+ external_echarts_.util.each(series, function (seriesItem) {
+ if (seriesItem && seriesItem.type === 'wordCloud') {
+ var textStyle = seriesItem.textStyle || {};
+
+ compatTextStyle(textStyle.normal);
+ compatTextStyle(textStyle.emphasis);
+ }
+ });
+
+ function compatTextStyle(textStyle) {
+ textStyle && external_echarts_.util.each(compats, function (key) {
+ if (textStyle.hasOwnProperty(key)) {
+ textStyle['text' + external_echarts_.format.capitalFirst(key)] = textStyle[key];
+ }
+ });
+ }
+});
+
+;// CONCATENATED MODULE: ./index.js
+
+
+
+/***/ }),
+
+/***/ "echarts/lib/echarts":
+/*!**************************!*\
+ !*** external "echarts" ***!
+ \**************************/
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_echarts_lib_echarts__;
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ if(__webpack_module_cache__[moduleId]) {
+/******/ return __webpack_module_cache__[moduleId].exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/************************************************************************/
+/******/ // module exports must be returned from runtime so entry inlining is disabled
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ return __webpack_require__("./index.js");
+/******/ })()
+;
+});
+//# sourceMappingURL=echarts-wordcloud.js.map
\ No newline at end of file
diff --git a/src/utils/gol/bubbleWord/index.js b/src/utils/gol/bubbleWord/index.js
new file mode 100644
index 0000000..fbc4db0
--- /dev/null
+++ b/src/utils/gol/bubbleWord/index.js
@@ -0,0 +1,61 @@
+
+require("./echarts-wordcloud");
+
+// 将后台数据转成数组
+function doWordCloud(data) {
+ let arr1 = [];
+ for (let key in data) {
+ let obj = { name: key, value: data[key] };
+ arr1.push(obj);
+ }
+ return arr1;
+}
+//创建词云
+export default function createWordCloud(data) {
+ let showData = null;
+ if (Array.isArray(data)) {
+ showData = data;
+ } else {
+ let words = doWordCloud(data);
+ showData = words;
+ }
+ return {
+ tooltip: {},
+ series: [{
+ type: 'wordCloud',
+ gridSize: 12,
+ sizeRange: [10, 52],
+ rotationRange: [0, 0],
+ shape: 'circle',
+ width: 400,
+ height: 400,
+ left: 'center',
+ top: 'center',
+ right: null,
+ bottom: null,
+ drawOutOfBound: true,
+ textStyle: {
+ fontFamily: 'sans-serif',
+ fontWeight: 'bold',
+ color: function () {
+ return 'rgb(' + [
+ Math.round(Math.random() * 255),
+ Math.round(Math.random() * 255),
+ Math.round(Math.random() * 255)
+ ].join(',') + ')';
+ }
+ },
+ emphasis: {
+ textStyle: {
+ shadowBlur: 100,
+ shadowColor: '#333'
+ }
+ },
+ data: showData
+ // {
+ // name: 'Sam S Club',
+ // value: 10000,
+ // }
+ }]
+ }
+}
\ No newline at end of file
diff --git a/src/utils/gol/wordCloudOld.js b/src/utils/gol/wordCloudOld.js
new file mode 100644
index 0000000..97508db
--- /dev/null
+++ b/src/utils/gol/wordCloudOld.js
@@ -0,0 +1,188 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-21 11:36:36
+ * @LastEditTime: 2021-11-25 11:07:14
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ *
+ */
+import { compare } from "./dataTool"
+import * as echarts from "echarts";
+// 将后台数据转成数组
+function doWordCloud(data) {
+ let arr1 = [];
+ for (let key in data) {
+ let obj = { key: key, value: data[key] };
+ arr1.push(obj);
+ }
+ return arr1;
+}
+// 气泡大小算法
+function bubbleDivide(val, maxVal, size) {
+ let percent = val / maxVal * 1.00;
+ if (0.15 {
+ temp.push(item[format[1]]);
+ });
+ maxValue = Math.max.apply(null, temp);
+ // 气泡颜色数组
+ let color = [
+ {
+ key: '#047ddc',
+ fontColor: '#8ec0ea',
+ value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(4, 60, 135, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(1, 11, 25, 1)'
+ }
+ ], false)
+ },
+ {
+ key: '#a3951f',
+ fontColor: '#a4a27f',
+ value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(120, 124, 14, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(1, 11, 25, 1)'
+ }
+ ], false)
+ },
+ {
+ key: '#01aa87',
+ fontColor: '#99e5d5',
+ value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(25, 137, 129, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(1, 11, 25, 1)'
+ }
+ ], false)
+ }
+
+ ];
+ // 气泡颜色备份
+ let bakeColor = [...color];
+ // 气泡数据
+ let bubbleData = [];
+ let basicSize = 20; //基础大小
+ let repulsion = 90; //斥力因子
+ // 填充气泡数据数组bubbleData
+ for (let item of data) {
+ // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
+ if (!bakeColor.length) bakeColor = [...color];
+ let colorSet = new Set(bakeColor);
+ let curIndex = Math.round(Math.random() * (colorSet.size - 1));
+ let borderColor = bakeColor[curIndex].key;
+ let curColor = bakeColor[curIndex].value;
+ let fontColor = bakeColor[curIndex].fontColor;
+ colorSet.delete(curColor);
+ bakeColor = [...colorSet];
+ // 气泡大小设置
+ //let size = (item[format[1]] * basicSize * 2) / maxValue;
+ let size = bubbleDivide(item[format[1]],maxValue,basicSize);
+
+ bubbleData.push({
+ name: item[format[0]],
+ value: item[format[1]],
+ symbolSize: size,
+ draggable: true,
+ label: {
+ show: true,
+ color: fontColor,
+ fontSize: 12
+ },
+ itemStyle: {
+ normal: {
+ color: curColor,
+ opacity: 0.8,
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowColor: "rgba(0,0,0,0.3)",
+ borderType : 'solid',
+ borderColor: borderColor,
+ borderWidth: 1
+ },
+ },
+ });
+ }
+ return {
+ bubbleData,
+ repulsion,
+ };
+}
+
+// 创建词云图
+export default function createWordCloud(obj) {
+ let bubble = null;
+ if (Array.isArray(obj)) {
+ bubble = bubbleChart(obj, ['key', 'value']);
+ } else {
+ let words = doWordCloud(obj);
+ words.sort(compare('value'));
+ bubble = bubbleChart(words, ['key', 'value']);
+ }
+ return {
+ animationEasingUpdate: 'bounceIn',
+ tooltip: {
+ backgroundColor: "#08182F",
+ color: "#fff",
+ borderColor: "#3373CC",
+ textStyle: {
+ color: "#fff", //设置文字颜色
+ },
+ extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+ formatter: function (param) {
+ let data = param.data;
+ return `${data.name}
${data.value}`
+ }
+ },
+ series: [{
+ type: 'graph',
+ layout: 'force',
+ force: {
+ gravity: 0.2,
+ repulsion: bubble.repulsion,
+ edgeLength: 10
+ },
+ // 是否开启鼠标缩放和平移漫游
+ roam: true,
+ data: bubble.bubbleData
+ }]
+ }
+}
diff --git a/src/views/EventDEC/mediaInterpretationEc/opt.js b/src/views/EventDEC/mediaInterpretationEc/opt.js
index b9a927f..e2e2726 100644
--- a/src/views/EventDEC/mediaInterpretationEc/opt.js
+++ b/src/views/EventDEC/mediaInterpretationEc/opt.js
@@ -4,7 +4,7 @@
* @LastEditTime: 2021-10-29 21:30:46
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
- * @FilePath: /data-show/src/utils/gol/bubbleWord.js
+ *
*/
import {compare} from "./dataTool"
// 将后台数据转成数组
diff --git a/src/views/EventDEC/pnwcWord/opt.js b/src/views/EventDEC/pnwcWord/opt.js
index b9a927f..e2e2726 100644
--- a/src/views/EventDEC/pnwcWord/opt.js
+++ b/src/views/EventDEC/pnwcWord/opt.js
@@ -4,7 +4,7 @@
* @LastEditTime: 2021-10-29 21:30:46
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
- * @FilePath: /data-show/src/utils/gol/bubbleWord.js
+ *
*/
import {compare} from "./dataTool"
// 将后台数据转成数组
diff --git a/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue b/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue
index d18d776..969c5e4 100644
--- a/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue
+++ b/src/views/MarketingAnalysis/brandSalesRankingTOP10Ranking/index.vue
@@ -67,7 +67,7 @@ export default {