动态词云

借助第三方库 jquery-svg3dtagcloud-plugin 实现的静态词云效果.

jquery-svg3dtagcloud-plugin

效果: (第一次打开这个页面的话需要再刷新一下)

目录:

• 1.安装依赖
• 2.在静态资源目录下放入库文件
• 3.修改编译配置
  • 3.1 新建配置文件
  • 3.2 增加配置信息
• 4.在 main 文件里加入 jquery 的引用
• 5.写页面文件

1.安装依赖

ts 的项目要安装@types/jquery，如果不安装，Vue 文件里的$语句会报错

npm i --save jquery

2.在静态资源目录下放入库文件

我是将jquery-svg3dtagcloud-plugin的 js 文件放在了assets目录下

{your_project_path}/src/assets/js/jquery.svg3dtagcloud.min.js

3.修改编译配置

3.1 新建配置文件

如果项目根目录没有vue.config.js文件，则需要新建。

3.2 增加配置信息

// eslint-disable-next-line @typescript-eslint/no-var-requires
const webpack = require("webpack");

/**
 * 自定义配置
 */
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      }),
    ],
  },
};

4.在 main 文件里加入 jquery 的引用

import "jquery";

5.写页面文件

这段代码最后的效果就是上面的样子

<template>
  <div
    id="holder"
    ref="holder"
    style="height: 300px; width: 300px; background-color: #041940; margin: auto"
  ></div>
</template>

<script>
  import "./jquery.svg3dtagcloud.min.js";

  export default {
    data() {
      return {
        wordCloudOption: {
          entries: [
            { label: "Dev Blog", url: "", target: "_top" },
            { label: "Flashforum", url: "", target: "_top" },
            { label: "jQueryScript.net", url: "", target: "_top" },
            { label: "Javascript-Forum", url: "", target: "_top" },
            { label: "JSFiddle", url: "", target: "_top" },
            { label: "CodePen", url: "", target: "_top" },
            { label: "three.js", url: "", target: "_top" },
            { label: "WebGLStudio.js", url: "", target: "_top" },
            { label: "JS Compress", url: "", target: "_top" },
            { label: "TinyPNG", url: "", target: "_top" },
            { label: "Can I Use", url: "", target: "_top" },
            { label: "URL shortener", url: "", target: "_top" },
            { label: "HTML Encoder", url: "", target: "_top" },
            { label: "Twitter", url: "", target: "_top" },
            { label: "deviantART", url: "", target: "_top" },
            { label: "Gulp", url: "", target: "_top" },
            { label: "Browsersync", url: "", target: "_top" },
            { label: "GitHub", url: "", target: "_top" },
            { label: "Shadertoy", url: "", target: "_top" },
            { label: "Starling", url: "", target: "_top" },
            { label: "jsPerf", url: "", target: "_top" },
            { label: "Foundation", url: "", target: "_top" },
            { label: "CreateJS", url: "", target: "_top" },
            { label: "Velocity.js", url: "", target: "_top" },
            { label: "TweenLite", url: "", target: "_top" },
            { label: "jQuery", url: "", target: "_top" },
            { label: "jQuery Rain", url: "", target: "_top" },
            { label: "jQuery Plugins", url: "", target: "_top" },
            { label: "Dev Blog", url: "", target: "_top" },
            { label: "Flashforum", url: "", target: "_top" },
            { label: "jQueryScript.net", url: "", target: "_top" },
            { label: "Javascript-Forum", url: "", target: "_top" },
            { label: "JSFiddle", url: "", target: "_top" },
            { label: "CodePen", url: "", target: "_top" },
            { label: "three.js", url: "", target: "_top" },
            { label: "WebGLStudio.js", url: "", target: "_top" },
            { label: "JS Compress", url: "", target: "_top" },
            { label: "TinyPNG", url: "", target: "_top" },
            { label: "Can I Use", url: "", target: "_top" },
            { label: "URL shortener", url: "", target: "_top" },
            { label: "HTML Encoder", url: "", target: "_top" },
            { label: "Twitter", url: "", target: "_top" },
            { label: "deviantART", url: "", target: "_top" },
            { label: "Gulp", url: "", target: "_top" },
            { label: "Browsersync", url: "", target: "_top" },
            { label: "GitHub", url: "", target: "_top" },
            { label: "Shadertoy", url: "", target: "_top" },
            { label: "Starling", url: "", target: "_top" },
            { label: "jsPerf", url: "", target: "_top" },
            { label: "Foundation", url: "", target: "_top" },
            { label: "CreateJS", url: "", target: "_top" },
            { label: "Velocity.js", url: "", target: "_top" },
            { label: "TweenLite", url: "", target: "_top" },
            { label: "jQuery", url: "", target: "_top" },
            { label: "jQuery Rain", url: "", target: "_top" },
            { label: "jQuery Plugins", url: "", target: "_top" },
          ],
          width: "100%",
          height: "100%",
          radius: "80%",
          radiusMin: 75,
          bgDraw: false,
          bgColor: "#transparent",
          opacityOver: 1.0,
          opacityOut: 0.05,
          opacitySpeed: 6,
          fov: 800,
          speed: 0.2,
          fontFamily: "Oswald, Arial, sans-serif",
          fontSize: "20",
          fontColor: "#00E2FE",
          fontWeight: "bold", // bold, normal
          fontStyle: "normal", // italic
          fontStretch: "normal", // wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
          fontToUpperCase: false,
          tooltipFontFamily: "Oswald, Arial, sans-serif",
          tooltipFontSize: "11",
          tooltipFontColor: "#fff",
          tooltipFontWeight: "normal", // bold
          tooltipFontStyle: "normal", // italic
          tooltipFontStretch: "normal", // wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, normal
          tooltipFontToUpperCase: false,
          tooltipTextAnchor: "left",
          tooltipDiffX: 0,
          tooltipDiffY: 10,
        },
      };
    },
    mounted() {
      $("#holder").svg3DTagCloud(this.wordCloudOption);
    },
  };
</script>