使用@antv/g2plot实现文字权重分布划分图

最新推荐文章于 2024-03-28 16:26:53 发布

UzumakiHan

最新推荐文章于 2024-03-28 16:26:53 发布

阅读量234

点赞数 1

文章标签： vue g2plot

本文链接：https://blog.csdn.net/Hhjian524/article/details/134121079

版权

最后效果展示

安装@antv/g2plot

npm i @antv/g2plot

使用，示例是使用vue3+vite+unocss

<template>
  <div class="w-440px h-200px" id="wordcloudG2">

  </div>
</template>

<script setup lang="ts">
import { WordCloud } from '@antv/g2plot';
import { onMounted ,watch} from "vue";
let wordCloudInst = null;

const wordcloudG2List = [{
  name: 'Vue',
  value: 300,
},
{
  name: 'Rollup',
  value: 200
},
{
  name: 'Unocss',
  value: 200
},
{
  name: 'Angular',
  value: 150
},
{
  name: 'React',
  value: 200
},
{
  name: 'Vite',
  value: 100
},
{
  name: 'Webpack',
  value: 80
},
{
  name: 'Js',
  value: 200
},
{
  name: 'Node',
  value: 50
},{
  name: 'Html',
  value: 40
},
{
  name: 'CSS',
  value: 30
},
{
  name: 'Github',
  value: 200
}]
const colorList = ['#ff1745', '#2aefff', '#00f5b3', '#ffffff', '#eec34f', '#00b0da'];
watch(wordcloudG2List, () => {
    wordCloudInst.render();
});
onMounted(() => {
    wordCloudInst = new WordCloud('wordcloudG2', {
        data: wordcloudG2List,
        wordField: 'name',
        weightField: 'value',
        colorField: 'name',
        color: colorList,
        wordStyle: {
            fontFamily: 'puhuiti',
            fontSize: [12, 32],
            rotation: 0
        },
        random: () => 0.5
    });

    wordCloudInst.render();
});
</script>

<style scoped></style>