sog-tag-cloud

Setup

npm i sog-tag-cloud

import SogTagCloud from 'sog-tag-cloud';

Vue.use(SogTagCloud)

Usage

参数名	描述
tags	标签数组
options	配置项

Options	默认值	描述
width	600	标签云宽度：100
height	600	标签云高度：100
radius	200	标签云半径：200
opacity	300	标签透明度：300 注:数值越小透明度越高
fontSize	600	标签大小：600 注:数值越大字体越小[300-600]

The instance

<template>
  <div id="app">
    <SogTagCloud :tags="tags" :options="options" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      tags: [
        { name: "民族舞" },
        { name: "书法" },
        { name: "象棋" },
        { name: "围棋" },
        { name: "太极" },
      ],
      options: {
        width: 600,
        height: 600,
        radius: 200, // 球体半径
        opacity: 300, // 数值越小透明度越高
        fontSize: 600, // 数值越大字体越小[300-600]
      },
    };
  },
};
</script>

GitHub

See Code.