6.1软工日报

今日学习vue3 + echarts-wordcloud

// 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>