Charles7c
a0358e1079
1.vitepress 1.0.0-alpha.44 => 1.0.0-alpha.47 2.@arco-design/web-vue 2.42.0 => 2.43.2 3.unplugin-vue-components 0.23.0 => 0.24.0 4.vite 4.0.4 => 4.1.4 5.vue 3.2.45 => 3.2.47 6.@antv/g2plot 2.4.23 => 2.4.25 7.axios 1.2.6 => 1.3.4 8.降低 @antv/g2plot 部分子依赖版本，解决构建错误：Error [ERR_REQUIRE_ESM]: require() of ES Module（@AntV+g-base@0.5.14\node_modules@antv\g-base\lib\animate\timeline.js not supported.） 9.锁定部分依赖版本，防止自动升级出现错误
40 lines
910 B
Vue
40 lines
910 B
Vue
<template>
|
|
<div id="wordcloud-container"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, onBeforeUnmount } from 'vue';
|
|
import { WordCloud } from '@antv/g2plot';
|
|
|
|
// 定义属性
|
|
const props = defineProps({
|
|
dataList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
// 渲染 WordCloud
|
|
let wordCloud;
|
|
onMounted(() => {
|
|
wordCloud = new WordCloud("wordcloud-container", {
|
|
data: props.dataList,
|
|
wordField: 'name',
|
|
weightField: 'value',
|
|
colorField: 'name',
|
|
wordStyle: {
|
|
fontFamily: 'Verdana',
|
|
fontSize: [14, 35],
|
|
rotation: 0,
|
|
},
|
|
// 返回值设置成一个 [0, 1) 区间内的值，
|
|
// 可以让每次渲染的位置相同（前提是每次的宽高一致）。
|
|
random: () => 0.5,
|
|
});
|
|
wordCloud.render();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
wordCloud.destroy();
|
|
});
|
|
</script> |