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>