@antv/g2plot 是一个基于 AntV 的图表库属于antv库的一部分
用于快速创建各种类型的图表
支持折线图、柱状图、饼图、散点图等多种图表类型
@antv/g2plot 属于antv库的一部分 g2plot是在g2基础上封装的
npm install @antv/g2plot --save
效果
所有值共享一个颜色并且每次刷新颜色随机生成
组件页面
components-pop.vue
<template><div ref="wordCloudContainer" :style="{ width: '100%', height: '400px' }"></div>
</template><script>
import { onMounted, ref } from 'vue';
import { WordCloud } from '@antv/g2plot';export default {name: 'WordCloudComponent',setup() {const wordCloudContainer = ref(null);onMounted(() => {const data = [
{value: 67, name: '红腹角雉'},
{value: 98, name: '麝牛'},
{value: 97, name: '山舌鱼'},
{value: 100, name: '羚羊'},
{value: 37, name: '非洲王子'},
{value: 83, name: '麋鹿'},
{value: 60, name: '中华鲟'},
{value: 42, name: '鮪鱼'},
{value: 96, name: '射水鱼'},
{value: 54, name: '果子狸'},
{value: 33, name: '小春鱼'},
{value: 84, name: '水獭'},
{value: 86, name: '刺猬'}];const getRandomColor = () => {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;};const wordCloud = new WordCloud(wordCloudContainer.value, {data,wordField: 'name',weightField: 'value',sizeRange: [12, 60],color: getRandomColor(),shape: 'circle',wordStyle: {fontFamily: 'Verdana',fontWeight: 'bold',// 可以添加其他文本样式},// 其他配置});wordCloud.render();});return {wordCloudContainer,};},
};
</script><style scoped>
/* 你可以在这里添加组件的样式 */
</style>
使用页面
<template><div id="app"><WordCloudComponent /></div>
</template><script>
import WordCloudComponent from '@/components/pop.vue';export default {name: 'App',components: {WordCloudComponent,},
};
</script><style>
/* 你可以在这里添加应用的样式 */
</style>
不同值随机生成不同颜色并且每次刷新值随机生成
组件页面
components-pop.vue
<template><div ref="wordCloudContainer" :style="{ width: '100%', height: '400px' }"></div>
</template><script>
import { onMounted, ref } from 'vue';
import { WordCloud } from '@antv/g2plot';export default {name: 'WordCloudComponent',setup() {const wordCloudContainer = ref(null);// 随机生成颜色的函数const getRandomColor = () => {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;};onMounted(() => {if (!wordCloudContainer.value) {console.error('Word cloud container is not available');return;}// 数据准备，为每个单词分配随机颜色，并确保数据有效性const data = [{ value: 67, name: '红腹角雉' },{ value: 98, name: '麝牛' },{ value: 97, name: '山舌鱼' },{ value: 100, name: '羚羊' },{ value: 37, name: '非洲王子' },{ value: 83, name: '麋鹿' },{ value: 60, name: '中华鲟' },{ value: 42, name: '鮪鱼' },{ value: 96, name: '射水鱼' },{ value: 54, name: '果子狸' },{ value: 33, name: '小春鱼' },{ value: 84, name: '水獭' },{ value: 86, name: '刺猬' }].map(item => {if (!item || typeof item !== 'object' || !('name' in item) || !('value' in item)) {console.error('Invalid data item:', item);return null;}return { ...item, color: getRandomColor() };}).filter(Boolean); // 移除无效的数据项// 创建词云图const wordCloud = new WordCloud(wordCloudContainer.value, {data,wordField: 'name',weightField: 'value',sizeRange: [12, 60],// 直接使用数据中的 color 字段作为颜色配置colorField: 'color', // 指定颜色字段shape: 'circle',wordStyle: {fontFamily: 'Verdana',fontWeight: 'bold',},// 其他配置});wordCloud.render();});return {wordCloudContainer,};},
};
</script><style scoped>
/* 你可以在这里添加组件的样式 */
</style>
使用页面
<template><div id="app"><WordCloudComponent /></div>
</template><script>
import WordCloudComponent from '@/components/pop.vue';export default {name: 'App',components: {WordCloudComponent,},
};
</script><style>
/* 你可以在这里添加应用的样式 */
</style>
