Vue.js漂亮的云标签组件 - vue-wordcloud

Vue.js漂亮的云标签组件 - vue-wordcloud
插件名称 vue-wordcloud
发布时间 2020年6月29日

一个Vue.js组件,可在Web应用程序上生成漂亮的文字和标签云。

一个基于原始d3-cloud插件的Vue.js词云组件。

更新日志:

V1.1 2018年11月25日:

  • 修复#6添加showTooltip选项
  • 修复#5添加对自定义色阶的支持

V1.0.2 2017年8月12日:

  • 其他字体比例选项
  • 易于使用的旋转设置

安装和下载:

# NPM
$ npm install vue-wordcloud --save

例子:

<template>
  <div id="app">
      <wordcloud
      :data="defaultWords"
      nameKey="name"
      valueKey="value"
      :color="myColors"
      :showTooltip="true"
      :wordClick="wordClickHandler">
      </wordcloud>
  </div>
</template>

<script>
import wordcloud from 'vue-wordcloud'

export default {
  name: 'app',
  components: {
    wordcloud
  },
  methods: {
    wordClickHandler(name, value, vm) {
      console.log('wordClickHandler', name, value, vm);
    }
  },
  data() {
    return {
      myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
      defaultWords: [{
          "name": "内容1",
          "value": 26
        },
        {
          "name": "内容2",
          "value": 19
        },
        {
          "name": "内容3",
          "value": 18
        },
        {
          "name": "内容4",
          "value": 16
        },
        {
          "name": "内容5",
          "value": 15
        },
        {
          "name": "内容6",
          "value": 9
        },
        {
          "name": "内容7",
          "value": 9
        },
        {
          "name": "内容8",
          "value": 9
        },
        {
          "name": "内容9",
          "value": 6
        }
      ]
    }
  }
}
</script>

选项

选项简介默认值说明
data 词云文本数据defaultWords数据格式:数组。数组中每个元素是对象{词:数值}
nameKey数据中表示要显示的词的前缀名称 ‘name’
valueKey数据中表示词的权重的细分名称‘ value ‘
margin 图表外边矩 {top: 15, right: 15, bottom: 15, left: 15 }
wordPadding 词间间距3
rotate 词的旋转角度{from:-60,to:60,numOfOrientation:5}可设置角度范围及角度的个数
spiral 词的布局方式‘archimedian’可选择’archimedian’或’rectangular’
fontScale词的大小比例比例‘sqrt’可选’sqrt’,’log’或’n’
fontSize 词的字号范围[10, 80][minSize,maxSize]
font 词的字体名称,对应font-family的值 “impact” 例如,衬线字体’serif’,非衬线字体’Arial’
color 配色集合,可配置两种类型的值:String(D3方案名称),或Array(自定义的颜色列表)“ Category10”可采用D3内置的任意类别配色,或自定义的颜色列表;单色可通过引入只有一个颜色的排列实现,详见示例
showTooltip显示工具提示 true 真假; tooltip的样式(如宽高,颜色等)可以通过CSS类div.tooltip配置
wordClick词的点击事件的某些函数 null 函数变量三个变量,第一个是点击的词text,第二个是该词对应的权重value,第三个是Vue实例vm