目录

前言

安装

引用

基本配置

字体颜色随机展示

字体平行且按预设颜色数组展示

自定义展示形状

---

前言

词云图，是一种文本数据的视觉展示，由词汇组成类似云的彩色图形。

echarts-wordcloud是基于echarts的一个词云库，本篇主要介绍它的使用方法。

安装

npm install echarts
npm install echarts-wordcloud

⚠️ 这边需要注意：

echarts-wordcloud@2 is for echarts@5

echarts-wordcloud@1 is for echarts@4

引用

import * as echarts from 'echarts';
import 'echarts-wordcloud';

基本配置

• 字体颜色随机展示

接下来让我们来看一下echarts-wordcloud的具体配置，我把他封装成了子组件，具体代码如下：

echarts-wordcloud的git地址附上，有需要的可以看看

// ChartWordCloud.vue

<template>
	<div id="charts-content"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { onMounted } from "vue";
// 引入 lodash 中的 merge、深克隆
import merge from 'lodash/merge';


const props = withDefaults(
	defineProps<{
		options: any
	}>(),
	{},
)


// 词云图默认属性
const defaultSeries = [{
	type: 'wordCloud',
	/**
	 * 绘制词云的形状, 值为回调函数 或 关键字, 默认 circle
	 *  关键字:
	 * 
	 * circle（圆形）  词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
	 * cardioid（苹果形或心形曲线）
	 * diamond（菱形 正方形）
	 * triangle-forward（三角形-向前）
	 * triangle（三角形-直立）
	 * pentagon（五边形）
	 * star（星形）
	 */
	shape: 'circle',
	// 保持 maskImage 的纵横比或形状的纵横比为 1：1
	keepAspect: false,
	/**
	 * 词云轮廓图，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串, 不包含白色区域; 可选选项
	 * shape选项将随着云的形状增长而继续应用
	 * 有形状限制的时候，最好用背景图来实现，而且这个背景图一定要放base64的，不然词云画不出来
	 */
	// maskImage: maskImage,

	// 词云整个图表放置的位置 和 尺寸大小
	left: 'center',
	top: 'center',
	width: '100%',
	height: '100%',
	right: null,
	bottom: null,
	// 词云文本大小范围,  默认为最小12像素，最大60像素
	sizeRange: [12, 60],
	// 词云文字旋转范围和步长。 文本将通过旋转在[-90，90]范围内随机旋转步骤45
	// 如果都设置为 0 , 则是水平显示
	rotationRange: [-90, 90],
	rotationStep: 45,
	/**
	 * 词间距, 距离越大，单词之间的间距越大, 单位像素
	 * 这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字
	 */
	gridSize: 8,
	// 设置为true可以使单词部分在画布之外绘制, 允许绘制大于画布大小的单词
	drawOutOfBound: false,
	/**
	 * 布局的时候是否有动画
	 * 注意：禁用时，当单词较多时，将导致UI阻塞。
	 */
	layoutAnimation: true,
	// 这是全局的文字样式，相对应的还可以对每个词设置字体样式
	textStyle: {
		fontFamily: 'sans-serif',
		fontWeight: 'bold',
		// 颜色可以用一个函数来返回字符串
		color: function () {
          // 随机颜色
          return (
            'rgb(' +
            [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
            ].join(',') +
            ')'
          )
        },
	},
	// 鼠标hover的特效样式
	emphasis: {
		focus: 'self',
		textStyle: {
			textShadowBlur: 10,
			textShadowColor: '#999'
		}
	},

	/**
	 * 词云数据，必须是一个数组，每个数组项必须有name和value属性
	 * 设置单个文本的样式：  textStyle 
	 * 
	 * 例：{
					name: '',
					value: 40,
					textStyle: {
					}
				},
	 */
	data: []
}]
let seriesData = props.options.series;
const series = merge({}, defaultSeries[0], seriesData[0]) // {}表示合并后的新对象，可以传入一个空对象作为初始值

function DrawWordCloud() {
	// 词云
	let mychart = echarts.init(document.getElementById("charts-content")) // 可以设置主题色'dark'
	mychart.setOption({
		series: series
	})
}

onMounted(() => {
	DrawWordCloud()
})
</script>

<style scoped lang="scss"></style>

父组件调用：

<template>
  <div class="bestsellers-container">
    <chart-word-cloud :options="state.chartOptions"></chart-word-cloud>
  </div>
</template>

<script setup lang="ts">
  import ChartWordCloud from './BestsellersNephogram/ChartWordCloud.vue'

  import { onMounted, reactive } from 'vue'

  const state = reactive({
    chartOptions: {
      series: [
        {
          gridSize: 20,
          data: [
            {
              name: '娜娜米',
              value: 30,
              // textStyle: {
              //   color: 'rgba(0, 0, 0, .4)',
              // },
            },
            {name: '五条悟',value: 30},
			{ name: '狗卷', value: 28 },
			{ name: 'Shoto', value: 28 },
			{ name: 'Vox', value: 25 },
			{ name: "Aza", value: 23 },
			{ name: 'Mysta', value: 20 },
			{ name: 'Uki', value: 18 },
			{ name: 'Luca', value: 15 },
			{ name: 'Shu', value: 10 },
			{ name: 'Ike', value: 10 },
			{ name: "Fulgun", value: 10 }
          ],
        },
      ],
    },
  })

  onMounted(() => {})
</script>

<style scoped lang="less">
  .bestsellers-container {
    height: 18.56rem;
    background: #f0f0f0;

    #charts-content {
      /* 需要设置宽高后才会显示 */
      width: 100%;
      height: 100%;
    }
  }
</style>

效果图：

• 字体平行且按预设颜色数组展示

如果想实现字体平行且按预设颜色数组展示的效果，只需将rotationRange都设为0即可，再传入自定义的color数组：

// 父组件
chartOptions: {
      color: ['#FFFFFF', '#FFFFFF', '#FFFFFF', 'rgba(255,255,255,0.7)', 'rgba(255,255,255,0.5)'],
      series: [
        {
          rotationRange: [0, 0],
          gridSize: 45,
          sizeRange: [15, 35],
          data: [...],
        },
      ],
    },

子组件则需要相对应的把将color改为：

color: function (v: any) {

   // 根据dataIndex属性作为下标去访问定义的color色系数组
   return `${props.options.color[v.dataIndex]}`
},

效果图：

背景图插入方式：

background: url('../assets/images/bg-cloud.png') repeat center center / cover;

• 自定义展示形状

1、首先要找到一张图片，为了成功率较高，一定要是矢量图，图片可以去iconfont图标库里找：

2、图片转为base64
需要把图片转成base64，不然词云画不出来，推荐一个免费转换的网址Base64图片转换

3、把图片相关的配置项修改一下

const image = 'data:image/png;base64,...'
const maskImage = new Image();
maskImage.src = image

// 赋值给series里的词云轮廓图maskImage
maskImage: maskImage,

效果图：

自定义形状需要足够多的数据去支撑，这样最终效果会更接近，感兴趣的可以试试~