From 7ae3f49113f6f7bbb65dbc740e9aaa1b00da988b Mon Sep 17 00:00:00 2001
From: PaperDragon <2678885646@qq.com>
Date: Sun, 5 Nov 2023 16:10:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=91=E5=9B=BE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
main.py | 16 +-
src/.vuepress/public/html/wordCloud.html | 464 +++++
src/.vuepress/public/js/echarts-wordcloud.js | 1786 +++++++++++++++++
.../public/js/echarts-wordcloud.min.js | 3 +
src/.vuepress/theme.ts | 2 +-
src/README.md | 230 +--
6 files changed, 2385 insertions(+), 116 deletions(-)
create mode 100644 src/.vuepress/public/html/wordCloud.html
create mode 100644 src/.vuepress/public/js/echarts-wordcloud.js
create mode 100644 src/.vuepress/public/js/echarts-wordcloud.min.js
diff --git a/main.py b/main.py
index 35cab8518df..f585f5c6fb8 100644
--- a/main.py
+++ b/main.py
@@ -107,4 +107,18 @@ def create_wordlouod(wordcloud_item: dict = {"Shanghai": 30, "Beijing": 40}):
wordcloud.to_file(f'{OUTPUT_IMG_NAME}')
-create_wordlouod(wordcloud_item=word_frequency(MARKDOWN_ROOT_PATH, key_nums=400))
+def create_front_list():
+ word_dict = word_frequency(MARKDOWN_ROOT_PATH, key_nums=400)
+ print(word_dict)
+ out = []
+ for key, value in word_dict.items():
+ out.append({"name": key, "value": value})
+ print(out)
+
+
+def wordcloud_image():
+ create_wordlouod(wordcloud_item=word_frequency(MARKDOWN_ROOT_PATH, key_nums=400))
+
+
+if __name__ == '__main__':
+ wordcloud_image()
diff --git a/src/.vuepress/public/html/wordCloud.html b/src/.vuepress/public/html/wordCloud.html
new file mode 100644
index 00000000000..4e42dd71816
--- /dev/null
+++ b/src/.vuepress/public/html/wordCloud.html
@@ -0,0 +1,464 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/.vuepress/public/js/echarts-wordcloud.js b/src/.vuepress/public/js/echarts-wordcloud.js
new file mode 100644
index 00000000000..8401b4a18fc
--- /dev/null
+++ b/src/.vuepress/public/js/echarts-wordcloud.js
@@ -0,0 +1,1786 @@
+(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',
+ keepAspect: false,
+
+ left: 'center',
+
+ top: 'center',
+
+ width: '70%',
+
+ height: '80%',
+
+ sizeRange: [12, 60],
+
+ rotationRange: [-90, 90],
+
+ rotationStep: 45,
+
+ gridSize: 8,
+
+ drawOutOfBound: false,
+ shrinkToFit: 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 - 2019 Tim Guan-tin Chien and contributors.
+ * 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) {
+ return false;
+ }
+ 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;
+})();
+
+var getItemExtraData = function (item) {
+ if (Array.isArray(item)) {
+ var itemCopy = item.slice();
+ // remove data we already have (word and weight)
+ itemCopy.splice(0, 2);
+ return itemCopy;
+ } else {
+ return [];
+ }
+};
+
+// 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 timer = {};
+var WordCloud = function WordCloud(elements, options) {
+ if (!isSupported) {
+ return;
+ }
+
+ var timerId = Math.floor(Math.random() * Date.now());
+
+ if (!Array.isArray(elements)) {
+ elements = [elements];
+ }
+
+ elements.forEach(function (el, i) {
+ if (typeof el === 'string') {
+ elements[i] = document.getElementById(el);
+ if (!elements[i]) {
+ throw new Error('The element id specified is not found.');
+ }
+ } else if (!el.tagName && !el.appendChild) {
+ throw new Error(
+ '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,
+ shrinkToFit: 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':
+ // 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 'square':
+ // http://www.wolframalpha.com/input/?i=plot+r+%3D+min(1%2Fabs(cos(t
+ // )),1%2Fabs(sin(t)))),+t+%3D+0+..+2*PI
+ settings.shape = function shapeSquare(theta) {
+ return Math.min(
+ 1 / Math.abs(Math.cos(theta)),
+ 1 / Math.abs(Math.sin(theta))
+ );
+ };
+ 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 randomHslColor(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 randomHslColor(10, 50);
+ };
+ break;
+
+ case 'random-light':
+ getTextColor = function getRandomLightColor() {
+ return randomHslColor(50, 90);
+ };
+ break;
+
+ default:
+ if (typeof settings.color === 'function') {
+ getTextColor = settings.color;
+ }
+ break;
+ }
+
+ /* function for getting the font-weight of the text */
+ var getTextFontWeight;
+ if (typeof settings.fontWeight === 'function') {
+ getTextFontWeight = settings.fontWeight;
+ }
+
+ /* 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);
+
+ if (!infoGrid[x]) {
+ return null
+ }
+
+ 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,
+ extraDataArray
+ ) {
+ // 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;
+ })();
+ }
+
+ // Get fontWeight that will be used to set fctx.font
+ var fontWeight;
+ if (getTextFontWeight) {
+ fontWeight = getTextFontWeight(word, weight, fontSize, extraDataArray);
+ } else {
+ fontWeight = settings.fontWeight;
+ }
+
+ var fcanvas = document.createElement('canvas');
+ var fctx = fcanvas.getContext('2d', { willReadFrequently: true });
+
+ fctx.font =
+ 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 =
+ 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;
+ var gy, x, y;
+ var bounds = [cgh / 2, cgw / 2, cgh / 2, cgw / 2];
+ while (gx--) {
+ gy = cgh;
+ while (gy--) {
+ y = g;
+ /* eslint no-labels: ['error', { 'allowLoop': true }] */
+ 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,
+ extraDataArray
+ ) {
+ var fontSize = info.fontSize;
+ var color;
+ if (getTextColor) {
+ color = getTextColor(
+ word,
+ weight,
+ fontSize,
+ distance,
+ theta,
+ extraDataArray
+ );
+ } else {
+ color = settings.color;
+ }
+
+ // get fontWeight that will be used to set ctx.font and font style rule
+ var fontWeight;
+ if (getTextFontWeight) {
+ fontWeight = getTextFontWeight(word, weight, fontSize, extraDataArray);
+ } else {
+ fontWeight = settings.fontWeight;
+ }
+
+ var classes;
+ if (getTextClasses) {
+ classes = getTextClasses(word, weight, fontSize, extraDataArray);
+ } else {
+ classes = settings.classes;
+ }
+
+ 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 =
+ 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:
+ 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, loopIndex) {
+ if (loopIndex > 20) {
+ return null;
+ }
+
+ 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();
+
+ var extraDataArray = getItemExtraData(item);
+
+ // get info needed to put the text onto the canvas
+ var info = getTextInfo(word, weight, rotateDeg, extraDataArray);
+
+ // 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 && !settings.shrinkToFit) {
+ 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,
+ extraDataArray
+ );
+
+ // 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;
+ // }
+ }
+
+ if (settings.shrinkToFit) {
+ if (Array.isArray(item)) {
+ item[1] = (item[1] * 3) / 4;
+ } else {
+ item.weight = (item.weight * 3) / 4;
+ }
+ return putWord(item, loopIndex + 1);
+ }
+
+ // 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, details) {
+ if (cancelable) {
+ return !elements.some(function (el) {
+ var event = new CustomEvent(type, {
+ detail: details || {}
+ });
+ return !el.dispatchEvent(event);
+ }, this);
+ } else {
+ elements.forEach(function (el) {
+ var event = new CustomEvent(type, {
+ detail: details || {}
+ });
+ el.dispatchEvent(event);
+ }, 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;
+ /* eslint no-labels: ['error', { 'allowLoop': true }] */
+ 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[timerId]);
+ };
+
+ addEventListener('wordcloudstart', anotherWordCloudStart);
+
+ // At least wait the following code before call the first iteration.
+ timer[timerId] = (settings.layoutAnimation ? loopingFunction : setTimeout)(
+ function loop() {
+ if (!layouting) {
+ return;
+ }
+ if (i >= settings.list.length) {
+ stoppingFunction(timer[timerId]);
+ sendEvent('wordcloudstop', false);
+ removeEventListener('wordcloudstart', anotherWordCloudStart);
+ delete timer[timerId];
+ return;
+ }
+ escapeTime = new Date().getTime();
+ var drawn = putWord(settings.list[i], 0);
+ var canceled = !sendEvent('wordclouddrawn', true, {
+ item: settings.list[i],
+ drawn: drawn
+ });
+ if (exceedTime() || canceled) {
+ stoppingFunction(timer[timerId]);
+ settings.abort();
+ sendEvent('wordcloudabort', false);
+ sendEvent('wordcloudstop', false);
+ removeEventListener('wordcloudstart', anotherWordCloudStart);
+ return;
+ }
+ i++;
+ timer[timerId] = 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 keepAspect = seriesModel.get('keepAspect');
+ var maskImage = seriesModel.get('maskImage');
+ var ratio = maskImage ? maskImage.width / maskImage.height : 1;
+ keepAspect && adjustRectAspect(gridRect, ratio);
+
+ var data = seriesModel.getData();
+
+ var canvas = document.createElement('canvas');
+ canvas.width = gridRect.width;
+ canvas.height = gridRect.height;
+
+ var ctx = canvas.getContext('2d');
+ 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'),
+ shrinkToFit: seriesModel.get('shrinkToFit'),
+
+ 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];
+ }
+ });
+ }
+});
+
+function adjustRectAspect(gridRect, aspect) {
+ // var outerWidth = gridRect.width + gridRect.x * 2;
+ // var outerHeight = gridRect.height + gridRect.y * 2;
+ var width = gridRect.width;
+ var height = gridRect.height;
+ if (width > height * aspect) {
+ gridRect.x += (width - height * aspect) / 2;
+ gridRect.width = height * aspect;
+ } else {
+ gridRect.y += (height - width / aspect) / 2;
+ gridRect.height = width / aspect;
+ }
+}
+
+;// 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/.vuepress/public/js/echarts-wordcloud.min.js b/src/.vuepress/public/js/echarts-wordcloud.min.js
new file mode 100644
index 00000000000..a6fd2c909cc
--- /dev/null
+++ b/src/.vuepress/public/js/echarts-wordcloud.min.js
@@ -0,0 +1,3 @@
+/*! For license information please see echarts-wordcloud.min.js.LICENSE.txt */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("echarts")):"function"==typeof define&&define.amd?define(["echarts"],e):"object"==typeof exports?exports["echarts-wordcloud"]=e(require("echarts")):t["echarts-wordcloud"]=e(t.echarts)}(self,(function(t){return(()=>{"use strict";var e={638:(t,e,a)=>{a.r(e);var r=a(83);r.extendSeriesModel({type:"series.wordCloud",visualStyleAccessPath:"textStyle",visualStyleMapper:function(t){return{fill:t.get("color")}},visualDrawType:"fill",optionUpdated:function(){var t=this.option;t.gridSize=Math.max(Math.floor(t.gridSize),4)},getInitialData:function(t,e){var a=r.helper.createDimensions(t.data,{coordDimensions:["value"]}),i=new r.List(a,this);return i.initData(t.data),i},defaultOption:{maskImage:null,shape:"circle",keepAspect:!1,left:"center",top:"center",width:"70%",height:"80%",sizeRange:[12,60],rotationRange:[-90,90],rotationStep:45,gridSize:8,drawOutOfBound:!1,shrinkToFit:!1,textStyle:{fontWeight:"normal"}}}),r.extendChartView({type:"wordCloud",render:function(t,e,a){var i=this.group;i.removeAll();var o=t.getData(),n=t.get("gridSize");t.layoutInstance.ondraw=function(e,a,s,l){var d=o.getItemModel(s),u=d.getModel("textStyle"),f=new r.graphic.Text({style:r.helper.createTextStyle(u),scaleX:1/l.info.mu,scaleY:1/l.info.mu,x:(l.gx+l.info.gw/2)*n,y:(l.gy+l.info.gh/2)*n,rotation:l.rot});f.setStyle({x:l.info.fillTextOffsetX,y:l.info.fillTextOffsetY+.5*a,text:e,verticalAlign:"middle",fill:o.getItemVisual(s,"style").fill,fontSize:a}),i.add(f),o.setItemGraphicEl(s,f),f.ensureState("emphasis").style=r.helper.createTextStyle(d.getModel(["emphasis","textStyle"]),{state:"emphasis"}),f.ensureState("blur").style=r.helper.createTextStyle(d.getModel(["blur","textStyle"]),{state:"blur"}),r.helper.enableHoverEmphasis(f,d.get(["emphasis","focus"]),d.get(["emphasis","blurScope"])),f.stateTransition={duration:t.get("animation")?t.get(["stateAnimation","duration"]):0,easing:t.get(["stateAnimation","easing"])},f.__highDownDispatcher=!0},this._model=t},remove:function(){this.group.removeAll(),this._model.layoutInstance.dispose()},dispose:function(){this._model.layoutInstance.dispose()}}),window.setImmediate||(window.setImmediate=window.msSetImmediate||window.webkitSetImmediate||window.mozSetImmediate||window.oSetImmediate||function(){if(!window.postMessage||!window.addEventListener)return null;var t=[void 0],e="zero-timeout-message";return window.addEventListener("message",(function(a){if("string"==typeof a.data&&a.data.substr(0,e.length)===e){a.stopImmediatePropagation();var r=parseInt(a.data.substr(e.length),36);t[r]&&(t[r](),t[r]=void 0)}}),!0),window.clearImmediate=function(e){t[e]&&(t[e]=void 0)},function(a){var r=t.length;return t.push(a),window.postMessage(e+r.toString(36),"*"),r}}()||function(t){window.setTimeout(t,0)}),window.clearImmediate||(window.clearImmediate=window.msClearImmediate||window.webkitClearImmediate||window.mozClearImmediate||window.oClearImmediate||function(t){window.clearTimeout(t)});var i=function(){var t=document.createElement("canvas");if(!t||!t.getContext)return!1;var e=t.getContext("2d");return!!(e&&e.getImageData&&e.fillText&&Array.prototype.some&&Array.prototype.push)}(),o=function(){if(i){for(var t,e,a=document.createElement("canvas").getContext("2d"),r=20;r;){if(a.font=r.toString(10)+"px sans-serif",a.measureText("Ｗ").width===t&&a.measureText("m").width===e)return r+1;t=a.measureText("Ｗ").width,e=a.measureText("m").width,r--}return 0}}(),n=function(t){for(var e,a,r=t.length;r;)e=Math.floor(Math.random()*r),a=t[--r],t[r]=t[e],t[e]=a;return t},s={},l=function(t,e){if(i){var a=Math.floor(Math.random()*Date.now());Array.isArray(t)||(t=[t]),t.forEach((function(e,a){if("string"==typeof e){if(t[a]=document.getElementById(e),!t[a])throw new Error("The element id specified is not found.")}else if(!e.tagName&&!e.appendChild)throw new Error("You must pass valid HTML elements, or ID of the element.")}));var r={list:[],fontFamily:'"Trebuchet MS", "Heiti TC", "微軟正黑體", "Arial Unicode MS", "Droid Fallback Sans", sans-serif',fontWeight:"normal",color:"random-dark",minSize:0,weightFactor:1,clearCanvas:!0,backgroundColor:"#fff",gridSize:8,drawOutOfBound:!1,shrinkToFit:!1,origin:null,drawMask:!1,maskColor:"rgba(255,0,0,0.3)",maskGapWidth:.3,layoutAnimation:!0,wait:0,abortThreshold:0,abort:function(){},minRotation:-Math.PI/2,maxRotation:Math.PI/2,rotationStep:.1,shuffle:!0,rotateRatio:.1,shape:"circle",ellipticity:.65,classes:null,hover:null,click:null};if(e)for(var l in e)l in r&&(r[l]=e[l]);if("function"!=typeof r.weightFactor){var d=r.weightFactor;r.weightFactor=function(t){return t*d}}if("function"!=typeof r.shape)switch(r.shape){case"circle":default:r.shape="circle";break;case"cardioid":r.shape=function(t){return 1-Math.sin(t)};break;case"diamond":r.shape=function(t){var e=t%(2*Math.PI/4);return 1/(Math.cos(e)+Math.sin(e))};break;case"square":r.shape=function(t){return Math.min(1/Math.abs(Math.cos(t)),1/Math.abs(Math.sin(t)))};break;case"triangle-forward":r.shape=function(t){var e=t%(2*Math.PI/3);return 1/(Math.cos(e)+Math.sqrt(3)*Math.sin(e))};break;case"triangle":case"triangle-upright":r.shape=function(t){var e=(t+3*Math.PI/2)%(2*Math.PI/3);return 1/(Math.cos(e)+Math.sqrt(3)*Math.sin(e))};break;case"pentagon":r.shape=function(t){var e=(t+.955)%(2*Math.PI/5);return 1/(Math.cos(e)+.726543*Math.sin(e))};break;case"star":r.shape=function(t){var e=(t+.955)%(2*Math.PI/10);return(t+.955)%(2*Math.PI/5)-2*Math.PI/10>=0?1/(Math.cos(2*Math.PI/10-e)+3.07768*Math.sin(2*Math.PI/10-e)):1/(Math.cos(e)+3.07768*Math.sin(e))}}r.gridSize=Math.max(Math.floor(r.gridSize),4);var u,f,c,h,m,g,w,v,p=r.gridSize,y=p-r.maskGapWidth,x=Math.abs(r.maxRotation-r.minRotation),M=Math.min(r.maxRotation,r.minRotation),S=r.rotationStep;switch(r.color){case"random-dark":w=function(){return L(10,50)};break;case"random-light":w=function(){return L(50,90)};break;default:"function"==typeof r.color&&(w=r.color)}"function"==typeof r.fontWeight&&(v=r.fontWeight);var b=null;"function"==typeof r.classes&&(b=r.classes);var I,T=!1,k=[],C=function(t){var e,a,r=t.currentTarget,i=r.getBoundingClientRect();t.touches?(e=t.touches[0].clientX,a=t.touches[0].clientY):(e=t.clientX,a=t.clientY);var o=e-i.left,n=a-i.top,s=Math.floor(o*(r.width/i.width||1)/p),l=Math.floor(n*(r.height/i.height||1)/p);return k[s]?k[s][l]:null},E=function(t){var e=C(t);I!==e&&(I=e,e?r.hover(e.item,e.dimension,t):r.hover(void 0,void 0,t))},A=function(t){var e=C(t);e&&(r.click(e.item,e.dimension,t),t.preventDefault())},O=[],F=function(t){if(O[t])return O[t];var e=8*t,a=e,i=[];for(0===t&&i.push([h[0],h[1],0]);a--;){var o=1;"circle"!==r.shape&&(o=r.shape(a/e*2*Math.PI)),i.push([h[0]+t*o*Math.cos(-a/e*2*Math.PI),h[1]+t*o*Math.sin(-a/e*2*Math.PI)*r.ellipticity,a/e*2*Math.PI])}return O[t]=i,i},D=function(){return r.abortThreshold>0&&(new Date).getTime()-g>r.abortThreshold},P=function(e,a,r,i,o){e>=f||a>=c||e<0||a<0||(u[e][a]=!1,r&&t[0].getContext("2d").fillRect(e*p,a*p,y,y),T&&(k[e][a]={item:o,dimension:i}))},R=function e(a,i){if(i>20)return null;var s,l,d;Array.isArray(a)?(s=a[0],l=a[1]):(s=a.word,l=a.weight,d=a.attributes);var h,g,y,I=0===r.rotateRatio||Math.random()>r.rotateRatio?0:0===x?M:M+Math.round(Math.random()*x/S)*S,k=function(t){if(Array.isArray(t)){var e=t.slice();return e.splice(0,2),e}return[]}(a),C=function(t,e,a,i){var n=r.weightFactor(e);if(n<=r.minSize)return!1;var s,l=1;nF[1]&&(F[1]=O),kF[2]&&(F[2]=k);break t}}return{mu:l,occupied:A,bounds:F,gw:S,gh:M,fillTextOffsetX:y,fillTextOffsetY:x,fillTextWidth:f,fillTextHeight:c,fontSize:n}}(s,l,I,k);if(!C)return!1;if(D())return!1;if(!r.drawOutOfBound&&!r.shrinkToFit){var E=C.bounds;if(E[1]-E[3]+1>f||E[2]-E[0]+1>c)return!1}for(var A=m+1;A--;){var O=F(m-A);r.shuffle&&(O=[].concat(O),n(O));for(var R=0;R=f||l>=c||s<0||l<0){if(!r.drawOutOfBound)return!1}else if(!u[s][l])return!1}return!0}(g,y,0,0,C.occupied)&&(function(e,a,i,o,n,s,l,d,u,f){var c,h,m,g=i.fontSize;c=w?w(o,n,g,s,l,f):r.color,h=v?v(o,n,g,f):r.fontWeight,m=b?b(o,n,g,f):r.classes,t.forEach((function(t){if(t.getContext){var n=t.getContext("2d"),s=i.mu;n.save(),n.scale(1/s,1/s),n.font=h+" "+(g*s).toString(10)+"px "+r.fontFamily,n.fillStyle=c,n.translate((e+i.gw/2)*p*s,(a+i.gh/2)*p*s),0!==d&&n.rotate(-d),n.textBaseline="middle",n.fillText(o,i.fillTextOffsetX*s,(i.fillTextOffsetY+.5*g)*s),n.restore()}else{var l=document.createElement("span"),f="";f="rotate("+-d/Math.PI*180+"deg) ",1!==i.mu&&(f+="translateX(-"+i.fillTextWidth/4+"px) scale("+1/i.mu+")");var w={position:"absolute",display:"block",font:h+" "+g*i.mu+"px "+r.fontFamily,left:(e+i.gw/2)*p+i.fillTextOffsetX+"px",top:(a+i.gh/2)*p+i.fillTextOffsetY+"px",width:i.fillTextWidth+"px",height:i.fillTextHeight+"px",lineHeight:g+"px",whiteSpace:"nowrap",transform:f,webkitTransform:f,msTransform:f,transformOrigin:"50% 40%",webkitTransformOrigin:"50% 40%",msTransformOrigin:"50% 40%"};for(var v in c&&(w.color=c),l.textContent=o,w)l.style[v]=w[v];if(u)for(var y in u)l.setAttribute(y,u[y]);m&&(l.className+=m),t.appendChild(l)}}))}(g,y,C,s,l,m-A,h[2],I,d,k),function(e,a,i,o,n,s){var l,d,u=n.occupied,h=r.drawMask;if(h&&((l=t[0].getContext("2d")).save(),l.fillStyle=r.maskColor),T){var m=n.bounds;d={x:(e+m[3])*p,y:(a+m[0])*p,w:(m[1]-m[3]+1)*p,h:(m[2]-m[0]+1)*p}}for(var g=u.length;g--;){var w=e+u[g][0],v=a+u[g][1];w>=f||v>=c||w<0||v<0||P(w,v,h,d,s)}h&&l.restore()}(g,y,0,0,C,a),{gx:g,gy:y,rot:I,info:C}));if(z)return z}}return r.shrinkToFit?(Array.isArray(a)?a[1]=3*a[1]/4:a.weight=3*a.weight/4,e(a,i+1)):null},z=function(e,a,r){if(a)return!t.some((function(t){var a=new CustomEvent(e,{detail:r||{}});return!t.dispatchEvent(a)}),this);t.forEach((function(t){var a=new CustomEvent(e,{detail:r||{}});t.dispatchEvent(a)}),this)};!function(){var e=t[0];if(e.getContext)f=Math.ceil(e.width/p),c=Math.ceil(e.height/p);else{var i=e.getBoundingClientRect();f=Math.ceil(i.width/p),c=Math.ceil(i.height/p)}if(z("wordcloudstart",!0)){var o,n,l,d,w;if(h=r.origin?[r.origin[0]/p,r.origin[1]/p]:[f/2,c/2],m=Math.floor(Math.sqrt(f*f+c*c)),u=[],!e.getContext||r.clearCanvas)for(t.forEach((function(t){if(t.getContext){var e=t.getContext("2d");e.fillStyle=r.backgroundColor,e.clearRect(0,0,f*(p+1),c*(p+1)),e.fillRect(0,0,f*(p+1),c*(p+1))}else t.textContent="",t.style.backgroundColor=r.backgroundColor,t.style.position="relative"})),o=f;o--;)for(u[o]=[],n=c;n--;)u[o][n]=!0;else{var v=document.createElement("canvas").getContext("2d");v.fillStyle=r.backgroundColor,v.fillRect(0,0,1,1);var y,x,M=v.getImageData(0,0,1,1).data,S=e.getContext("2d").getImageData(0,0,f*p,c*p).data;for(o=f;o--;)for(u[o]=[],n=c;n--;){x=p;t:for(;x--;)for(y=p;y--;)for(l=4;l--;)if(S[4*((n*p+x)*f*p+(o*p+y))+l]!==M[l]){u[o][n]=!1;break t}!1!==u[o][n]&&(u[o][n]=!0)}S=v=M=void 0}if(r.hover||r.click){for(T=!0,o=f+1;o--;)k[o]=[];r.hover&&e.addEventListener("mousemove",E),r.click&&(e.addEventListener("click",A),e.addEventListener("touchstart",A),e.addEventListener("touchend",(function(t){t.preventDefault()})),e.style.webkitTapHighlightColor="rgba(0, 0, 0, 0)"),e.addEventListener("wordcloudstart",(function t(){e.removeEventListener("wordcloudstart",t),e.removeEventListener("mousemove",E),e.removeEventListener("click",A),I=void 0}))}l=0;var b=!0;r.layoutAnimation?0!==r.wait?(d=window.setTimeout,w=window.clearTimeout):(d=window.setImmediate,w=window.clearImmediate):(d=function(t){t()},w=function(){b=!1});var C=function(e,a){t.forEach((function(t){t.removeEventListener(e,a)}),this)},O=function t(){C("wordcloudstart",t),w(s[a])};!function(e,a){t.forEach((function(t){t.addEventListener("wordcloudstart",a)}),this)}(0,O),s[a]=(r.layoutAnimation?d:setTimeout)((function t(){if(b){if(l>=r.list.length)return w(s[a]),z("wordcloudstop",!1),C("wordcloudstart",O),void delete s[a];g=(new Date).getTime();var e=R(r.list[l],0),i=!z("wordclouddrawn",!0,{item:r.list[l],drawn:e});if(D()||i)return w(s[a]),r.abort(),z("wordcloudabort",!1),z("wordcloudstop",!1),void C("wordcloudstart",O);l++,s[a]=d(t,r.wait)}}),r.wait)}}()}function L(t,e){return"hsl("+(360*Math.random()).toFixed()+","+(30*Math.random()+70).toFixed()+"%,"+(Math.random()*(e-t)+t).toFixed()+"%)"}};l.isSupported=i,l.minFontSize=o;const d=l;if(!d.isSupported)throw new Error("Sorry your browser not support wordCloud");r.registerLayout((function(t,e){t.eachSeriesByType("wordCloud",(function(a){var i=r.helper.getLayoutRect(a.getBoxLayoutParams(),{width:e.getWidth(),height:e.getHeight()}),o=a.get("keepAspect"),n=a.get("maskImage"),s=n?n.width/n.height:1;o&&function(t,e){var a=t.width,r=t.height;a>r*e?(t.x+=(a-r*e)/2,t.width=r*e):(t.y+=(r-a/e)/2,t.height=a/e)}(i,s);var l=a.getData(),u=document.createElement("canvas");u.width=i.width,u.height=i.height;var f=u.getContext("2d");if(n)try{f.drawImage(n,0,0,u.width,u.height),function(t){for(var e=t.getContext("2d"),a=e.getImageData(0,0,t.width,t.height),r=e.createImageData(a),i=0,o=0,n=0;n128&&(i+=l=a.data[n]+a.data[n+1]+a.data[n+2],++o);var s=i/o;for(n=0;ns?(r.data[n]=0,r.data[n+1]=0,r.data[n+2]=0,r.data[n+3]=0):(r.data[n]=255,r.data[n+1]=255,r.data[n+2]=255,r.data[n+3]=255)}e.putImageData(r,0,0)}(u)}catch(t){console.error("Invalid mask image"),console.error(t.toString())}var c=a.get("sizeRange"),h=a.get("rotationRange"),m=l.getDataExtent("value"),g=Math.PI/180,w=a.get("gridSize");function v(t){var e=t.detail.item;t.detail.drawn&&a.layoutInstance.ondraw&&(t.detail.drawn.gx+=i.x/w,t.detail.drawn.gy+=i.y/w,a.layoutInstance.ondraw(e[0],e[1],e[2],t.detail.drawn))}d(u,{list:l.mapArray("value",(function(t,e){var a=l.getItemModel(e);return[l.getName(e),a.get("textStyle.fontSize",!0)||r.number.linearMap(t,m,c),e]})).sort((function(t,e){return e[1]-t[1]})),fontFamily:a.get("textStyle.fontFamily")||a.get("emphasis.textStyle.fontFamily")||t.get("textStyle.fontFamily"),fontWeight:a.get("textStyle.fontWeight")||a.get("emphasis.textStyle.fontWeight")||t.get("textStyle.fontWeight"),gridSize:w,ellipticity:i.height/i.width,minRotation:h[0]*g,maxRotation:h[1]*g,clearCanvas:!n,rotateRatio:1,rotationStep:a.get("rotationStep")*g,drawOutOfBound:a.get("drawOutOfBound"),shrinkToFit:a.get("shrinkToFit"),layoutAnimation:a.get("layoutAnimation"),shuffle:!1,shape:a.get("shape")}),u.addEventListener("wordclouddrawn",v),a.layoutInstance&&a.layoutInstance.dispose(),a.layoutInstance={ondraw:null,dispose:function(){u.removeEventListener("wordclouddrawn",v),u.addEventListener("wordclouddrawn",(function(t){t.preventDefault()}))}}}))})),r.registerPreprocessor((function(t){var e=(t||{}).series;!r.util.isArray(e)&&(e=e?[e]:[]);var a=["shadowColor","shadowBlur","shadowOffsetX","shadowOffsetY"];function i(t){t&&r.util.each(a,(function(e){t.hasOwnProperty(e)&&(t["text"+r.format.capitalFirst(e)]=t[e])}))}r.util.each(e,(function(t){if(t&&"wordCloud"===t.type){var e=t.textStyle||{};i(e.normal),i(e.emphasis)}}))}))},83:e=>{e.exports=t}},a={};function r(t){if(a[t])return a[t].exports;var i=a[t]={exports:{}};return e[t](i,i.exports,r),i.exports}return r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r(638)})()}));
+//# sourceMappingURL=echarts-wordcloud.min.js.map
\ No newline at end of file
diff --git a/src/.vuepress/theme.ts b/src/.vuepress/theme.ts
index 905e2cf144b..106a6eb565d 100644
--- a/src/.vuepress/theme.ts
+++ b/src/.vuepress/theme.ts
@@ -82,7 +82,7 @@ export default hopeTheme({
chart: false,
codetabs: true,
demo: true,
- echarts: false,
+ echarts: true,
figure: true,
flowchart: false,
gfm: true,
diff --git a/src/README.md b/src/README.md
index bbb57382801..8ddad0d72c9 100644
--- a/src/README.md
+++ b/src/README.md
@@ -16,7 +16,9 @@ actions:
- text: 时光机器
link: ./timeline/
-
+head:
+- ['script', { src: '/js/echarts-wordcloud.js' }]
+- ['script', { src: '/js/echarts-wordcloud.min.js' }]
highlights:
# - header: 易于安装
# image: /assets/image/box.svg
@@ -26,119 +28,119 @@ highlights:
# - title: 运行 pnpm create vuepress-theme-hope hope-project 以创建一个新的主题项目。
# - title: 在已有项目根目录下运行 pnpm create vuepress-theme-hope add . 以在项目中添加主题。
- # - header: 看玩你能得到什么？
- # description: 浓浓的全部都是知识的结晶，多到令人发指✨
- # # image: /assets/image/markdown.svg
- # bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
- # bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
- # bgImageStyle:
- # background-repeat: repeat
- # background-size: initial
- # features:
- # - title: 链接检查
- # icon: clipboard-check
- # details: 检查 Markdown 链接
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/others.html#link-check
-
- # - title: 自定义容器支持
- # icon: box-archive
- # details: 用样式装饰 Markdown 内容
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/container.html
-
- # - title: 选项卡
- # icon: table-columns
- # details: 使用选项卡对相似内容进行分组
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/tabs.html
-
- # - title: 代码组
- # icon: code
- # details: 使用选项卡对相似代码进行分组
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/code-tabs.html
-
- # - title: 自定义对齐支持
- # icon: align-center
- # details: 让你在 Markdown 中对段落进行对齐
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/align.html
-
- # - title: 自定义属性支持
- # icon: code
- # details: 让你为 Markdown 元素添加属性
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/attrs.html
-
- # - title: 上下角标支持
- # icon: superscript
- # details: 你的 Markdown 现在将支持上下角标
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/sup-sub.html
-
- # - title: 脚注
- # icon: quote-left
- # details: 你的 Markdown 现在将支持脚注
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/footnote.html
-
- # - title: 标记支持
- # icon: highlighter
- # details: 让你在 Markdown 中对词句进行标记
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/mark.html
-
- # - title: 任务列表
- # icon: square-check
- # details: 在 Markdown 中使用任务列表
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/tasklist.html
-
- # - title: 图片语法
- # icon: image
- # details: 使用改进的语法指定图片大小与颜色模式
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/image.html
-
- # - title: 卡片支持
- # icon: square
- # details: 在 Markdown 中展示卡片
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/card.html
-
- # - title: 图表支持
- # icon: chart-simple
- # details: 在 Markdown 中展示图表
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/chart.html
-
- # - title: 流程图支持
- # icon: route
- # details: 可以在 Markdown 中直接写出流程图
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/flowchart.html
-
- # - title: Mermaid 支持
- # icon: chart-pie
- # details: 可以在 Markdown 中添加 Mermaid 图例
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/mermaid.html
-
- # - title: Tex 支持
- # icon: square-root-variable
- # details: Markdown 现在也可以支持 Tex 语法以显示公式
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/tex.html
-
- # - title: 导入文件支持
- # icon: fab fa-markdown
- # details: 将你的文档分段，并在 Markdown 中导入
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/include.html
-
- # - title: 交互演示支持
- # icon: code
- # details: 你可以在 Markdown 中添加交互演示
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/playground.html
-
- # - title: Vue 交互演示支持
- # icon: fab fa-vuejs
- # details: 在交互演示中展示 Vue 组件
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/vue-playground.html
-
- # - title: 代码案例支持
- # icon: laptop-code
- # details: 你可以很方便的插入代码案例
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/demo/
-
- # - title: 幻灯片支持
- # icon: person-chalkboard
- # details: 你可以直接在 Markdown 中插入幻灯片
- # link: https://theme-hope.vuejs.press/zh/guide/markdown/presentation/
+# - header: 看玩你能得到什么？
+# description: 浓浓的全部都是知识的结晶，多到令人发指✨
+# # image: /assets/image/markdown.svg
+# bgImage: https://theme-hope-assets.vuejs.press/bg/2-light.svg
+# bgImageDark: https://theme-hope-assets.vuejs.press/bg/2-dark.svg
+# bgImageStyle:
+# background-repeat: repeat
+# background-size: initial
+# features:
+# - title: 链接检查
+# icon: clipboard-check
+# details: 检查 Markdown 链接
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/others.html#link-check
+
+# - title: 自定义容器支持
+# icon: box-archive
+# details: 用样式装饰 Markdown 内容
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/container.html
+
+# - title: 选项卡
+# icon: table-columns
+# details: 使用选项卡对相似内容进行分组
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/tabs.html
+
+# - title: 代码组
+# icon: code
+# details: 使用选项卡对相似代码进行分组
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/code-tabs.html
+
+# - title: 自定义对齐支持
+# icon: align-center
+# details: 让你在 Markdown 中对段落进行对齐
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/align.html
+
+# - title: 自定义属性支持
+# icon: code
+# details: 让你为 Markdown 元素添加属性
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/attrs.html
+
+# - title: 上下角标支持
+# icon: superscript
+# details: 你的 Markdown 现在将支持上下角标
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/sup-sub.html
+
+# - title: 脚注
+# icon: quote-left
+# details: 你的 Markdown 现在将支持脚注
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/footnote.html
+
+# - title: 标记支持
+# icon: highlighter
+# details: 让你在 Markdown 中对词句进行标记
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/mark.html
+
+# - title: 任务列表
+# icon: square-check
+# details: 在 Markdown 中使用任务列表
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/tasklist.html
+
+# - title: 图片语法
+# icon: image
+# details: 使用改进的语法指定图片大小与颜色模式
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/image.html
+
+# - title: 卡片支持
+# icon: square
+# details: 在 Markdown 中展示卡片
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/card.html
+
+# - title: 图表支持
+# icon: chart-simple
+# details: 在 Markdown 中展示图表
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/chart.html
+
+# - title: 流程图支持
+# icon: route
+# details: 可以在 Markdown 中直接写出流程图
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/flowchart.html
+
+# - title: Mermaid 支持
+# icon: chart-pie
+# details: 可以在 Markdown 中添加 Mermaid 图例
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/mermaid.html
+
+# - title: Tex 支持
+# icon: square-root-variable
+# details: Markdown 现在也可以支持 Tex 语法以显示公式
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/tex.html
+
+# - title: 导入文件支持
+# icon: fab fa-markdown
+# details: 将你的文档分段，并在 Markdown 中导入
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/include.html
+
+# - title: 交互演示支持
+# icon: code
+# details: 你可以在 Markdown 中添加交互演示
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/playground.html
+
+# - title: Vue 交互演示支持
+# icon: fab fa-vuejs
+# details: 在交互演示中展示 Vue 组件
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/vue-playground.html
+
+# - title: 代码案例支持
+# icon: laptop-code
+# details: 你可以很方便的插入代码案例
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/demo/
+
+# - title: 幻灯片支持
+# icon: person-chalkboard
+# details: 你可以直接在 Markdown 中插入幻灯片
+# link: https://theme-hope.vuejs.press/zh/guide/markdown/presentation/
# - header: 布局
# description: 一个带有完整无障碍支持的响应式布局。