VUE根据图片做图片形状的词云效果 ​

<template>
    <div ref="wordcloudRef" class="wordcloud"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from "echarts"
import 'echarts-wordcloud'

const wordcloudRef = ref()

onMounted(() => {
  	showEchart()
})

// 初始化词云
const initWordCloud = (data, base64) => {
  	var myChart = echarts.init(wordcloudRef.value);
  	var maskImage = new Image();
  	maskImage.src = base64;
  	const option = {
    title: {
      	text: '关键词', // 标题
      	show: false  // 是否显示标题
    },
    tooltip: {
      	trigger: 'item',
      	formatter : (params) => {return params.name;} // 提示框内容格式器
    },
    series: [{
      type: 'wordCloud', // 词云图
      shape: 'circle',  // 词云形状
      maskImage: maskImage, // 遮罩层
      left: 'center', 
      top: 'center',
      width: '98%', 
      height: '100%',
      right: null,
      bottom: null,
      sizeRange: [12, 18],  // 词的大小范围
      rotationRange: [-90, 90], // 词的旋转范围
      rotationStep: 1, // 词的旋转步长
      gridSize: 4,  // 网格大小
      drawOutOfBound: false,  // 是否绘制超出画布范围的词
      shrinkToFit: true,  // 是否自动缩放以适应画布
      layoutAnimation: true, // 是否启用布局动画 
        // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
        textStyle: {
          	fontFamily: 'sans-serif',
          	fontWeight: 'bold',
          	// 颜色可以用一个函数来返回字符串
          	color: function () {
            	// Random color
            	return 'rgb(' + [
              		Math.round(Math.random() * 160),
              		Math.round(Math.random() * 160),
              		Math.round(Math.random() * 160)
            	].join(',') + ')';
          	},
          	emphasis: { // 鼠标悬停时的文字样式
            	shadowBlur: 2,
            	shadowColor: '#333'
          	}
        },
        data: data
      }]
  	}
  	setTimeout(()=>{
		myChart.setOption(option);
  	},300)
}

// 绘制词云图
const showEchart = () => {
  	const data = [
    	{
      		name: '前端工程师',
      		value: 1
    	}
  	]
  	for(let i = 0; i < 100; i++){  // 生成100个词
    	data.push({
      		name: '前端工程师',
      		value: 1
   		})
  	}
  	var image = new Image();
	image.src = require('@/assets/images/黑色小人.png'); // 设置图片源路径
    image.setAttribute("crossOrigin", 'Anonymous') // 处理跨域
  	image.onload = ()=> {
    	var base64 = getBase64Image(image);
    	initWordCloud(data,base64); // 图片加载完成后调用初始化函数
  	}
  	//转换图片为base64函数
	function getBase64Image(img) {
		var canvas = document.createElement("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0, img.width, img.height);
		var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
		var dataURL = canvas.toDataURL("image/" + ext);
		return dataURL;
    }
}

// 暴露方法
defineExpose({
  	showEchart
})
</script>

<style lang="scss" scoped>
.wordcloud {
  	width: 400px;
	height: 500px;
}
</style>

<template>
    <div ref="wordcloudRef" class="wordcloud"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from "echarts"
import 'echarts-wordcloud'

const wordcloudRef = ref()

onMounted(() => {
  	showEchart()
})

// 初始化词云
const initWordCloud = (data, base64) => {
  	var myChart = echarts.init(wordcloudRef.value);
  	var maskImage = new Image();
  	maskImage.src = base64;
  	const option = {
    title: {
      	text: '关键词', // 标题
      	show: false  // 是否显示标题
    },
    tooltip: {
      	trigger: 'item',
      	formatter : (params) => {return params.name;} // 提示框内容格式器
    },
    series: [{
      type: 'wordCloud', // 词云图
      shape: 'circle',  // 词云形状
      maskImage: maskImage, // 遮罩层
      left: 'center', 
      top: 'center',
      width: '98%', 
      height: '100%',
      right: null,
      bottom: null,
      sizeRange: [12, 18],  // 词的大小范围
      rotationRange: [-90, 90], // 词的旋转范围
      rotationStep: 1, // 词的旋转步长
      gridSize: 4,  // 网格大小
      drawOutOfBound: false,  // 是否绘制超出画布范围的词
      shrinkToFit: true,  // 是否自动缩放以适应画布
      layoutAnimation: true, // 是否启用布局动画 
        // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
        textStyle: {
          	fontFamily: 'sans-serif',
          	fontWeight: 'bold',
          	// 颜色可以用一个函数来返回字符串
          	color: function () {
            	// Random color
            	return 'rgb(' + [
              		Math.round(Math.random() * 160),
              		Math.round(Math.random() * 160),
              		Math.round(Math.random() * 160)
            	].join(',') + ')';
          	},
          	emphasis: { // 鼠标悬停时的文字样式
            	shadowBlur: 2,
            	shadowColor: '#333'
          	}
        },
        data: data
      }]
  	}
  	setTimeout(()=>{
		myChart.setOption(option);
  	},300)
}

// 绘制词云图
const showEchart = () => {
  	const data = [
    	{
      		name: '前端工程师',
      		value: 1
    	}
  	]
  	for(let i = 0; i < 100; i++){  // 生成100个词
    	data.push({
      		name: '前端工程师',
      		value: 1
   		})
  	}
  	var image = new Image();
	image.src = require('@/assets/images/黑色小人.png'); // 设置图片源路径
    image.setAttribute("crossOrigin", 'Anonymous') // 处理跨域
  	image.onload = ()=> {
    	var base64 = getBase64Image(image);
    	initWordCloud(data,base64); // 图片加载完成后调用初始化函数
  	}
  	//转换图片为base64函数
	function getBase64Image(img) {
		var canvas = document.createElement("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0, img.width, img.height);
		var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
		var dataURL = canvas.toDataURL("image/" + ext);
		return dataURL;
    }
}

// 暴露方法
defineExpose({
  	showEchart
})
</script>

<style lang="scss" scoped>
.wordcloud {
  	width: 400px;
	height: 500px;
}
</style>